Write specific CSS code for each browser and operating system - CSS Browser Selector

Write CSS with the code of each Browser & Operating System you want to target.

The color of .rectangle will change on different browsers & os.

.rectangle

.rectangle { width: 360px; height: 40px }
.ie .rectangle { background-color: #FF0; color:black }
.ie9 .rectangle { background-color: #F90 }
.gecko .rectangle { background-color: #CCC }
.win.gecko .rectangle { background-color: #00F }
.win7.gecko .rectangle { background-color: #FCC }
.linux.gecko .rectangle { background-color: #C6C }
.opera .rectangle { background-color: #0F0 }
.konqueror .rectangle { background-color: #F33 }
.webkit .rectangle { background-color: #6FF; color:red }

Browser Codes List:

.ie - Internet Explorer (All versions)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
.ie5 - Internet Explorer 5.x
.gecko - Firefox (all versions), Camino, SeaMonkey
.ffxx - Firefox xx (change xx with number of specific version) new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (All versions)
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - Konqueror
.webkit - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome - Google Chrome (All versions)
.chromexx - Chrome xx (change xx with number of specific version) new
.safari - Safari (All versions) new
.iron - SRWare Iron

CSSBS is simple Joomla plugin which allows you to write specific stylesheet code for each Browser and OS.
Last update: 29 Aug 2012 - Ver. 1.2

Rotoli di carta termica al miglior prezzo

Free Download CSSBS

install the plugin from Joomla extension manager and enable it from plugin manager

This plugin uses the javascript written by Rafael Lima

updated by BS Systems - CSSBS License

Creative Commons.

Operating System Codes List:

.win - Microsoft Windows (all versions)
.win8 - Microsof Windows 8 new
.win7 - Microsof Windows 7
.vista - Microsoft Windows Vista
.linux - Linux (x11 and linux)
.mac - Mac OS
.freebsd - FreeBSD
.ipod - iPod Touch
.iphone - iPhone
.ipad - iPad
.webtv - WebTV
.j2me - J2ME Devices (ex: Opera mini)
.blackberry - BlackBerry
.android - Google Android
.mobile - All mobile devices

Screen Resolution Codes List:

Available in the next release...

Example of usage

.[OS code].[Browser code] .yourclass { padding-left:5px; font-size:14px }

body { background-color:#000 }
.ie8 body {background-color:#111 } (Specific for Internet Explorer 8.x)
.win.ie8 body { background-color:#222 } (Specific for Internet Explorer 8.x, on Microsoft Windows all versions)
.opera body { background-color:#333 } (Opera all versions)
.ff15 body { background-color:#444 } (Specific for Firefox 15.x)
.linux.gecko body { background-color:#555 } (Firefox, Camino, SeaMonkey all versions, on x11 and Linux )

.ie7 #right, .ie7 #left { width:320px }

HEADER

+1 #1 Chris 2013-08-20 03:22

This is a great update for CSS Browser Select. Hope to see you stick with it! I did have to modify the .js in order for it to properly ie10 to the html (rather than just showing up as "ie1" by changing:
/msie\s(\d)
to:
/msie\s(\d+)

Also, if anyone is going to run this alongside Modernizr, this script must be called AFTER Modernizr or else it can't remove the no-js properly and it gets appended to one of the CSSBS classes.

Quote

REFRESH

Browser Codes List:

Operating System Codes List:

Screen Resolution Codes List:

Example of usage

HEADER

Add comment

Login to your account