CSS Browser Selector – Align the CSS styles for different browsers and OS

We have Modernizr to handle the HTML5 and CSS3 problem in old browsers.
Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

Today, i would like to introduce another tool which could help you aligning the CSS styles for different browsers as well as OS. This tool is called CSS Browser Selector. Although it is not updated for more than a year, it is still very useful if you need to deal with Internet Explorer 7 & 8.

Similar to Modernizr, what u need to do is just included the library in the <head> tag.

<html class="no-js">
  <head>
    <title>Eureka - Modernizr</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type='text/javascript' src='modernizr-2.5.3.js'></script>
    <script type='text/javascript' src='css_browser_selector.js'></script>
  </head>
  <body>
    <h3>Hello Eureka!</h3>
  </body>
</html>

 

This is what we get

<html class=" js flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths webkit chrome win js">
  <head>
    ...

 

This time, apart from those classed added by Modernizr, there are 4 more classes which are added by CSS Browser Selector.

  • webkit
  • chrome
  • win
  • js

 

The webkit class means the browser is using the WebKit engine. chrome is the browser identifier. win means the client machine is running a Windows operating system and finally js means the browser is Javascript enabled.

Done =)

Reference: CSS Browser Selector

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.