Jaa

The CSS Corner: Alternate Style Sheets

  • Artikkeli

As publishing and layout standards for web documents, HTML 4.01 and CSS 2.1 define relatively few user experience requirements for browsers. One of them, however, mandates the ability for end users to switch among a set of mutually exclusive document styles defined by the author.  This feature is known as alternate style sheets. Significantly, the end user must also be able to turn off all styling.

Unfortunately, Internet Explorer did not expose this feature in the user interface until IE8 Beta 2.

The Style Menu

If you navigate to the W3C’s alternate style sheets example page, your Page-Style menu will look like the following:

Image of the Page menu showing the Style Submenu. In the Style submenu are many different style choices as well as the choice of No style.

This new menu lets you turn off all CSS in the page through the No Style option, but you can also select any of the styles defined by the author of this page. 

Under The Hood

If we look at the page source, the content of the head element specifies the relationship between the style names in the menu and the URIs of the corresponding external style sheets:

         <link rel="alternate stylesheet" title="Gold (left, fixed) + navbar" href="../../threepart-left-f.css">
         <link rel="alternate stylesheet"title="Gold (right, fixed)" href="../../threepart-nobanner-f.css">
         <link rel="alternate stylesheet"title="Gold (left, fixed)" href="../../threepart-left-nobanner-f.css">

Note that a style name can map to as many style sheets as necessary. The browser will then present the specified style names to the user, allowing him to switch to his preferred style. Markup details for web authors are available in section 14.3.1 of HTML 4.01. The DOM reflects the current user selection through the disabled property of the styleSheet objects in document.styleSheets, while the isAlternate and isPrefAlternate properties reflect the author’s style definitions in the document head.

Supporting User Choice

In part due to IE’s historical lack of user interface for alternate stylesheets, this feature has seen very limited use on the web even as continued interest led to the design of many workarounds, both client-side and server-side. A few corporate sites use it e.g. Citibank Japan to select top-level menu fonts. The standard design itself remains incomplete: for instance, the state and persistence of the user’s style selection as he navigates around a web site is undefined.

While the ability to switch or turn off styling is a logical outcome of the separation of style and content, end-user style control has been in practice limited to those sufficiently CSS-savvy to edit their favorite browser’s user style sheet. With alternate style sheets now supported by all major browsers, web site designers can let users customize their web experience further.

Sylvain Galineau
Program Manager

