Dan Olsavsky's Blog

Thursday, January 10, 2008

Using Multiple Style Sheets (for multiple browsers)

Star HTML hack...
(where ie specific "root" selectors all began)

Star html is not valid mark-up, therefore it wont work in new browsers... for example, IE7 does not apply rules that use this hack, therefore, you still need to create a new style sheet. Microsoft is discontinuing support of the Star-HTML hack in strict and standard mode so that there will be fewer problems for coders. Furthermore, You should never hack a CSS document if the hack is not valid!

"Update January 2007 IE7 has been out for a few months now, and it ignores the Star-HTML hack just like non-IE browsers. Therefore the hack is now considered to be a filter hack for IE6 and below. Since those old browsers will not change in the future, this "less-than-IE7" filter hack is very safe to use, and allows easy forking of CSS rules between IE6 and IE7 in a single stylesheet."

" So what happens when we start to match child selectors in IE 7? Well, it makes a big mess because we now match more rules not meant to be used from within IE and then those are merged with IE only rules. Because of the merge styles that were never meant to be combined end up changing the layout of the page away from what the author originally intended when they designed their cross browser matrix and testing patterns. "

Example

The star-html technique does not validate

*html #container {
background: url(../images/ie-bkgd.gif) left top repeat-y;
}

Why Use Multiple Style Sheets?

  • It helps keep your default external style sheet from getting too lengthy.
  • It is also quite easy to determine what style sheet controls a specific browser (if you name it appropriately).
  • Easiest and most consistent way to manage browser inconsistencies of a web page
  • You can use CSS3 for browsers that support it (use all available CSS selectors)
  • Several HTML editing tools are now equipped with ways to manage multiple style sheets (ie Dremweaver)
There are certain browsers that we have to code for but do not have any reliable means to detect and work around consistently. I have found that it is much easier to develop your CSS code for a highly standards-compliant browser like Firefox first, then create a style sheet for workarounds, to make your code work on IE.

If you write your main style sheet with styles that are coded in a non-standard way to deal with IE bugs first, you will wind up having to rewrite everything when Microsoft fixes the bugs. I found that using the multiple style sheet technique is quite useful and has the least number of side effects.

Conditional Comments For IE (goes in the head of your document)


<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="screen-ie.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="screen-ie7.css" />
<![endif]-->

<![if IE 6]>
<link rel="stylesheet" type="text/css" href="screen-ie6.css" />
<![endif]>

Importing Multiple Styles

<style type="text/css"><!--
@import url(screen.css);
@import url(print.css);
@import url(mobile.css);
@import url(forms.css);
@import url(gallery.css);
--></style>

Great Articles
http://virtuelvis.com/archives/2004/02/css-ie-only
http://www.positioniseverything.net/articles/cc-plus.html
http://www.quirksmode.org/css/condcom.html
http://www.456bereastreet.com/archive/200510/stop_using_css_hacks_now/
http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/

posted by dano at 10:13 AM

0 Comments:

Post a Comment

<< Home

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.