[thelist] CSS and font size

Jay Blanchard jay.blanchard at niicommunications.com
Fri Jan 14 07:47:20 CST 2005


[snip]
http://www.wired.com/. Look over in the right hand top corner and it 
says Text Size. As you click on these the size of the text changes. I 
know it uses CSS but how does it make the selection of the proper css
sheet?
[/snip]

Using JavaScript. If you view the source you'll find several stylesheets
that define the text sizes and functionality to choose them.



<link rel="alternate stylesheet" type="text/css" media="screen,print"
href="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news
/v/20020914/css/wnSm.css" title="Small Text" />
<link rel="alternate stylesheet" type="text/css" media="screen,print"
href="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news
/v/20020914/css/wnLg.css" title="Large Text" />
<link rel="alternate stylesheet" type="text/css" media="screen,print"
href="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news
/v/20020914/css/wnLg2.css" title="Larger Text" />

<div id="nav"><a name="nav" class="skiplinks"></a><span
class="textSize"><img
src="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news/
v/20020914/images/label_textsize.gif" alt="Text Size: " width="50"
height="18" /><a href="#" onclick="setActiveStyleSheet('Small Text',
1);return false;"><img
src="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news/
v/20020914/images/icon_text_sm.gif" alt="Small Text " width="18"
height="18" title="Small Text" /></a><a href="#"
onclick="setActiveStyleSheet('', 1);return false;"><img
src="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news/
v/20020914/images/icon_text_med.gif" alt="Normal Text " width="18"
height="18" title="Normal Text" /></a><a href="#"
onclick="setActiveStyleSheet('Large Text', 1);return false;"><img
src="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news/
v/20020914/images/icon_text_lg.gif" alt="Large Text " width="18"
height="18" title="Large Text" /></a><a href="#"
onclick="setActiveStyleSheet('Larger Text', 1);return false;"><img
src="http://a1112.g.akamai.net/7/1112/492/2002091467/www.wired.com/news/
v/20020914/images/icon_text_lg2.gif" alt="Larger Text " width="18"
height="18" title="Larger Text" /></a></span>


More information about the thelist mailing list