Html & CSS

CSS Hacks

Posted on by amolwable in Html & CSS

In this post we’ll see how to apply browser specific CSS using CSS hacks.

Why

As we know that Each browser has its own default styling of HTML elements also
some of the CSS properties are supports only limited number of browsers.

So to remove default styling we can use either reset CSS which will applied to all browsers or we can use CSS hacks for particular browser.

How to use

1. Internet Explorer

Using Conditional comments we can easily target IE.Conditional comments only works in Internet Explorer.
e.g. for IE 8 ,

<!--[if IE 8]><style type="text/css"> selector {property:value} </style><![endif]-->

The selector is HTML element/tag name or can be css class name,
property is the css attribute and value indicates attribute value.

Conditional comments are also applicable in page body,
e.g

<body>
<!--[if IE 8]>
 This is Internet Explorer 8<br />
<![endif]-->
</body>

Following are the syntax of Conditional comments for IE

<!--[if IE]>IE      <![endif]-->
<!--[if IE 5]>IE 5 <![endif]-->
<!--[if IE 6]>IE 6<![endif]-->
<!--[if IE 7]>IE 7<![endif]-->
<!--[if IE 8]>IE 8<![endif]-->
<!--[if gte IE 5]>IE 5 and up<![endif]-->
<!--[if lt IE 6]>IE  lower than 6<![endif]-->
<!--[if lte IE 6]>IE  lower or equal to6<![endif]-->
<!--[if gt IE 6]>IE greater than 6<![endif]-->

2. Firefox

/* Only Firefox 1 - 2 */ body:empty selector {property:value}
/* All Firefox */ @-moz-document url-prefix() { selector {property:value} }

3. Safari and Chrome

The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.

 @media screen and (-webkit-min-device-pixel-ratio:0) { selector {property:value} }

or

 body:nth-of-type(1) #safari { display: block; }

4. Opera

 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body selector {property:value} }

References:

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
http://www.nealgrosskopf.com/tech/thread.php?pid=20

Leave a comment