Paul Irish

ie8 do not do ?

"/* IE 7 and below */"

Pretty sure *:first-child+html doesn't target below IE7, otherwise nice list.

html:first-child #cinco applies to Safari 2 as well (tested 2.04 at that time)

In addition to that list here are the ones I was using in my latest project:

html[xmlns*=""]:root <selector> = Applies: Safari 3.1, Safari 2.04
*|html[xmlns*=""] <selector> = Applies: Safari 3.1, Safari 2.04, Opera 9.25
:root *> <selector> = Hides from IE
* > <selector> = Hides from IE6
property /**/: value; = Hides from IE6

missing this one:
/* IE7/8 */
*+html #nueve { color: red }

Seen elsewhere :

ALL IE VERSIONS:

#somediv{
width: 100px\9;
}

IE8 STANDARDS MODE ONLY:

#somediv{
width /*\**/: 100px\9;
}

—-
credits : http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

I've managed to narrow all my css hacks down to only the property hacks. It is nice to see the other options here, but I hope I never have to use them.

Great list to have just in case! Thanks for sharing

Check that in Safari.I write in my css code u specify above like
html[xmlns*=""] body:last-child #login-box_one p.last { position:relative; top:-8px;}
but it does not affect on my xhtmlfile. my safari(on windows) vesrion is "Safari 4 Public Beta(528.16)

Then how can fix the css bugs in safari. any solution. In other browser issues i solved like Ie7 bugs. i use the ( /* IE7 */*:first-child+html #dos { color: red } ) shown in above. in other words how can i fix the safari problem . please this is very urgent requirement

Hi, What has happened to the Attribute Hacks?

Thanks for the quick fix!

I use this to select for IE7 only:

#id element.class{
color: blue;
.color: red}

thanks friend i have solved my problem of safari

Great Hacks for the different browsers. But one thing, is there any hack that only works for Opera9+..

Here's an alternative approach, that uses server-side User-Agent sniffing and then puts classes on the BODY tag, such as "Browser-Engine-WebKit" or "Browser-DesktopOpera-10-0-1":
http://ernstdehaan.blogspot.com/2009/06/combining-css-and-user-agent-sniffing.html

thanks for posting this !!

Hi Paul, I found this page via David Bloom's blog. Thanks so much for this doubleplusgood page!

Thanks Paul, those Safari hacks come in handy!

Defintively a great article Paul. Thanks a lot.
Just a question regarding Opera 10.01 since I didn't see any hack for it in your demo page. Is there any one for this browser?

FYI – - the webkit selector hack needs 'body' before basic tags such as h4 tags in order for them to be targeted accurately. hope that helps!

Hi,

I happened to see your post and find it very informative. I would like to share a link where a software engineer has share a tip on "CSS hack for Safari Browser".

Here is the link:
http://www.mindfiresolutions.com/CSS-hack-for-Safari-Browser-672.php

Hope you find it useful and of assistance.

Thanks,
Bizz

Thanks for the great summary of available CSS hacks. One correction:

Your code sample matches also IE7 because you used a ";"

#veinte { color/*\**/: blue\9; }

If you want to address only IE 8 you have to omit the ";".

#veinte { color/*\**/: blue\9 }

What I also found out. With this hack it is not possible to add more than one rule inside the brackets. If you need more CSS rules, than you have to write each in a separate definition.

#veinte { color/*\**/: blue\9 }
#veinte { background-color/*\**/: yellow\9 }

Paul,

Thanks for this comprehensive list. I didn’t know about !ie, that one’s pretty cool.

I don't use CSS hacks anymore. Instead I use IE's conditional comments to apply classes to the body tag.

Hear hear. I used to have one extra CSS file for every different version of IE. However, to reduce the amount of additional HTTP requests for IE, you could just use one ie.css file, containing the CSS for IE6, IE7 and IE8, and use the CSS hacks you mentioned in there. Performance-wise, this seems to be the best solution.

