Browser Specific CSS: Set document CSS class based on browser name

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2025-07-09 (-1 hours ago) RSS 2.0 feedNot enough user ratingsTotal: 167 All time: 308 This week: 5Up
Version License JavaScript version Categories
browser-specific-css 1.0MIT/X Consortium ...1.0HTML, Browser
Description 

Author

Suresh Kumar

This object can set document CSS class based on browser name.

It checks the identification of the browser to detect its family.

The object sets the page document root element CSS class name to the name of the browser family, so CSS definitions based on that class name match for the whole page document elements.

Innovation Award
JavaScript Programming Innovation award nominee
March 2015
Number 2		 Sometimes it is necessary to implement workarounds to make certain features work better in certain browsers that have different behaviors than others.

Some workarounds can be implemented by defining CSS classes that apply only for those browsers.

This object can help implementing that approach, as it creates different CSS class names according to the browser type and operating system.

This way applications can define specific styles that apply only for the current browser.

Manuel Lemos
Picture of Suresh Kumar
Name: Suresh Kumar <contact>
Classes: 4 packages by
Country: India India
Age: ???
All time rank: 665 in India India
Week rank: 6 Up1 in India India Up
Innovation award
Innovation award
Nominee: 4x

Winner: 1x

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Browser Specific CSS</title>
</head>
<style>
#browserbox{ width:70%;height:250px; background:#444; color:#FFF; text-align:center; padding:40px;}
.win.firefox #browserbox{ background:#E07629; }
.win.chrome #browserbox{ background:#4BB549; }
.win.safari #browserbox{ background:#409CCB; }
.win.opera #browserbox{ background:#CC0F16; }
.win.ie6 #browserbox{ background:#CCCCCC; }
.win.ie7 #browserbox{ background:#B0102A; }
.win.ie8 #browserbox{ background:#F8D518; }
.win.ie9 #browserbox{ background:#B63249; }
.win.ie10 #browserbox{ background:#00A4EF; }
.mac.chrome #browserbox{ background:#4BB549; }
.mac.safari #browserbox{ background:#E1006A; }
.mac.firefox #browserbox{ background:#4E69A3; }
.ios #browserbox{ background:#682B67;}
</style>
<body>

<p>Download browser-specific-css.js and include before closing &lt;/body&gt;. follow css styling guide <a href="http://www.idiotinside.com/browser-specific-css/">http://www.idiotinside.com/browser-specific-css/</a> </p>
<div id="browserbox">
</div>
<code>
&lt;script src="browser-specific-css.js"&gt;&lt;/script&gt; <br>
&lt;style&gt;
#browserbox{ width:70%;height:250px; background:#444; color:#FFF; text-align:center; padding:40px;}
.win.firefox #browserbox{ background:#E07629; }
.win.chrome #browserbox{ background:#4BB549; }
.win.safari #browserbox{ background:#409CCB; }
.win.opera #browserbox{ background:#CC0F16; }
.win.ie6 #browserbox{ background:#CCCCCC; }
.win.ie7 #browserbox{ background:#B0102A; }
.win.ie8 #browserbox{ background:#F8D518; }
.win.ie9 #browserbox{ background:#B63249; }
.win.ie10 #browserbox{ background:#00A4EF; }
.mac.safari #browserbox{ background:#E1006A; }
.mac.firefox #browserbox{ background:#4E69A3; }
.ios #browserbox{ background:#682B67;}
&lt;/style&gt; 
</code>
<script src="browser-specific-css.js"></script>
</body>
</html>

Details

browser-specific-css

Browser Specific Css is a javascript plugin that helps you to write css for specific Browsers, Devices and Operating systems. <br />

CSS Styling Guide

This script helps to write css for the following

<h3>Browsers:</h3>

Internet Explorer 6 <br /> Internet Explorer 7 <br /> Internet Explorer 8 <br /> Internet Explorer 9 <br /> Internet Explorer 10 <br /> Internet Explorer 11 <br /> Mozilla Firefox <br /> Safari <br /> Google Chrome <br /> Opera <br /> Konqueror <br /> Maxthon <br /> Rockmelt <br /> Flock <br />

<h3>Mobile Browsers:</h3>

Internet Explorer Mobile <br /> Opera Mini <br /> Opera Mobile <br /> Firefox Mobile <br /> Bolt <br />

<h3>Operating systems:</h3>

Windows (All windows os) <br /> Windows XP<br /> Windows Vista <br /> Windows 7 <br /> Windows 8 <br /> Mac <br /> iOS(iphone,ipad and ipod) <br /> Linux <br />

<h3>Devices:</h3>

iPhone <br /> iPad <br /> iPod <br /> Android <br /> Symbian <br /> Blackberry <br /> Windows phone <br /> <h3>More information: </h3> <a href="http://www.idiotinside.com/browser-specific-css/">read documentation</a>


  Files folder image Files (4)  
File Role Description
Plain text file browser-specific-css.js Class Class source
Accessible without login Plain text file example.html Example Example
Accessible without login Plain text file LICENSE Lic. Auxiliary data
Accessible without login Plain text file README.md Data Auxiliary data

Downloadbrowser-specific-css-2025-07-09.zip
Downloadbrowser-specific-css-2025-07-09.tar.gz
 Version Control Unique User Downloads Download Rankings  
 100%
Total:167
This week:0
All time:308
This week:5Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.


  Related pages  
Plugin documentation