CSS Hacks

Posted by Giulio Bai

Some nice hacks to improve your stylesheet with

Skill: Intermediate

Posted: 08/12/2008

Views: 657

Rating: 0.00 /5

Popularity: 0.00

Sign Up to vote for this article

Introduction

Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines.

The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

1. Conditional comments

Their main purpose is to prevent IE to parse content that might break the design and/or functionality of the website.

Positive conditional comment

Syntax is a s follows

Negative conditional comment

Syntax is a s follows

<![IGNORE[]]>CONTENT<--<![endif]-->

CONDITION could be

IE: any versions of IE
lt or lte IE VERSION: IE VERSION is respectively lower or lower or equal
gt or gte IE VERSION: IE VERSION is greater or greater or equal

Example

... <head> <title>Test</title> <link rel="stylesheet" href="common.css" name="common" />   <![IGNORE[]]><link rel="stylesheet" href="this_browser_doesnt_suck.css" /> </head> ...

2. !important

The !important directive was not read by IE6 and below, while this hack has been fixed in IE7.

... a { color: red !important; /* IE6 and below skip this line; other browsers respect importance */ color: blue; /* IE 6 and below use blue instead; other browser still have red color set */ } ...

3. @import

IE7 and below don't support media selectors in the @import directive.

... @import "ie_wont_read_this.css" all; ...

4. div[class|="hypen-hack"]

IE7 and Firefox interpret the div[class|="hyphen-hack"] directive as one would expect. Opera does it differently: it splits up the attribute value by hyphens and only check the first part against the attribute selector value.

... div p { background-color: red; /* All browsers set the right background; Opera 8, 9 does it too */ } div[class|='hyphen-hack'] p { background-color: blue; /* IE7 and Firefox appply blue background; Opera still uses the above */ } ...

5. /**/

Putting empty comments wherever in the stylesheet will cause IE5 to misinterpret the line.

This is because IE versions prior to 6 treat /**/ as a opening or closing comment and therefore the instruction below will cancel the directive

... div { color: red; /* All browsers set red as foreground color */ color /**/:/**/ blue; /* All browsers set blue foreground color, except IE 5 and below */ } ...

6. >

IE is unable to parse child selectors properly.

This results in a "nice" hack that can be used in replacement of the !important directive.

... div { color: red; /* Everything ok, this is red for everybody! */ } body > * div { color: blue; /* Not that good now: IE doesn't apply the blue color; other browsers do */ } ...

And many more are out there!

Yeap! These are only some of the known CSS hacks, the ones that are considered most useful and common.

Others involve invalid CSS (and are thus disencouraged by most) or have very few applications (and thus aren't worth a mention here).

Have fun experimenting!

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication

About the author

Giulio Bai

Location: Italy
Home page: http://giulio.hewle.com

Sign up to post message on the article message board!