Thank You For This Hacking code.But I want userfrndly hacking code of google chrome.If You Have then plz publish.

After several days I found your page and since I am a illiterate developer
or amateur webpage builder I ask:
Where shoul I put the
/***** Selector Hacks ******/
list that you offer here.

Thank you hoping to hear from you
jorge

Thkxs again. I will do use it and
let you know if I got it right.
jorge

Just wanted to say thanks for the efforts. This article saved me a lot of stress.

Keep up the good work.

I am now using these hacks (all in one CSS file) instead of three different files (using conditional commands) for the different IE versions:

/*IE ≤ 8:*/ foo { property: value\9; }
/*IE ≤ 7:*/ foo { *property: value; }
/*IE6:*/ foo { _property: value; }

Thanks for this awesome collection, Paul!

Hi, just found out by accident:

#.veinticinco, x:-moz-any-link, x:default { color: red }

This will only match in Firefox 3 on Windows, not Mac! Dunno if it'll work with ID's, this would work for the class .veinticinco

wow thanks, that was really helpful! :)

Here's a IE8-selector hack:

div.class { color: red; }
div.class, #ie8#fix { color: blue; }

This code will set color to blue in browsers, except for IE8. In IE8 it will be red.

Thanks a lot for this list! Very helpful to have in my toolbox!

Hi
Thanx, but the Safari and Chrome hack* are not valid…

*This hack :

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.photo_jenny {
	margin-top: -5px;
	}
}

just saw at the test page, the !ie-hack does not work at all in IE6 and 7 (tested with the tools IETester(IE6+7) and MultipleIEs(IE6)). are these tools broken or is it the hack?

Really amazing for chrome browser

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .divname {
	border: 0px solid red;
	position: relative;
	top: 5px;
  }
}

Hi,really useful article.
do you know what is the css hack for Android browser?
android browser shows the checkbox a little lower !!!
Thanks

Thanks man. Good Job!

You saved my life =]

Good Job, Thank You!

Thanks.

Also liked your mouse drawing.

Came for css hack and started playing with mouse :)

I came across your post while having some browser compatibility issues and I must say I absolutely love your background. Perfect break from the frustration of browsers lol… ;] will def be back to play when i get too frustrated…

This is perfect hack for IE8 only

.color  {
    color: #0FC/;
}

This is perfect hack for IE8 only

.color
{
color: #0FC/;
}

IE8 hack css

.color
{
background:blue/;
}

you have to write (backslash zero slash)

I came across your site when I finally had enough of hacking CSS and decided to learn how to do it right. Very interesting tips you have noted, but where can I find out the justification for them, i.e. to help me understand better, is there a big CSS resource that actually covers ‘best practices’ in minute detail? I just need to understand why I should things the way I should.
Thanks.

@Thomas, this is interesting. Is this because IE8 is stricter than other browsers and won't allow two IDs on the same element? Your filter is more elegant and valid than the one, but I'd like to really understand it before using.
Thanks :-)

Cheers!!! Your list was a godsend!!! Found exactly what I was looking for… Something that would exclude IE6&7.

Thanks for posting this!

Chris

I'm shocked! IE7 matches x:-moz-any-link, x:default selectors!

What's wrong with old fashioned Conditional Comments? They take care of most hacks and keep the ugly IE fixes in a separate file where they belong. Has anyone actually ever needed to apply hacks to a browser other than IE?

thanks.. i was looking for ie8 hack..

Bad news, depending on how you look at it, from hacksville – IE9 beta and PP fall prey to the /9 hack. Which begs the next hack – how to target IE8 and not IE9. For the curious, I put up a little tool awhile back for testing hacks on your browser – it's selector-shell.appspot.com

