• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css hacks for different browsers
 

Css hacks for different browsers

on

  • 10,279 views

 

Statistics

Views

Total Views
10,279
Views on SlideShare
10,279
Embed Views
0

Actions

Likes
0
Downloads
23
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Free Download : http://gg.gg/114bb
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Css hacks for different browsers Css hacks for different browsers Presentation Transcript

    • 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 layoutCSS appearance in multiple browsers that do not haveHacks? compatible rendering.
    • The easiest way to target IE is with conditional comments. There is arobust 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, usuallymeans 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 aSafari 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; } } OR body:first-of-type(1) .safari{ color:#ff0000; }
    • The Opera CSS hack works because of negation in CSS. This targetsALL browsers that support -min-device-pixel-ratio that arent -webkit. Itwill 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; } }
    • 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 toConditional stylesheets based on the layout engine.comments 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 Browser features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized. Prefixes
    • http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/ http://bgsserver.com/css-hacks/Examples
    • Any questions?
    • Thank you