Scribd
Upload
87 views

CSS Hacks: +HTML Hack Working Only in IE7

The document discusses various CSS hacks to target specific browsers. It provides examples of hacks that target Internet Explorer 7 and below, Internet Explorer 9 only, Internet Explorer 8 and 9 only, Internet Explorer 9 and Opera, Firefox above version 1.5, Internet Explorer 7 and below, Internet Explorer below 8, and Chrome only. It also discusses using !important to override other color declarations and using conditional comments to target Internet Explorer versions.

Uploaded by

Amit Pal
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
87 views

CSS Hacks: +HTML Hack Working Only in IE7

The document discusses various CSS hacks to target specific browsers. It provides examples of hacks that target Internet Explorer 7 and below, Internet Explorer 9 only, Internet Explorer 8 and 9 only, Internet Explorer 9 and Opera, Firefox above version 1.5, Internet Explorer 7 and below, Internet Explorer below 8, and Chrome only. It also discusses using !important to override other color declarations and using conditional comments to target Internet Explorer versions.

Uploaded by

Amit Pal
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Hacks

Disadvantages:
• hacks often cause css files to not valiadate;
• css files are harder to compress. Hacks are often considered as invalid or repeated code and
removed.

*+html hack working only in IE7


This is variant of * html hack for IE6 but this one works only in IE7.
Text will be green in IE7 and blue in other browsers.
.test { color: blue; }
*+html .test { color: green; }

hack to target IE7 and below


This is modification of hack 5. Ie 7 supports child selectors but not when there is an empty
comment after it.
Text will be blue in IE7 and below and green in other browsers.
.test { color: blue; }
html >/**/body .test { color: green; }

hack to target IE9 only


Text will be green in Internet Explorer 9. Red in other browsers. It will not work for background or
font-*.
.test{color:red;}
:root .test{color:green \ ;}

TESTSUITE

hack to target IE8 and IE9 only


Text will be green in Internet Explorer 8 and 9. Red in other browsers. It will not work for
background or font-*.
.test{color:red;}
.test{color:green \ ;}

hack for IE9 only


On the web you can find hack for Internet Explorer 9 :root .test {color: green\0;}.
But be careful. This declaration will work not only in IE9 but also in Opera (tested in 10.63).
You can replace \0 with other chars (see hack 17) but then it will not work for background.
Text green in Internet Explorer 9 and Opera.
.test{color:red;}
:root .test {color: green\0;}
And here is version for IE9 only:
.test{color:red;}
:root .test {color: green \0;}

@-moz-document hack for firefox > 1.5


Text will be green in firefox>1.5 and red in other browsers.
.h21{color:red;}
@-moz-document url-prefix(){
.h21{color:green;}
}

body* (missing space) hack for IE <= 7


In Internet Explorer 7 and below text will be red. Text will be green in other browsers.
.h20{color:green;}
body*.h20{color:red;}

\{space} hack for IE < 8


Text red underlined in IE < 8 and green, bold, without underline in other browsers.
div {color:green; font-weight:bold;}
div\ {color:red; text-decoration:underline;}

-webkit-min-device- hack for Chrome only


Hack for Google Chrome. In Google Chrome text will be green and red in other browsers.
#item .element{color:green;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#item .element{color:red;}
}

!important for all browser


Red text color will take precedence over green.
.example{
color: red !important;
color: green;
}

Conditional Comments in Internet Explorer


I don't know if this can be considered as "hacks" but I here is code:
<!--[if IE]>
Here goes code for IE only
<![endif]-->

Possible syntax (you can change version number):


[if IE 6] - if IE6
[if IE 5.5] - if IE5.5
[if gte IE 5] - if greater than or equal to IE5
[if gt IE 5] - if greater than to IE5
[if lte IE 5] - if less than or equal to IE5
[if lt IE5] - if less than to IE5
[!IE 7] - if not IE7

Code for all browsers except for IE:


<!--[if !IE]>< -->
Here goes code for not IE
<!-- ><![endif]-->

You might also like