HTML and CSS Reference
In-Depth Information
IE-specific style sheet
after
your primary style sheet, you can simply send alternate values and
properties to IE without using
any
hacks! If you haven't already, you'll want to dog-ear this
page, because it's important.
For example, to send alternate styles to IE 6 and earlier, in a separate style sheet a portion
of your document's
<head>
might look like this:
<link rel="stylesheet" type="text/css" href="c/styles.css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="c/IEbugs.css" media="screen" />
<![endif]-->
Non-IE browsers will only load
styles.css
, but IE versions “less than or equal to” 6 will
also load
IEbugs.css
, and apply those rules after the rules from the first style sheet, thus over-
riding specified values for any duplicate selectors.
■
Note
The
if
statement at the start of conditional comments can target other browsers, such as
<!--[if IE 5]>
to catch IE versions 5 and 5.5 (both start with “5”), or the all-encompassing
<!--[if IE]>
.
So, where you might have used a hack in the past to, say, specify an alternate line height
for lists in IE, you can now have a default rule in your primary style sheet:
ul li {
line-height:1.4;
}
and override it in your IE-only style sheet:
ul li {
line-height:1.6;
}
IE versions targeted by your conditional comment will use the second value, because it comes
later in the source order. No hacking necessary!
Hmm, What Does This Bit of Code Do?
There's nothing worse than revisiting a rule months after writing it, only to be stumped at its
purpose. It doesn't need to be a complicated hack either: even the simplest hack can be a mys-
tery when enough time has passed. The solution is to comment
everything
, even if you know
what function the hack performs—comments provide
context
, and context is an essential ele-
ment of understanding.
Say for example you have a client's logo positioned near the top left of a layout using an
absolutely positioned
h1
heading within a relatively positioned
<div id="container">
, which
works perfectly in non-IE browsers. Your (X)HTML looks like this:
