General, Tutorials

9 Types of Useful CSS Hacks

Nov 11, 2008 insic 29 Comments

The most common problem of the front end web developers or designers is having their output looks and behave the same to different browsers. One of the solutions is using CSS hacks to apply different rules in a specific browser.

A CSS hack is simply an ugly and inelegant way of getting a browser to behave the way you want it to. CSS hacks are typically used to get around specific browser bugs such as IE’s proprietary box model. Unfortunately, the term hack has rather negative connotations and implies that there is a better way of doing something when often there isn’t. Therefore, some people favor the term patch to indicate that it is actually incorrect browser behavior that is being dealt with.

CSS hacks can use filters to apply one rule to one browser and a different rule to another. Alternatively, hacks can use incorrect CSS implementation to “trick” browsers into behaving the way you want them to. In essence, a CSS filter is a specific type of hack used for filtering different browsers. Unfortunately, most people tend to use the generic term hack to describe filters. As such, when people talk about CSS hacks, they are usually talking specifically about filters.


1. The child selector hack

The safest filters rely on unimplemented CSS rather than browser bugs. As these filters use valid CSS selectors to apply valid declarations, they are not, strictly speaking, filters at all. They are simply valid CSS rules that certain browsers fail to understand. The first of these filters is known as the child selector hack. IE 6 and below on Windows does not support the child selector, so you can use it to hide rules from those browsers. For this filter to work, you must make sure that there is no whitespace before or after the child selector. In this example, the child selector hack is being used to hide a transparent background PNG image from IE 5-6/Win:

IE 7 is expected to support the child selector. It is also expected to support native PNG transparency. By using the child selector filter in this way, you are building in forward compatibility by allowing newer versions of IE to view the transparent background without needing to revisit the code.

2. Attribute selector hack

Another interesting way to filter rules is by using the attribute selector. Many modern browsers such as Safari and Firefox support the attribute selector, but it is not supported by IE 6 and below. As such, you can use the attribute selector as a way of styling classes and IDs for more advanced browsers. In this example, the attribute selector is being used to apply a background PNG to the content div on more compliant browsers:

Again, both the attribute selector and PNG alpha transparency support are scheduled for IE 7, which means this method should work seamlessly when IE 7 launches.

3. The star HTML hack

One of the best-known and possibly most useful CSS filters is known as the star HTML hack. This filter is incredibly easy to remember and targets IE 6 and below. As you are
aware, the HTML element is supposed to be the first, or root, element on a web page. However, all current versions of IE have an anonymous root element wrapping around the
HTML element. By using the universal selector, you can target an HTML element enclosed inside another element. Because this only happens in IE 6 and below, you can apply specific rules to these browsers:

Adding a universal selector followed by an html type selector to the start of any regular CSS rule will hide that rule from everything other than IE. The most common way to use
this filter is to set a rule that you want all browsers other than IE to apply, and then override that rule in IE using the star HTML hack. For example, IE renders 1-pixel dotted lines as ugly dashed lines by mistake. To avoid these ugly dashed lines, you could set the hover border style on your anchors to dotted but override this in IE, making them solid instead:

It is very unlikely that this bug will appear other browsers, and it is expected to be fixed in IE 7. Therefore, the star HTML hack provides a relatively safe way of targeting IE 6 and below.

4. IE/Mac commented backslash hack

Another useful filter is known as the commented backslash hack. IE 5 on the Mac incorrectly allows escaping inside comments, so this filter works by adding a backslash in front
of the closing comment identifier. All other browsers will ignore this escape and apply the following rules. However, IE 5/Mac will think that the comment is still open, ignoring everything until the next close comment string.

By combining these two rules, it is possible to apply rules to IE 6 and below on Windows:

This can be very useful for attacking and fixing all kinds of Windows-specific IE bugs, and is possibly one of the most used filters around.

5. The escaped property hack

IE 5.x on Windows ignores escape characters. This bug forms the basis of the mid-pass filter you learned about earlier. It also forms the basis of the much easier escaped property filter. As the name suggests, this filter works by adding an escape character within a property. All modern browsers should ignore this escape character, but IE 5.x/Win thinks this is part of the property name and, not recognizing the property, ignores the declaration.

