Especially in that it only affects one page at a time rather than at the domain (or site)level. In fact, the whole W3C spec for alternate stylesheets leaves a lot to be desired.
Do buttons inherit font plus#
(A visual “bump” when the page re-renders horizontal scrollbars general ugliness at the new font-size etc…)Īlso, it seems to me that it adds a lot of complexity in exchange for very little payoff.įive extra server requests plus the extra weight just to nudge the fonts! I’ve yet to see a really good, trouble-free implementation of font resizing on any of the dozen or so sites where I’ve seen it used. Having done quite a bit of experimenting with switching stylesheets myself, I found this approach quite interesting. That’s it! A warning #section5īeware of the bug in IE which turns on quirks mode when the XML declaration Here’s the style switcher source code, and here’s a complete working example, tested in Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, and Safari 1.2. The buttons themselves get implemented like this: Style: Working With Alternate Style Sheets” to our HTML page: Then we add the style-sheet switcher from “ Alternative Type="text/css" href="xx-small.css" title="A-" /> The JavaScript #section4 Type="text/css" href="x-small.css" title="A-" /> Type="text/css" href="small.css" title="A" /> Type="text/css" href="medium.css" title="A+" />
Type="text/css" href="large.css" title="A++" /> Stylesheet” menu and Mozilla’s “View > Use style” menu. These names will be displayed in Firebird’s “Switch to alternate Next, we create the HTML document and connect the basic and alternative CSSĭocuments, giving the alternative style sheets names from the smallest, “A-”, through “A-”, “A”, “A+”, and “A++”. The created files are: xx-small.css, x-small.css, small.css, medium.css, large.css. We should also consider and compensate for the size problems in IE5 and Opera (for details and explanation, have a look at Todd Fahrner’s great article, “ CSS The scaling factor between the individual indexes should be 1.2, as suggested by the CSS2 specification. Then we create five alternative style sheets using the absolute sizes that are defined in the CSS specification: xx-small, x-small, small, medium, and large. * default font url(small.css) /* Netscape 4 safe font sizes */įont-family: Arial, Helvetica, sans-serif The first step is to create a basic CSS file that uses relative font sizes in conjunction with default size.
Here’s a simple solution for text resizing that respects users’ choices and also gives them an additional option for resizing. Unfortunately, most existing methods for using resizing buttons ignore the user’s default settings. 3 days of design, code, and content for web & UX designers & devs.
0 kommentar(er)
