research diary
edim 2002
Week 4:
Linking Aural Style Sheets
First we need to look at the correct method of linking an external aural style sheet.
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
Source: http://www.htmlhelp.com/reference/css/style-html.html
The above code is fine for a basic HTML page but wont comply with strict
XHML standards. A few modifications where need to get the code to validate.
<link rel='StyleSheet' href="aural.css" type="text/css" media='aural'/>
Presently the template code allows users to load different aural style sheets depending on the value of a variable.
<script type="text/javascript">
if(auralChoice=='cool')
document.writeln
("<LINK type='text/css' media="aural" rel='stylesheet'
href='../styles/cool.css'>")
</script>
There where numerous problem trying to validate this code to XHTML standards. One problem however proved difficult to overcome.
"Below are the results of checking this document for XML well-formedness and validity…
* Line 20, column 50:
... aural' rel='stylesheet' href='../styles/cool.css'/>")
Error: element "link" not allowed here; check which elements this element may be contained within"
Souce. http://validator.w3.org/check
The problem boiled down to the use of "<" and ">"
within a XML document.
"4.8 Script and Style elements
In XHTML, the script and style elements are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as < and & will be recognized as entity references by the XML processor to < and & respectively. Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities.<script>
<![CDATA[
... unescaped script content ...
]]>
</script>
CDATA sections are recognized by the XML processor and appear as nodes in the Document Object Model, see Section 1.3 of the DOM Level 1 Recommendation [DOM].
An alternative is to use external script and style documents."
source WC3 XHTML specifications.
The following code wrapped in CDATA tags validated to XHTML standards.
<script type="text/javascript">
<![CDATA[
if(auralChoice=='cool')
document.writeln
("<link type='text/css' media='aural' rel='stylesheet' href='../styles/cool.css'/>")
]]>
</script>
Another solution is to use an external javascript file. The following code
inserts an external javascript file into the document.
<script type="text/javascript" src="../scripts/style.js"></script>
Importantly the file "../style.js" does not need to be wrapped
in <script> elements.
The crucial test is whether a variable can be passed from the coldfusion
database, to a javascript variable and then used in an external javascript
file.
SELECT * FROM table1 WHERE street='visual'
</cfquery>
var styleChoice = "<cfoutput query="table2">#name#</cfoutput>"
var auralChoice = "<cfoutput query="aural">#street#</cfoutput>"
</script>
document.writeln
("<link type='text/css' rel='stylesheet' href='../styles/small.css'>")
}
else if(styleChoice=='medium') {
document.writeln
("<link type='text/css' rel='stylesheet' href='../styles/medium.css'>")
}
else if(styleChoice=='large') {
document.writeln
("<link type='text/css' rel='stylesheet' href='../styles/large.css'>")
}
else{
document.writeln
("<link type='text/css' rel='stylesheet' href='../styles/medium.css'>")
};
This method was tested and worked see*
http://edim.tafe.vu.edu.au/cfprojects/darylcroke/cf-assignment/home/test4.cfm
*Although the above method of linking to an external javascript file worked locally it proved inconsistant online. Two problems where apparent.
1. The full http address was needed.
2. A language declaration was also required
<script language="JavaScript" type="text/javascript" src="http://edim.tafe.vu.edu.au/cfprojects/darylcroke/cf-assignment/scripts/refresh.js"></script>
#nb further testing proved that the fully http address was not required. The linking code now reads:
<script language="JavaScript" type="text/javascript" src="../scripts/refresh.js"></script>