What are CSS-hacks?
While developing a web site or web application we need to check the webpage in different browsers to know if it is rendering as expected as per the design or not, when the rendered page differs from browser to browser we need to fix that part to make it looks the same in all browsers, at least major used browsers like IE6, IE8, FF2.0, FF3.0, Safari, Opera and Google Chrome for this we will use some code that code is nothing but a “hack” as we are coding in CSS its called a “CSS hack” in other words a “CSS work around”.
When do we use a CSS-hack?
As per W3C standards using CSS-hack is strictly not recommended. Nevertheless, at times there will be a need to use it at below situations:
- During last minutes changes when there is no time to fix.
- Upon specific client requests(very rare).
- While working on unfinished web jobs where there are code replicas, i.e. when CSS specificity doesn’t work.
Tageting IE
Internet Explorer in short IE is still the most used browser world wide. So its very important to tame IE, though there are number of IE specific hacks from IE5.5 through IE8 its highly recomended to use conditional comments instead of hacks.
Conditional comments as a CSS hack
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]--> <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]--> </head> <body> <p>Test</p> </body> </html>
| IE6 | IE7 | IE8 | FF3 | Safari | Opera | Chrome | |
|---|---|---|---|---|---|---|---|
| _color: blue | 1 | 0 | 0 | 0 | 0 | 0 | 0 |
| *:first-child+html #box { color: blue } | 0 | 1 | 0 | 0 | 0 | 0 | 0 |
| *+html #box { color: blue } | 0 | 1 | 0 | 0 | 0 | 0 | 0 |
| color /*\**/: blue\9 | 0 | 0 | 1 | 0 | 0 | 0 | 0 |
| :root *> #box { color: blue } | 0 | 0 | 0 | 1 | |||
| *color: blue; | 1 | 1 | 0 | 0 | 0 | 0 | 0 |
| #color: blue; | 1 | 1 | 0 | 0 | 0 | 0 | 0 |
| color: blue\9 | 1 | 1 | 1 | 0 | 0 | 0 | 0 |
| html>body #box { color: blue } | 0 | 1 | 1 | 1 | 1 | 1 | |
| color: blue; | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
Selector hacks
* html matches in this browser*:first-child+html matches in this browserhtml>body matches in this browserhtml>/**/body matches in this browserhtml:first-child matches in this browserhtml[xmlns*=""] body:last-child matches in this browserbody:nth-of-type(1) matches in this browserdiv:nth-of-type(1n) matches in this browserbody:first-of-type matches in this browser@media screen and (-webkit-min-device-pixel-ratio:0) matches in this browserhtml[xmlns*=""]:root matches in this browser*|html[xmlns*=""] matches in this browser:root *> matches in this browser*+html matches in this browser* > matches in this browserhtml:only-child matches in this browser@media all and (min-width: 0px) matches in this browserhtml:lang(en)>body matches in this browserbody:nth-of-type(1) matches in this browser x:-moz-any-link matches in this browser x:-moz-any-link, x:default matches in this browserAttribute hacks
div { _background: blue} matches in this browserdiv { *background: blue} matches in this browserdiv { .background: blue} matches in this browserdiv { background/**/: blue} matches in this browserdiv { background: blue\9;} matches in this browserdiv { background/*\**/: blue\9;} matches in this browserdiv { background: blue !ie;} matches in this browser