CSS HacksFor different browsers

CSS Hacks?

A CSS filter is a coding technique used to hide or

show CSS markup depending on the browser, version

number, or capabilities. Browsers have different

interpretations of CSS behavior and different levels of

support for the W3C standards. CSS filters are

sometimes used to achieve consistent layout

appearance in multiple browsers that do not have

compatible rendering.

The easiest way to target IE is with conditional comments. There is a

robust syntax that Microsoft has created to allow authors to do this. Here

are two alternatives to parser CSS hacks only for IE:

<!--[if IE 7]><style type="text/css"></style><![endif]--> <!--[if IE 6]><style type="text/css"></style><![endif]-->

The first hack targets only Firefox 1 and 2 by using the body:empty hack. The

second hack, which is quite clever target all versions of Firefox by using the

proprietary extension -moz. -moz combined with the -document url-prefix()

which by the way is used by Firefox Addon creators targets Firefox and Firefox

alone. By using proprietary extensions to CSS, as hacks, usually means the

most surefire way to target individual browsers without having to worry about

another browser possibly parsing the CSS.

/* Firefox 1 - 2 */body:empty #firefox12{color:blue;} /* Firefox */@-moz-document url-prefix(){#firefox { color:blue; }}

The Chrome CSS hack works similar to the Safari hack. By using the -webkit

prefix we can target Chrome and Safari both as the both browsers have similar

features.

/* Chrome and safari */

body:nth-of-type(1) .chrome{color:#ff0000;}OR/* Chrome and safari */@media screen and (-webkit-min-device-pixel-ratio:0){#safari { color:blue; }}

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.

/* Safari */@media screen and (-webkit-min-device-pixel-ratio:0){#safari { color:blue; }} ORbody:first-of-type(1) .safari{color:#ff0000;}

The Opera CSS hack works because of negation in CSS. This targets ALL

browsers that support -min-device-pixel-ratio that aren't -webkit. It will

only be a matter of time before Firefox supports this and this hack will

then most likely apply to Firefox as well.

/* Opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){head~body #opera { color:blue; }}

Conditional

comments

Browser

Prefixes

CSS Hacks: different kinds

Conditional comments are conditional statements interpreted by

Microsoft Internet Explorer in HTML source code. Conditional

comments can be used as a CSS hack by including links to

stylesheets based on the layout engine.

CSS browser prefixes are a way for browser makers to add

support for new CSS features in a sort of testing and

experimentation period. Browser prefixes are used to add new

features that may not be part of a formal specification and to

implement features in a specification that hasn’t been finalized.

Examples

http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/

http://bgsserver.com/css-hacks/

Any questions?

Thank you