@Lindsey Simon
That does sound bad… :(

Hack with "\9" never worked in IE6 for me (standards mode, clean VM with full updated WinXP SP3). It is actual to have hack for FF3.5/3.6 (for border-images, shadows, gradients etc.) something like nth-child(n). Use "n" instead of "1" in "nth" selectors if you want to pass them not only first acceptable child.

Does any one have IE8 specific CSS hack?

None of the hack mentioned above for IE8 does not work. If it work then it also make changes in IE7 also.

This is urgent, if some one can response.

Could u pls provide css hack for Safari 3.2 and greater version.

@Kim
Hi Kim,

Please use this meta tag just below the title tag make sure that no js will apply above this meta tag.

Given meta tag is apply all css which are written for IE7 to IE8.

Hi Kim,

Please use this meta tag just below the title tag make sure that no js will apply above this meta tag.

Target Firefox 3 & 4 beta:

@-moz-document url-prefix() { #featured-promos .cont li {margin-bottom:0} }

That's brilliant! Thanks for gathering this in one page

I'm having a very strange problem. I have a table with navigation tabs. In between each link, I have a small table cell with a separator image. The separator image and currently selected nav tab were showing up 2 pixels too low. I used this hack to successfully fix the separator images:

.navDiv {background-position/*\**/: 0px -2px !ie}

The strange part is that it will not work for the selected nav tab, only the separator images/columns. Has anyone else run into this and/or have a secondary hack? Thanks in advance! ^.^

Thank you very much…now I can go to sleep! This is the only hack for ie 8 i tried which functions. Great work!

Excellent set of tools ! However, the most efficient technique to get more comments still remains combining the two principles of writing killer content and interacting with other bloggers in your niche (especially by commenting in their blogs).

Thanks for this roundup Paul, this is the most complete list of selector hacks I've ever seen. Really helped me out just now.

@Nagaraju, your code samples are incorrect. The hack you’re talking about is property: value\;, which is similar to property: value;. Other than IE8, this also targets Opera 10.60 and IE9.

Jeez…I didn't know there were so many!

@Paul Irish
hi ,
I am trying to use the following code for chrome in netbeans 6.9.

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
p { margin-top:20px }
}

However, it is not validating "and" and "(-webkit-min-device-pixel-ratio:0)" . If used without validation , there is no change in chrome but messes up otherwise decent IE and firfox page.
Any suggestion….

You could use pseudo-elements/classes to target specific browsers as well. If part of a selector-group is invalid, the entire rule will be dropped. When using this to your advantage, the following CSS will display red text in Firefox and blue text in Chrome/Safari:

p, .not-existing:-moz-any-link { color: red; }
p, .not-existing:-webkit-any-link { color: blue; }

Since it's a hack (just like other suggestions on this post) you should not rely on it. Given that WebKit implements over fifty pseudo-elements/classes alone and that they're not shy in Firefox either, it wouldn't be totally surprising if this behavior changes.

@Peter Beverloo

Thanks Peter,
your code for mozilla is working fine as intended, in my application.
However, the text in IE changes to blue instead of chrome when second line is used. The text in chrome remains unchanged…. not sure what the issue is …

:root:focus works for only IE9 until you lose focus, :(. Come on ninjas, I have faith.

I found a good way to avoid 95% or more of my old needs for css hacks, by making a modification to the html I generate for my pages:

Example html generated by php, or whatever:

 
 
 
... whatever head elements I need ...
 
 
<!--[if IE ]><![endif]-->
<!--[if lte IE 6]><![endif]-->
<!--[if IE 7]><![endif]-->
<!--[if gt IE 7 ]><![endif]-->
 
... regular page generation by whatever means ...
 
<!--[if IE]><![endif]-->

Then in my css, if I need to target ie's I can use:

/*
** regular rule:
*/
div#content h3.title { color:green;
                     }
/*
** target all ie:
*/
#IE_root div#content h3.title { color:green;
                              }
/*
** target ie6 and below:
*/
#IE6_root div#content h3.title { color:green;
                               }
