rav:blog

The rav:blog was created to share tips, useful resources and other miscellaneous findings with those involved in creating, maintaining or developing web sites and applications. If you’re looking for other examples of my work, please visit my portfolio.

Blog Entries

18Dec2009

List of common css hacks by browser

CSS hacks take advantage of browser bugs for hiding css styles from specific web browsers. Listed below are the hacks for major browsers like IE 6, IE 7, Firefox 2, Firefox 3, Google Chrome, Safari and Opera.

Inline Hack for IE

* (star) can be used as the inline hack for both IE 6 and IE 7.

For Example:

Syntax: .selector{*property:value;} .logo{*margin-left:10px;}

IE 6 browser inline Hack

_ (underscore) can be using only for IE 6.

For Example:

Syntax: .selector{_property:value;}.logo{_margin-left:10px;}

Firefox inline style

content:"\"/*" can be used for Firefox only where IE cannot recognize it.

Internal Style

Use * html for IE 6 and *+html hack for IE 7

For Example:

Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for IE 6
* + html .logo{margin-left:20px;} for IE 7

IE 7 and Firefox browser Hack

Use html>body hack for IE 7 and Firefox.

For Example:

Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in IE 7 and Firefox

Modern browser Hack or Firefox Hack

Use html>/**/body {} hack which will support only in both Firefox 2 and Firefox 3.

For Example:

Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in Firefox.

Browser hack for Opera versions 9 and below

Use html:first-child {} for Opera browser. Also you use:

Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:

@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for Opera

Firefox 3 browser hack

Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for Firefox 3 only.

For Example:

Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Firefox 2 browser hack

Use html>/**/body .selector, x:-moz-any-link {property:value;} for Firefox 2 only.

For Example:

Syntax: html>/**/body .pro_yl, x:-moz-any-link {background:red;}

Google Chrome browser hack

Use body:nth-of-type(1) .elementOrClassName{property:value;} only for Google Chrome.

For Example:

body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack

Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:

body:first-of-type .logo{margin-top:10px;} only for Safari.

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)