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