css Targeting Browsers Separately

CSS Targeting Browsers Separately

Targeting

2008, http://www.ejeliot.com/blog/63

.myclass{
	margin-top:10px; /* all browsers including Mac IE */
	margin-top:10px\9; /* IE5.55 to IE8 */ /* http://www.borism.net/2009/03/19/anti-ie8-css-hack/ */
	*margin-top:10px; /* IE 7 and below */
	_margin-top:10px; /* IE 6 and below */
	_mar\gin-top:10px; /* IE 6 only */
}
@media screen and (-webkit-min-device-pixel-ratio:0){ /* modern Safari and Opera */
	margin-top:10px;
}

Safari

Targeting Safari (and Opera?), http://www.odindev.com/node/90

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

Firefox

Filtering, everyone sees except FF. Was used for MAC FF once

div/**/.myclass{
	margin-top:10px;
}

IE6, IE7, IE6, Firefox

Not sure of this here, tried briefly 2009-11-30, target only Firefox changed IE7 too... http://www.ireckon.com/blog/web-design/951-css-hacks--ie8,-ie7,-ie6-and-firefox/

#block {
	margin-top: 5px; /* target only IE8 + Firefox browsers */
}
#block-block-10, x:-moz-any-link { /* target only Firefox, overriding the style above */
	margin-top: 20px;
}
* html #block { /* target IE6 only */
	margin-top: 50px;
}
*+html #block-block-10 { /* target IE7 only */
	margin-top: 100px;
}

Adding something conditionally for IE

In head section.

<!--[if IE]>
	<style type="text/css">
		body {behavior: url(http://www.dailymarkets.com/wp-content/plugins/sqsidebar/csshover.htc);}
	</style>
<![endif]-->