• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Dynamically loading stylesheets

 
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Is there a easy/good/proper way to dynamically load stylesheets for different browsers? I noticed when viewing the source for Mike's (Tab Example), it contains the line of code:

which implies, I believe, that this stylesheet is for IE6 only. I'm not sure what is. Is this ASP code? If so, how would one dynamically load stylesheets using JavaScript for non-ASP users?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Personally I do not think you should ever use them, but I like blood and bald spots.

Info on conditional comments in CSS: http://www.quirksmode.org/css/condcom.html

Eric
 
Author
Posts: 42
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Is there an easy/good/proper way to dynamically load stylesheets for different browsers?

There is only one proper way to load stylesheets conditionally based on the version of the browser. It is through Microsoft's proprietary "conditional comment". This is client-side side code that is interpreted by Internet Explorer (IE).

The idea is that if the version of the browser matches the conditional expression in the comment, the browser will interpret the content of the comment as XHTML code. If the version of the browser does not match the conditional expression, the browser ignores the content. You can use a conditional comment anywhere in your HTML document to conditionally insert XHTML.

The following code loads a stylesheet only in Internet Explorer version 6 or earlier.



As you know IE6 occasionally needs help to be compatible with other browsers. For this reason, using conditional comments to load stylesheets are an essential technique in Internet Explorer 6. When you use the design patterns in my book, you won't need to use conditional comments very often, but when you need them, they are a must!

Normally I wouldn't recommend a proprietary solution, but conditional comments are an exception. They are perfectly valid XHTML, and because they are comments, they are ignored by browsers other than IE. And lastly, Microsoft officially recommends them as the ONLY proper way to insert version-specific XHTML.

Unfortunately, the W3C specifies NO official way to conditionally evaluate HTML or CSS code! This is a major oversight because all versions of all browsers have bugs that need to be worked around � even Firefox!

Because the W3C and other browser vendors do not offer a solution, some developers "hack" a solution by taking advantage of bugs in specific versions of browsers. As thousands of web developers found out when IE 7 was released, bugs get fixed and hacks no longer work.

In chapter 2 of my book, Pro CSS and HTML Design Patterns, I have a design pattern called "Conditional Stylesheet" that goes into more detail on how you can take advantage of conditional comments. For an example, check out the book's website at http://www.cssdesignpatterns.com/Chapter%2002%20-%20HTML/Conditional%20Stylesheet/example.html. View this page in Internet Explorer and in another browser and you will see it is styled differently in Internet Explorer. You can look at the source code to see what is going on.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Because the W3C and other browser vendors do not offer a solution, some developers "hack" a solution by taking advantage of bugs in specific versions of browsers. As thousands of web developers found out when IE 7 was released, bugs get fixed and hacks no longer work.

Yeah, I got the scars to prove I got bitten by this one and learned my lesson the hard way!

We use Java on the backend and so it was easy for us to use a server-side solution to serve up only appropriate CSS. Glad to hear that the patterns in your book will make even this unnecessary.
reply
    Bookmark Topic Watch Topic
  • New Topic