/*
** target all ie7:
*/
#IE7_root div#content h3.title { color:green;
                               }
/*
** target all ie8:
*/
#IE8_root div#content h3.title { color:green;
                               }

Obviously, this is still a hack, but not technically a css hack, but it does validate, and has greatly removed much of my stress from handling multiple ie css problems.

@jefkin
hmm my first code block failed using html4strict, this is what it should look like:

<!DOCTYPE ... >
<head ... >

... whatever head elements I need ...

</head>
<body>





... regular page generation by whatever means ...


</body>
</html>

I need a hack for ( firefox 2 only ), How?

Hi,

I want background image flicking issues.

Hi,

Thanks guys……..

I am using safari version: 3.1.1, can any body tell me which code i will use for text color.

Regards,
Bharat

/* Safari 2 – 3.1 */
html[xmlns*=""]:root #trece { color: red }

Whats is this i am not understand……………..

Can anybody explain me…………….

/* Safari 2 – 3.1 */
html[xmlns*=""]:root #trece { color: red }

great, are you a spanish speaker?

Thanks very much! Just solved a veryannoying problem with Chrome for me :)
Regards, Hannah

is there a way to target only ie8 quirks mode?

This will target IE7

* + html #dos {
color: red;
}

For ie, the conditional tags are

But what about for firefox? I would like to have a conditional tag targeting firefox, because I need to write a .css file targeting firefox browsers only.

Awesome, Thanks alot :D
Bookmarked ;)

and then Microsoft created…ie9! that recognize ie8 only hack but with a different behaviour.
IN my case the problem is the vertical align in a input text. Ie8 is the only one that need a padding-top so with a
.text-box{
padding-top: 13px/ !important; /* IE 8 */
}
i thought would be ok but ie9 understand it so it push the text outside from my field…

hey! any one could help me to fix the alignment issue on Mac Firefox and Safari?

How is best IE, Firefox, Chrome, Safari and Opera ??

Hi there,

Here is the hack for IE9

#nav li.last-page-item a {
padding-right:5px;
}
/* IE9 Hack */
:root #nav li.last-page-item a{
padding-right:8px\9;
}

@randf Sadly, that’s using the \9 hack which has become unreliable in IE9. Also, I think this would target Opera as well.

any one help me this hack css is not supported mac os how can i fix this alignment issues

/ matches IE9, too. :-(

What about the "wrong comment" hack for IE 6 + 7?
espacially for min-width and min-height?

    min-height:300px;
    //height:300px; /* IE6, IE7 */

works also to override previous settings of other attributes, very handy for the double margin bug …

    margin:0 0.5em;
    //margin:0 0.5em 0 0.25em; /* IE6, IE7 */

(assuming there is a element with float:left; before)

with a little bit more effort (

//html, body, { width:100%; height:100%; } /* IE6 IE7 */
//#bodyContainer { overflow-y:scroll; } /* IE6 IE7 */

) it is possible to overcome position:fixed-problems with this technique ;-)
why does it work?
the double slash is not a valid CSS-comment, therefore the declaration will be ignored by all major browsers – except IE6 and IE7 !
i use it quite often in my CSS, not sure,where i got i from.

I'm pretty convinced that all these parser bugs are actually just Easter Eggs given to us by the browser makers to have some fun with every other new version they throw at us :-)
It all started out so simple with our old buddy NS4 ignoring a LINK element that has an id attribute set, and now we're juggling with special characters.
The Web's no much fun!

René

The following "Firefox" hacks are not safe:

#veinticuatro, x:-moz-any-link { color: red }
#veinticinco, x:-moz-any-link, x:default { color: red }

Because as my IE7 hack shows (selector, x:-IE7 {…}), IE7 should apply both the above rules.

very nice article, thanks for sharing and good luck

Old Internet Explorers – not working – NOTE: Modern/Advanced CSS selectors can 'trip' old IEs (8/7/6 etc). E.g:

h1, li:nth-child(2), p {font-family: myNewFont; } will also fail the H1 and P elements in IE8.

You might try the following instead:
H1, p {font-family: myNewFont; }
/*:root *> everything but IE6-8. (Not tested in IE5/4!)*/
:root *> li:nth-child(2) {font-family: myNewFont; }

error spotted:

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

effects IE9 as well

@Paul Irish

I found the solution here and its working perfectly.
Thanks for sharing us.

hey! any one could help me to fix the alignment issue on Firefox 5 version? any css hacks is there in firefox5?

Thanks a ton buddy !! Really helped me

This page rocks! Thanks for the save!

Hi,

I need a hack that only work for Safari 3+ browser.
@media screen and (-webkit-min-device-pixel-ratio:0) is working for Chrome and Safari.
My website is working fine in IE, FF, Chrome.
is there any hack only for Safari 3+ Browser???

hi Paul

I have made this web sites

Look the curvy corner box

It's look proper on i7,i8,Google chrome; Safari; Opera

but the problem is the style which i used for i9{/} disturb my i8 style sheet {/9 or /*\**/}

can u please tell me why this happen what will be the solution.

Actually you can target stylesheets directly to webkit browsers like Safari and Chrome.

I found a solution to that problem here: http://webgyani.com/2010/03/how-to-serve-different-stylesheets-only-to-safari-and-chrome/

In essence, all you need to do is to change the type attribute in the link to the stylesheet. The links to the Safari and Chrome specific stylesheets would then be something like this:

I can confirm that this method works, but I don´t know if this is the most efficient way to target those two browsers or not.

Great list to have just in case! Thank you very very musch :)

Here's my set: @media "not all" should not apply.

/* Targets OP 7-11 (but not Op9!) incl. WebKits */
@media not all and ( ... ) {...}
 
/*OP 9+ and WebKit/Chrome 10+ however ignore*/
@media not all and (0) {...}
@media not all and (1) {...}
/*but do accept */
@media not all and (true) {...}
@media not all and (false) {...}
@media not all and (foobar) { /* invalid property */ }
@media not all and (orientation) { /* valid prop but no comparison */ }
 
/*FF3.5-7 accept signed values */
/* this bug was fixed in FF8 */
@media screen and (min-resolution: +72dpi) { /* FF fixes */ }
 
 
/*IE8 only: throw a `:target` in the mix of selectors you DON'T want IE8 to read*/
h1 {color:red} /* IE8 */
.foo:target, h1 {color:#bad455} /* others */

Great and very useful list of hacks, thanks Paul

body:not(:-moz-handler-blocked) #someid .class .class

The above statement doesn't seem to work of FF7, it works only if I get rid of #someid and only leave classes.

Very thanks buddy, good work….

The "Everything but IE6" attribute hacks has to have a space before the /**/ to work (not shown in the comprehensive list but present in the original). Without the space IE6 is happy with it …

BTW, the "Everything but IE6" attribute hack works only for IE in standards compliant mode, the attribute is used in quirks mode …

The hack to hide from IE8 shown some comments above is really handy (it works for me with IE8 using Trident 8 rendering) – this one was really missing! My thanks to René.

The IE 7/8 attribute hack from the list ("color/*\**/: blue\9;") does not work for me, but "color /**/: blue\9;" does — but for IE 7/8/9.

I want hack only for safari and I use this code

@media screen and (-webkit-min-device-pixel-ratio:0){
.opensource {width:1000px;}
}

but it affect on both chrome and safari ….
I used safar 5

nice list of hacks, thx

In the attribute hacks section, you've got #diecinueve { color: blue\9; } as IE6-8. It also targets IE9.

@sard
I found that the x:-moz-any-link hack does not work with IE that are not real IE such as running in wine or multiple IEs in windows. The css parser is broken in those instances so that it does apply the webkit or -moz specific rules where real installation works correctly.