Comments

  • Anonymous
    December 16, 2008
    Thank you for a straight-forward post. Although from the title I initially thought this article would be about how to make rounded corners with CSS or something. And please introduce some new categories for the articles on this blog.

  • Anonymous
    December 16, 2008
    A nice addition, thanks. Is there any way to scroll through the alternative style sheets without having to select the menu each time?

  • Anonymous
    December 16, 2008
    Excelent! I had never seen this. I have 3 questions:

  1. Once selected should the browser remember? IE8 Beta 2 dose not making this a little problematic for users. Since a user dose not know this feature exists dose he always have to check!!! Not very accessible, even though it is handled through the UI. I don't think it will catch on.
  2. Can this collection be handled through javascript? how do you specifiy wich one is active? and how do you recommend on saving user preferences! (is the <META http-equiv="Default-Style" content="compact"> supported?) 3)Why not use the user defined stylesheet (nice UI) for accesebility! Large fonts, and HI contrast?

  • Anonymous
    December 16, 2008
    I guess I could have answerd my self some of the questions :) I think the article could have added a little more. This works but could be better! 2 functions: 1st enumerateStyleSheets: enumerates styles and creates a list. 2nd setStyle: sets one of the stylesheets as active and deactivates the rest. <script> function enumerateStyleSheets(elem) { elem.innerHTML = "View Styles" elem.innerHTML += "<ul>"; for (var StyleSheetIterator = 0; StyleSheetIterator < document.styleSheets.length; StyleSheetIterator++){ li = "<li onclick='setStyle("+StyleSheetIterator+")'>"+document.styleSheets[StyleSheetIterator].title+"&nbsp;"; li += document.styleSheets[StyleSheetIterator].disabled?"NO":"YES"; elem.innerHTML += li; } elem.innerHTML += "</ul>"; } function setStyle(id) { for (var StyleSheetIterator = 0; StyleSheetIterator < document.styleSheets.length; StyleSheetIterator++){ document.styleSheets[StyleSheetIterator].disabled = (StyleSheetIterator!=id); } } </script> Now mabey people will use it :)

  • Anonymous
    December 16, 2008
    found this! much better than what I contributed! http://www.alistapart.com/articles/alternate/ Also answers the question on how to save user preference through the use of cookies.

  • Anonymous
    December 16, 2008
    Could this possibly be any more hidden? Hunt for the page menu - and then styles - seesh.. put this in the right click menu, please.

  • Anonymous
    December 16, 2008
    The comment has been removed

  • Anonymous
    December 16, 2008
    To the comment above mine: Please note that the default configurations under Windows Vista (UAC & protected mode) are preventing this exploit from successfully attacking user's system. (Unless the user will manually allow it to run) There are plenty of workarounds available: http://blogs.technet.com/swi/archive/2008/12/12/Clarification-on-the-various-workarounds-from-the-recent-IE-advisory.aspx#workarounds I bet you didn't recommend Firefox users to switch browser when some major Firefox exploits became available....

  • Anonymous
    December 16, 2008
    The comment has been removed

  • Anonymous
    December 16, 2008
    Just read my comment sorry for the lack of punctuation!

  • Anonymous
    December 16, 2008
    Glad to see that alternative stylesheets are now available! Any chance that the menu is going to be fixed for this so the default cascade is to the right? or has this been fixed in that partner build thing? thanks

  • Anonymous
    December 16, 2008
    I'm glad to see this feature in IE8. Alternate style sheets are great.

  • Anonymous
    December 16, 2008
    RE the exploits: Much ado about nothing, really.  If you're a Vista user, then you're effectively immune, unless you're dumb enough to turn off UAC and IE's Protected Mode. Disabling UAC and/or Protected Mode is like going on vacation for a week and leaving all your unlocked.

  • Anonymous
    December 16, 2008
    The exploits are being patched as we speak http://www.microsoft.com/technet/security/bulletin/ms08-dec.mspx

  • Anonymous
    December 16, 2008
    The comment has been removed

  • Anonymous
    December 16, 2008
    The comment has been removed

  • Anonymous
    December 16, 2008
    @wale, you mean this bug? http://dvlabs.tippingpoint.com/blog/2008/06/18/vulnerability-in-mozilla-firefox-30 That was fixed in one month, with the update to Firefox 3.0.1 on July 15, not three months as you claim. An update could have been shipped faster, but there was no need as the bug details were not publicly known and exploits were not circulating --- it was not a true zero-day, and users were not at significant risk. Mozilla's advisory on July 15th http://www.mozilla.org/security/announce/2008/mfsa2008-34.html only advised users to turn off Javascript "until a version containing these fixes can be installed" (which was 'immediately' for most users).

  • Anonymous
    December 16, 2008
    The comment has been removed

  • Anonymous
    December 16, 2008
    Looks like wale doesn't even check his facts before spouting off nonsense from his mouth. That bug was fixed in 3.0.1 in July, just a month after 3.0 was released, not 3 months like wale erronously claims. You know the most recent patch for IE, KB958215?  Check the dates for the dlls, they were compiled in OCTOBER and only released this month, DECEMBER. Microsoft has been sitting on the vulnerabilities fixed in KB958215 for 2 MONTHS, leaving IE users unpatched and vulnerable.

  • Anonymous
    December 17, 2008
    The comment has been removed

  • Anonymous
    December 17, 2008
    C'est le blog de MSDN qui l'annonce, illustration à l'appui. :) Pour rappel, les feuilles de style alternatives sont appelées au moyen de l'élément link, avec un attribut rel ayant comme valeur alternate stylesheet.

  • Anonymous
    December 17, 2008
    Would it be a good idea to uninstall the IE 8 Tech Build before applying this new patch?

  • Anonymous
    December 17, 2008
    Will there be a patch also for IE8 8.0.6001.18343 Partner Build users also? Or will the IE8 Beta 2 patch cover both Beta 2 and Partner Build?

  • Anonymous
    December 17, 2008
    once again your sample code is far from complete or best practices.  Here is the revised code: <link rel="alternate stylesheet" title="Gold (left, fixed) + navbar" href="../../threepart-left-f.css"/> <link rel="alternate stylesheet" title="Gold (right, fixed)" href="../../threepart-nobanner-f.css"/> <link rel="alternate stylesheet" title="Gold (left, fixed)" href="../../threepart-left-nobanner-f.css"/> As for the "coolness" of this feature I'm not so sure.  Don't get me wrong I think conceptually it is very cool, but since I already have a reset stylesheet, a core stylesheet, a fixIE6.css stylesheet, a fixIE7.css stylesheet, (and currently a fixIE8.css stylesheet) I'm not sure how swapping out a single stylesheet will save me much. Until IE6 and IE7 are no longer supported browsers, I'll keep my application specific stylesheet switcher.

  • Anonymous
    December 17, 2008
    once again: hardly worth highlighting. True, they accidentally removed the space before the title attribute of the 2 last link elements, but as for the missing end slash, it's neither a mistake nor bad practice: they simply took their code from a W3C page which has an HTML 4.01 doctype.

  • Anonymous
    December 17, 2008
    @Jill:- It cascades to the left because the Page menu option is over to the right, there isn't room for it to cascade that way. @Wale:- You obviously don't know what you're talking about.  Quit ranting like some petulant child and say something constructive. @Mitch 74:- You're right - it shouldn't be a right click option (there's too many in there already, with accelerators, slices and other nonsense) but it is a very hidden option on the menus.  A toolbard button (hey, maybe next to Compatibility :-) ) would be the way to go.  I have used this option once on Firefox... in the 4 years I've used Firefox!  Just wanted to try the option, see what it did.  Less than impressed, nothing to see, move along...

  • Anonymous
    December 17, 2008
    What is downloaded and when? Does IE download all stylesheets when the page is loaded regardless of whether any have been selected/enabled (this sounds like a waste of bandwidth) or does it only fetch an alternative stylesheet when the user changes via the menu? And are they persistent? If I change to an alternative stylesheet on one page and then follow a link to another - or return to that site later on - with IE look for alternative stylesheets with a matching TITLE attribute and apply it automatically? Does IE allow more than one stylesheet to be applied at the same time? For example, would a stylesheet with no TITLE attribute remain being applied wven when the user selects an alternative attribute that does have a TITLE attribute? It will be a waste of bandwidth and effort if the website has to provide multiple stylesheets which are almost identical apart from some colours or fonts.

  • Anonymous
    December 17, 2008
    The comment has been removed

  • Anonymous
    December 17, 2008
    The comment has been removed

  • Anonymous
    December 17, 2008
    @Odin: re:"Does IE download all stylesheets when the page is loaded regardless of whether any have been selected/enabled (this sounds like a waste of bandwidth)" OMG!! I thought I would test this... IE8PR1 DOES INDEED download every single CSS stylesheet, needed or not! - What a complete waste of bandwidth! I'm sticking with my own style switcher for sure

  • Anonymous
    December 17, 2008
    IE is still missing an @document for user style sheets. It's not a difficult feature to implement but it can be very great for a lot of users, including me. HERE IS THE REFERENCE OF THE AT-RULE IN FF : https://developer.mozilla.org/en/CSS/@-moz-document Fremy

  • Anonymous
    December 17, 2008
    http://www.microsoft.com/technet/security/bulletin/MS08-078.mspx Patches released for IE5-7 critical security vulnerability. Patch NOW. I can't find the links to download IE8 Beta 2 or Partner Build patches though.

  • Anonymous
    December 17, 2008
    The comment has been removed

  • Anonymous
    December 17, 2008
    My masterpiece. I do notice differences between IE8 and other browsers that support this. http://www.iecustomizer.com/MSMVP/AlternateCSSTest.htm#

  • Anonymous
    December 17, 2008
    The comment has been removed

  • Anonymous
    December 18, 2008
    The comment has been removed

  • Anonymous
    December 18, 2008
    The comment has been removed

  • Anonymous
    December 18, 2008
    There you go getting me all excited... what does this have to do with CSS corners? A border-radius implementation would be sooo great, even if it's proprietary.

  • Anonymous
    December 19, 2008
    The comment has been removed

  • Anonymous
    December 20, 2008
    The comment has been removed

  • Anonymous
    December 21, 2008
    Design belongs in the hands of designers, not users. Ridiculous.

  • Anonymous
    December 21, 2008
    one suggestion on phishing filter / smartscreen, can i use other source instead of windows live? as most fake web msn mesesenger website are not blocked by windows live, but google does

  • Anonymous
    December 22, 2008
    Having downloaded the Partners Build (I'm not part of the program), I'm happy - and not. Happy:

  • the "onDOMmodified" scrolling bug (all srollings are reset to 0 on DOM modification, including CSS changes on pseudo-elements like :hover) is gone. Yay!
  • the problem of disappearing generated content when there's a lot of it on a page seems gone. Yay²!
  • unapplied negative margins on generated content (that one was mine, better explained then reported by G. Talbot) is gone. Yay cubed! BUT there is now a new problem that these bugs used to hide:
  • negative bottom margins are not properly applied on generated content when parent content is resized without being followed by a reflow Updated, simplified, one-file-does-all test cases: http://moneyshop.perso.cegetel.net/moneyshop/testcases.html
  • Anonymous
    December 26, 2008
    Finally some custom CSS. Some of my friends chose firefox because they could change how gmail and google looked.