How to apply specific CSS for Specif Browser?

To create a browser specific CSS rule, you need to use a browser specific CSS hack.There are some CSS hacks which you can use for your website, when you need. But for my advice, make your CSS and HTML which are compatible for all browser, this is option when no any other solution.

  • CSS for Chrome Browser :
    @media screen and (-webkit-min-device-pixel-ratio:0) {
       // here add all css which are only work for Chrome browser.
    }
    
  • CSS for Safari Browser :
    @media screen and (-webkit-min-device-pixel-ratio:0) {
       ::i-block-chrome,[YOUR CLASS/ID NAME]{
          //Add CSS Here which work Safari Only
       }
    }
    
  • CSS for IE8/9 Browser :
    @media screen\0  {
       //Add CSS Here which work IE8/9 Only
    }
    
  • CSS for IE9/10 Browser :
    @media screen and (min-width:0\0) {
      //Add CSS Here which work IE9/10 Only
    }
    
  • CSS for IE10/10+ Browser :
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
       //Add CSS Here,which work IE10/10+ Only
    }
    
Categories: Developer Notes
Strict Standards: Only variables should be passed by reference in /home/elisegxm/public_html/wp-content/themes/eliseinfotech/functions.php on line 62

Strict Standards: Only variables should be assigned by reference in /home/elisegxm/public_html/wp-content/themes/eliseinfotech/functions.php on line 62
| Comments