The CSS Corner: Alternate Style Sheets

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 (44)

  1. Rowan says:

    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.

  2. Chris says:

    A nice addition, thanks.

    Is there any way to scroll through the alternative style sheets without having to select the menu each time?

  3. jc_condor says:

    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?

  4. jc_condor says:

    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.


    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);




    Now mabey people will use it 🙂

  5. jc_condor says:

    found this! much better than what I contributed!

    Also answers the question on how to save user preference through the use of cookies.

  6. sushovande says:

    Could this possibly be any more hidden? Hunt for the page menu – and then styles – seesh.. put this in the right click menu, please.

  7. Mike says:

    Wow I thought you might have implemented the extremely useful css corners but alas not.

    Maybe with the latest exploit of IE it would have been better to use the title alternative browsers.

    I could not believe today a microsoft employee talking on radio 5 (UK) about the latest exploit with the advice it is ok to stay with IE just make sure your virus and anti malware software is up to date.

    This advise was irresponsible.

  8. m says:

    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:

    I bet you didn’t recommend Firefox users to switch browser when some major Firefox exploits became available….

  9. mike says:


    Just to the list the workarounds (see below), what kind of normal user knows a quarter of what any of these mean.

    If I was a giving advice to normal users it is a lot easier to suggest download firefox/opera/others. The fact of the matter is that the most popular browser (and most targeted) is completely vulnerable and no self respecting computer scientist would suggest using it until the issue is resolved while there are numerous alternatives.

    Workaround A B C

    1. Set Internet and Local intranet security zone settings to "High" to prompt before running ActiveX Controls and Active Scripting in these zones X X

    2. Configure Internet Explorer to prompt before running Active Scripting or to disable Active Scripting in the Internet and Local intranet security zone X X

    3. Disable XML Island Functionality X

    4. Restrict Internet Explorer from using OLEDB32.dll with an Integrity Level ACL X

    5. Disable Row Position functionality of OLEDB32.dll X

    6. Unregister OLEDB32.DLL X

    7. Use ACL to disable OLEDB32.DLL X

    8. Enable DEP for Internet Explorer 7 on Windows Vista and on Windows Server 2008 X

    9. Disable Data Binding support in Internet Explorer 8

  10. mike says:

    Just read my comment sorry for the lack of punctuation!

  11. Jill says:

    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?


  12. Vedetta says:

    I’m glad to see this feature in IE8. Alternate style sheets are great.

  13. SDW says:

    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.

  14. wale says:


    wonderful attempt at derailing the topic here. speaking about alternative browsers, when that famous Firefox 3 launch day exploit was discovered, what did Firefox do? Did they advise people to use Opera/Safari/etc.? Nope. They advise users to disable JavaScript, LOL.

    MS’s advisory on this 0-day exploit is at least as good as, if not better than, Firefox’s advisory of "disable JavaScript" :rolleyes:

    And it took Firefox 3 three months before patching up that launch day exploit. So did all Firefox 3 users switched to Opera/Safari/etc. or were they all browsing web with JavaScript disabled for those three months? And it seems IE is reacting faster than Firefox this time.

    No self respecting computer scientist would suggest using only one browser all the time, but sadly apparently there are few self respecting computer scientist in Mozilla, Opera, MS, and Apple.

    For the normal user, an advisory to disable JavaScript/ActiveScript is the best they’ll get from Mozilla/MS. And any self respecting normal user should understand Security Zones and Active Scripting, just like any self- respecting normal user should understand JavaScript. Unfortunately you are not self respecting here.


    of course javascript can achieve css switching functionality. javascript can achieve 90% of what HTML5 is aiming to do in the future. But that surely doesn’t mean we should just throw HTML5 out of the window. This article has already explicitly mentioned that there are various server-side and client-side technologies to achieve the same goal.

    About those problems regarding remembering preferences and stuff, the article has already explained about it quite clearly. The W3C standards itself is lacking in those areas. And if IE goes out to implement those features with their own methods, people will bitch and whine about IE not sticking to standards and introducing proprietary stuff to the web again.

  15. Security says:

    "Microsoft, Please Remove This Junk"

    "This new threat has something else in common with that older WMF exploit in that it supports a Microsoft-specific feature that is largely obsolete: DHTML data binding. When this feature was introduced with Internet Explorer 4.0 in 1997, it was an innovative way for a web page designer to selectively load just part of a page.

    DHTML data binding never spread to other browsers. Instead, the Internet world warmed to AJAX and DOM operations to build dynamic web pages. That left Internet Explorer with yet another unhealthy feature. Few people use it, but since it’s there it offers an attack surface for the bad guys. Even the IE8 beta is susceptible to this exploit–proving I guess that it’s fully compatible with IE6 and IE7.

    The IE8 team has been doing some great work to bring Internet Explorer up to par as far as features and performance go. This latest security problem is a reminder that there are still plenty of dark code corners in Internet Explorer that, although rarely visited, can be extremely dangerous. Before IE8 ships, Microsoft should go through and remove or disable as many of these as possible."

  16. Robert O'Callahan says:

    @wale, you mean this bug?

    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

    only advised users to turn off Javascript "until a version containing these fixes can be installed" (which was ‘immediately’ for most users).

  17. Mitch 74 says:

    Nice article, but the "In part due to IE’s historical lack of user interface for alternate stylesheets" sentence is an understatement.

    Actually, older versions of IE (IE 5 and 6 if memory serves me) would sometimes load the content of ALL stylesheets (main and alternate) one on top of the other, so creating alternates was, actually, quite troublesome and REQUIRED server-side hacks.

    Please note that another feature (that of using LINK tags to create a navigation model) is still not addressed in IE (other browsers at least can parse it – see Gecko, enable use through an extension – , and sometimes offer UI to it – see Opera).

    It is, indeed, a nice improvement in IE 8, but, as said in other comments, could be less "hidden away" (I don’t agree that it should be part of the right-click context menu though, but the ability to create a toolbar button for those who want it right under their nose shouldn’t be neglected).

    It’s not the employees’ job to say that, at least until an exploit has been solved, users should switch browsers (although it could be part of a general list of recommendations when the exploit is in-the wild). However, right now disabling Jscript support in IE creates too much trouble (Jscript is used by CSS expressions on top of ECMAscript)

  18. Secure says:

    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.

  19. jc_condor says:

    "Microsoft is due to issue a patch to fix a security flaw believed to have affected as many as 10,000 websites."

    "The emergency patch should be available from 1800 GMT on 17 December, Microsoft has said."

    Here is the complete link.

  20. 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.

  21. Chris says:

    Would it be a good idea to uninstall the IE 8 Tech Build before applying this new patch?

  22. Patch says:

    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?

  23. once again says:

    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.

  24. Stifu says:

    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.

  25. Phil says:


    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.


    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…

  26. Odin says:

    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.

  27. Richard Fink says:

    Oddly, or perhaps not, the spec for Alternate Style Sheets is in the W3C HTML4.01 recommendation NOT CSS 2.1.

    The original thinking behind Alternate Style Sheets is worth a read.

    Alternate Style sheets are still largely a feature in search of an application. And I doubt you will see too many of them even when IE6 and IE7 finally drop out of sight (quite a few years to go on that, surely).

    The first problem is that, unless the stylistic changes are really trivial, Alternate style sheets are too much work to create. Web designers and developers have enough on their plates as it is. Second, how are users supposed to know that there are alternate style sheets available? And what specific presentational problems do they address? I doubt if anybody’s ever going to get in the habit of looking in the style menu when they visit a new site UNLESS the option is actually mentioned on-page in the HTML. So IE’s implementation in IE6 and IE7 of Alternate Style Sheets as existing "under the hood" but with no menu in the browser chrome, actually makes a lot of sense to me.

    Considering other, more pressing problems, this was back-burner stuff.

  28. leading by example says:

    What is with this post?

    The first image tag is (wrapped for clarity):


     alt="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."




    Lets count the flaws…

    1.) a title attribute would be nice, esp. if it was meant as a tooltip.

    2.) why set a height of 550px when the image is 986px high? – its unreadable.

    3.) there should be a closing slash on that image tag if your doctype is XHTML

    I didn’t want to be nit-picky, but I had to use "view image" in my browser to see the picture properly.. which points out another usability issue in IE.  There is no "view image" option.  Oh sure, there is a "show picture" option, which shows a picture, when for some buggy reason it didn’t load in the first place.

    but I digress

  29. stanley says:

    @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

  30. FremyCompany says:

    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.



  31. Patch says:

    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.

  32. SylvainG [MSFT] says:

    @once again: I used the original source from the W3C’s sample page, the markup of which is valid; unlike XHTML, HTML does not require the empty element syntax. The latter is ignored in all cases but a parse error on non-empty elements. I personally have no good reason to fix valid W3C markup but thank you for watching out!

    @Richard Fink: HTML 4.01 specifies the underlying markup and even protocol semantics for this feature. However, CSS 2.1 does require support for alternate stylesheets and the ability to turn off author style sheets per section 3.2 UA Conformance, #4 and #5.

    Hence HTML 4.01 *and* CSS 2.1. There are no back-burner requirements in CSS.

    I have personally seen the feature used in two scenarios :

    – Customer demos: a web designer used style switching to demonstrate different look and feel options to the customer for their new home page.

    – Versioning feature in a web site management platform: the user was able to undo the last n CSS updates for a page using the alt style menu to troubleshoot layout changes.

    So whether the feature is appealing to end-users depends on who the end-user is, and the application.


    Yes, all style sheets that apply to the current media type are downloaded, whether alternate or not. Network monitoring shows Gecko and WebKit doing the same thing. In general browsers ‘must attempt to retrieve all stylesheets associated with the source document that are appropriate for the recognized media type’.

    Lazy-loading alternate stylesheets would result in a slow user experience, whether the switch occurs through the UI or through script.

    It would also significantly complicate the DOM interface as it exposes a collection of stylesheet objects, each of which gives access to the rules within i.e. if stylesheets[x].rules could fail due to a network error, existing code would likely break and future code made more complex. Few Javascript developers would expect stylesheets[x].rules.length to result in a network request.

    This is not optimal in terms of bandwidth usage, but these are the constraints all browsers have.

    I assume your style switcher does not reference any external stylesheet through link elements and constructs stylesheet objects on the fly ? If that fits your requirements, that’s great !


    Yes, all stylesheets are downloaded. (see above).

    The selection is not persistent except for backward navigation i.e. the Back button should preserve the style you selected for the page you’re going back to within the current session. This part of the specification is unfortunately undefined.

    Yes, each style name – title attribute value – can map to multiple stylesheets. Untitled stylesheet references are persistent and always apply. The switching only occurs between those references that are explicitly named.

  33. Rob Parsons says:

    My masterpiece. I do notice differences between IE8 and other browsers that support this.

  34. Scriv says:

    Very nice feature! I wasn’t expecting this to pop up.

    This could be nice for sites wanting to offer high-contrast themes etc I reckon? Potentially good for usability and if nothing else we can add some extra spice to our sites.

    The best feature here is the "No Style" option though – it’s going to be really great to have this. I tend to do this quite a lot (although I can’t for the life me remember exactly why I do it…)

    Is it possible that a hotkey could be associated with this? Ctrl Shift S doesn’t appear to be used by IE?

    Thanks for the update, Sylvain.

    @sushovande – No more or less than other browsers. It’s consistent which is a whole world of goodness in itself.

    @leading by example – Holding down Ctrl and scrolling the mouse wheel will zoom the page. Word on the street is that this "Zooming" technology was designed for cases just like this.

  35. Richard Fink says:


    1) I DO like having the the "No Style" option handy.


    "CSS 2.1 does require support for alternate stylesheets and the ability to turn off author style sheets per section 3.2 UA Conformance, #4 and #5"

    I stand corrected. I was lazy.


    "There are no back-burner requirements in CSS."

    Hey, everybody’s gotta set priorities. Where’s the W3C event model in IE? Nowhere. (And it doesn’t bother me one bit, the workarounds are quite adequate, IMHO.)

    All I’m saying is that I don’t think anybody missed the thing much for the last ten years. There were more important things to attend to, once again, IMHO.


    "I have personally seen the feature used in two scenarios :

    – Customer demos: a web designer used style switching to demonstrate different look and feel options to the customer for their new home page.

    – Versioning feature in a web site management platform: the user was able to undo the last n CSS updates for a page using the alt style menu to troubleshoot layout changes."

    These are exactly the special-purpose scenarios I would expect and would use it for, myself. But for that, I can always open up Opera or FF. So why are you cluttering up IE? (Just breaking chops.)

    Seriously, these examples put Alternate Stylesheets squarely in the realm of "Developer Tools" wouldn’t you say? They kind of prove my point.

    I know, the spec is the spec is the spec but the spec is not supposed to be a wish list. Alternate Style Sheets could have been left to the world of add-ons with no ill-effect.

    Anyway, using the Partner’s Build and lovin’ it.

  36. SylvainG [MSFT] says:

    @Richard: "the spec is not supposed to be a wish list" Precisely. Once it’s in the spec *and* required, you don’t get to pick.

    Glad you like the PR !

  37. James says:

    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.

  38. anyone's reckoning says:

    Great news; alternate stylesheets are cool!

    They are even cooler when there it’s easy to see that an alternate stylesheet is available.  Firefox used to have a statusbar icon for alternate stylesheets back in the day; many of us fought hard to keep it but it was removed from Firefox 1.0, purportedly due to bugginess.[1]  Still, there are at least two add-ons for Firefox which implement this; I use Stylesheet Chooser Plus, which provides an option to persist one’s choice of stylesheet.

    @leading by example: actually, the biggest flaw in that image tag in this blog post is that the alt text is not quite suitable.  The first sentence sounds like a caption, and thus is suitable *title* text but not suitable alt text.

    Rarely do you want alt text to start with "image showing…"; imagine having it read out to you via your screen reader.  What are you supposed to think?  "An image? God, I wish I wasn’t blind so that I could see it".(*)

    There are exceptions, but in most cases, with good alt text (usually consisting of a complete sentence or sentences) the no-images user wouldn’t even be aware that they were "missing" anything — which they shouldn’t be anyway, as good alt text provides an *equivalent* (not necessarily identical) experience to the image as far as is practically reasonable.

    (*) this was deliberately puerile.  There are many use-cases for alt text, and being actually completely blind is not, I would imagine, the largest.


  39. Mitch 74 says:

    Usefulness of alternate stylesheets: you create one for very large screens, one for HD TVs (larger screens, not very good navigation), one for your average computer, and another for netbooks; all fall under the "media:screen" category, yet they have varying demands.

    Personally, I also found one case where alternate stylesheets are useful: when javascript is disabled, a simple yet elegant one is loaded; when JS is enabled, you use JS to enable another, more complex and supported by JS elements. This allows you to program styles with CSS in all cases (it has a damn code size overhead to program styles through JS).

    Last, there are cases where usability benefits: high-contrast, or no-image stylesheets may improve accessibility without having to revert to unstyled pages – which the new feature also enables.

  40. Paintoad says:

    Design belongs in the hands of designers, not users.


  41. wai says:

    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

  42. Mitch 74 says:

    Having downloaded the Partners Build (I’m not part of the program), I’m happy – and not.


    – 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:

  43. jQuery Lover says:

    Finally some custom CSS. Some of my friends chose firefox because they could change how gmail and google looked.