金曜日, 5月 08, 2009

Targeting specific Browsers with CSS

Targeting specific Browsers with CSS, originated from Browser-specific CSS hacks

/***** Selector Hacks ******/

/* IE 6 and below */
* html #uno
{ color: red }

/* IE 7 and below */
*:first-child+html #dos
{ color: red }

/* IE 7 and modern browsers */

html>body #tres
{ color: red }

/* Modern browsers (not IE 7) */
html>
/**/body #cuatro { color: red }

/* Opera 9.27 and below */
html:first-child #cinco
{ color: red }

/* Safari */
html[xmlns*=""] body:last-child #seis
{ color: red }

/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete
{ color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho
{ color: red }

/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#diez { background
: #FFDECE; border: 2px solid #ff0000 }
}

/***** Attribute Hacks ******/

/* ie6 and below */
#once
{ _color:blue }

/* ie7 and below */
#doce
{ *color: blue } /* or #color:blue */

/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */

0 件のコメント: