If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

How to create browser specific CSS rules (styles)

This tutorial shows how to create browser specific CSS rules for Chrome, Firefox and IE.

How to create browser specific CSS rules (styles)

To create a browser specific CSS rule, you need to use a browser specific CSS hack. You can find a comprehensive list of such hacks on http://browserhacks.com.

A bowser specific CSS hack can be a selector, media query or certain syntax construction that is recognized only by a certain browser.

In order to add a specific rule for a certain browser, perform the following:

  1. Prepare the rule. Let’s consider a navigation background that we want to set different for each browser:

    	nav.tm_navbar {
    		background: #bd2c2c;
    	}
        
  2. Go to http://browserhacks.com/ and pick up a hack. Pay attention to the browser version:

    How_to_create_browser_specific_CSS_rules_(styles)-1

  3. Bellow you will find examples of hacks for Chrome, Firefox and IE that set a different background color of the navigation (green, red and blue respectively):

    • Google Chrome (version 28+):

      		@supports (-webkit-appearance:none) {
      			nav.tm_navbar {
      				background: green;
      			}
      		}		
      		
    • Mozilla Firefox (all versions):

      		_:-moz-tree-row(hover), nav.tm_navbar {
      			background: red;
      		}		
      		
    • Internet Explorer (version 10+):

      		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      			nav.tm_navbar {
      				background: blue;
      			}
      		}		
      		
  4. The resulting code should look like this:

    How_to_create_browser_specific_CSS_rules_(styles)-2

    And you will get the following result:

    How_to_create_browser_specific_CSS_rules_(styles)-3

Feel free to check the detailed video tutorial below:

How to create browser specific CSS rules (styles)

If you need a template with CSS functionality, browse our Bootstrap Admin Themes.