As such, the escaped property filter provides a simple way of hiding styles from IE 5.x/Win. However, you need to be careful when using this filter as the backslash character cannot come before the numbers 0 to 9 or the letters a to f (or A to F). This is because these values are used in hex notation and may therefore get escaped.

6. Tantek’s box model hack

Tantek’s box model hack was one of the first CSS filters ever invented. This filter works by passing one width to IE 5 on Windows and another width to all other browsers.

Unfortunately, Opera 5 has the same parsing bug as IE 5.x/Win. As such, a second rule is required to give Opera the correct width:

If it weren’t for this filter, pure CSS layout may never have been possible. However, these days it is seen as an ugly and complicated filter, best avoided. I have included it in here purely for its historical significance and because you will still see it being used in older stylesheets. These days, it is much more common to use the modified simplified box model hack.

7. The modified simplified box model hack

The escaped property hack can be combined with the star HTML hack to create the modifiedsimplified box model hack, or MSBMH for short. This hack is used for working around
IE’s proprietary box model by providing one length value to IE 5.x/Win and then the correct length value to IE 6/Win and all other browsers:

The modified simplified box model hack is easier to remember and much cleaner than Tantek’s box model hack, and so is currently the preferred box model hack. This filter can
be used for more than just box model hacks, so don’t let the name limit you.

8. The !important and underscore hacks

There may be some instances where you wish to apply one declaration to IE 6 and below on Windows and another to all other browsers, within the same rule. To do this, you could use the commented property hack, or you could use the !important or the underscore hack. For more on the history of this, and several other filters, see Tantek Çelik’s excellent
article, “Pandora’s Box (Model) of CSS Hacks and Other Good Intentions,” at http://tantek.com/log/2005/11.html.

The !important hack works because IE 6 and below on Windows has problems dealing with multiple properties in a single rule:

IE 4-6/Win will ignore the first declaration and apply the second. All other browsers will apply the first declaration because it is using the !important keyword, which increases the rule’s priority within the cascade. Similar to the !important hack is the underscore hack. By placing an underscore in front of a property, compliant browsers will no longer recognize that property and the declaration will be ignored. However, IE 6 and below on Windows ignores the underscore and thus applies the rule. So in this example, all modern browsers will apply a position of fixed, skipping the unknown second rule. IE 4-6/Win will ignore the underscore and will override the first rule, setting the position to static.

9. The Owen hack

All of the filters so far have been aimed at various versions of IE. This is partly because IE has more bugs than most current browsers. However, it is also because IE is by far the most prevalent browser, so more bugs get found and documented. But there are other buggy browsers out there, including Opera 6 and below. The Owen hack allows authors to hide styles from Opera 6 and below, as well as from IE 6 and below on Windows. This filter works because these browsers do not implement the first-child selector. Because there can only ever be one head element, it is always a firstchild. The body tag always comes after the head tag, and so can be targeted using an adjacent sibling selector. The resulting selector is understood by more compliant browsers, while being ignored by version 6 and below of Opera and IE on Windows. In the following example, the Owen hack is being used to add a background PNG image on the body tag for more compliant browsers, hiding it from IE/Win and Opera, versions 6 and below:

If you only want to target Opera 6 and below, you need to combine the Owen hack with the child selector hack. Say you wanted to display an upgrade notice to Opera 6 users. You would first use the child selector hack to show your upgrade message to every browser except IE 6 and below on Windows. You could then use the Owen hack to hide the message from more modern browsers:

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

  • http://imbuzu.wordpress.com Buzu

    Nice Article, and useful information.

  • http://swapnilsarwe.phpnet.us/ Swapnil Sarwe

    As you appropriately mentioned in your 1st quote, hacks are little ugly things.
    They should be avoided as the first priority.
    But then there are situations, where you cant.

    Very nice collection of hacks. Didnt knew few of them, surely this page is going to get bookmarked for reference.
    Thanx a lot for sharing.

  • http://www.clikdevelopment.co.uk David Kindness

    Ooh i didn’t realise there were so many different hacks. I primarily use the * html one when i have to make things ie6 proof.

    The other option is to use different css files for the various browser versions and then load these up depending on which browser is being used cascading style.

  • http://digitaltoolz.blogspot.com Cesar Noel

    thanks for sharing this one. I’m gonna blog about this also.

  • http://www.gurbuziskele.com.tr iskele

    Useful informations. Thanks.

  • http://www.pactumweb.com Tim G

    Interesting. I disagree though that “often there isn’t a better way” than these hacks. It seems to me that conditional comments are always a much better way to handle IE afflictions, for a whole host of reasons. For starters, they don’t clutter up or invalidate your main CSS file; second, they target specific generations of IE and below, and therefore you know they won’t cause breakage down the road.

  • http://www.chris-wallace.com Chris Wallace

    Nice list. I, of course, must warn against using hacks, but instead use conditional comments for alternate stylesheets with completely valid CSS contained within. That way you can drill down to the exact browser version and separate out the CSS from stylesheets that are directed at the “good” browsers.

    Another option is to use Dean Edwards’ ie7.js or ie8.js. These scripts force prior versions of IE to operate as standards-compliant browsers, thus making it unnecessary to use hacks for IE at least, which is usually the culprit of your CSS issues.

    Also, I think your child selector hack is backwards in example #1, I believe it should be:


    html<body {
    background-image: url(bg.png);
    }

  • http://www.chris-wallace.com Chris Wallace

    Whoops, I fail, I posted what you wrote and didn’t change it. It should be:

    html > body {
    background-image: url(bg.png);
    }

  • http://blog.insicdesigns.com insic2.0

    @Chris, Thanks for the correction.

  • http://blog.insicdesigns.com/ pappu

    thanks for the Hacks.. I
    was searching for something this.. specially the box hack.
    thanks.

  • Pingback: أخبار و راوبط (1) | Links

  • http://www.sanathlk.com Sanath Peiris

    Nice Article ! I like it.

  • http://google.com wondering

    Wow, really nice tutorial. very usefull.

  • Pingback: 9 Types of Useful CSS Hacks - YeJun

  • http://deuts.net deuts

    I just wish I could internalize all these hacks. I’m simply bombarded with massive data from the internet. haay, buhay.

  • http://www.softinquiry.com Dan

    Definitely a good collection of CSS hacks ! Thanks so much for sharing ;)

  • http://Webuniversinfotech Sarbjit

    Thanks insic2.0 this is very useful for me because i don’t these new hacks. :)

    Don’t mind I don’t know your name that’s why i mention insic2.0 ;)

  • Pingback: pavasun » 9 Types of Useful CSS Hacks

  • http://domaincoupon.net Domain Coupon

    Nice share,
    some of these hacks are new for me..
    thanks

  • http://www.pushingbuttons.net Timothy

    I’m not a big fan of hacks. Used to be, but learned to work without them. I do understand that sometimes you have no other choice, but if you use strict standards and an occasional IE conditional statement you should be fine.

  • TravelingCybotnics

    Finally, an article in this site where I understand everything in it. *lol* I’m kinda curious, insic, how old are you and where did you study?

  • Pingback: Types of CSS hacks and how to use them

  • http://www.electrictoolbox.com Chris

    Great post. I’ve been using the conditional comment way of pushing IE6 stuff into a separate style sheet and generally find I don’t need to apply any hacks for other versions of IE. However, it’s nice to see all of these in one place as an easy reference if you need it.

  • Pingback: Weekly Link Post 88 « Rhonda Tipton’s WebLog

  • http://ravitom.110mb.com/ rAVI tOM

    Thankz buddy

    deserve appreciation !!
    Well we are looking more from u for chrome and IE8

  • http://www.soft-media.dk webdesign

    Hi thanks for sharing. i work a lot with CSS and this were nice reminders :)

  • http://www.semtexdesign.com Jitender

    Hi thanks for this post. i like it. I never seen before such a great article on css. I had been finding this type of stuff for long time

  • http://www-reviews.blogspot.com Mark

    I didn’t know a Filipina is behind this wonderful blog. I’m a big net.tuts and themeforest blog fan, I think I noticed your comments there.

    Anyway keep it up kababayan. :-) Good Job!

  • http://www.ttkoo.com css教程

    very good thank u