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
Filed under: CSS, Javascript Tagged: Chrome, CSS, CSS Browser Selector, CSS3, HTML5, Internet Explorer, Javascript, Modernizr, WebKit, Windows
