Monday 4 February 2013
Facebook StumbleUpon Twitter Google+ Pin It

Browser Specific CSS

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

EXAMPLE


The color of this box will change on different os/browsers:

  • Internet Explorer - yellow

    •
  • Internet Explorer 7 - orange

    •
  • Gecko Engine on Windows (Firefox, Mozilla, Camino) - red

    •
  • Gecko Engine on Linux (Firefox, Mozilla, Camino) - pink

    •
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino) - gray

    •
  • Opera - green

    •
  • Konqueror - blue

    •
  • Safari - black

    •
  • Chrome - cyan


If the box is white, and you are using one of browsers above, something is wrong :-/

Source of this example:



<style type="text/css">



.ie .example {



  background-color: yellow



}



.ie7 .example {



  background-color: orange



}



.gecko .example {



  background-color: gray



}



.win.gecko .example {



  background-color: red



}



.linux.gecko .example {



  background-color: pink



}



.opera .example {



  background-color: green



}



.konqueror .example {



  background-color: blue



}



.webkit .example {



  background-color: black



}



.example {



  width: 100px;



  height: 100px;



}



.no_js { display: block }



.has_js { display: none }



.js .no_js { display: none }



.js .has_js { display: block }



</style>

Screenshots on Browsercam

Chris Preece contributed with some images

DONATE TO SUPPORT


I need to update this script every time a browser is released with new UserAgent string.

This is a little effort, but certainly with your donation I will do it happier :)

DOWNLOAD


git clone git://github.com/rafaelp/css_browser_selector.git

USAGE

1. Copy and paste the line below, inside <head> and </head> tag


<script src="css_browser_selector.js" type="text/javascript"></script>

2. Set CSS attributes with the code of each browser/os you want to hack


Examples:

  • html.gecko div#header { margin: 1em; }

    •
  • .opera #header { margin: 1.2em; }

    •
  • .ie .mylink { font-weight: bold; }

    •
  • .mac.ie .mylink { font-weight: bold; }

    •
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]


Available OS Codes [os]:



  • win - Microsoft Windows (all versions)

    •
  • vista - Microsoft Windows Vista new

    •
  • linux - Linux (x11 and linux)

    •
  • mac - Mac OS

    •
  • freebsd - FreeBSD

    •
  • ipod - iPod Touch

    •
  • iphone - iPhone

    •
  • ipad - iPad new

    •
  • webtv - WebTV

    •
  • j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me

    •
  • blackberry - BlackBerry new

    •
  • android - Google Android new

    •
  • mobile - All mobile devices new


Available Browser Codes [browser]:



  • ie - Internet Explorer (All versions)

    •
  • ie8 - Internet Explorer 8.x

    •
  • ie7 - Internet Explorer 7.x

    •
  • ie6 - Internet Explorer 6.x

    •
  • ie5 - Internet Explorer 5.x

    •
  • gecko - Mozilla, Firefox (all versions), Camino

    •
  • ff2 - Firefox 2

    •
  • ff3 - Firefox 3

    •
  • ff3_5 - Firefox 3.5

    •
  • ff3_6 - Firefox 3.6 new

    •
  • opera - Opera (All versions)

    •
  • opera8 - Opera 8.x

    •
  • opera9 - Opera 9.x

    •
  • opera10 - Opera 10.x

    •
  • konqueror - Konqueror

    •
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome

    •
  • safari3 - Safari 3.x

    •
  • chrome - Google Chrome

    •
  • iron - SRWare Iron


Extra Codes:



  • js - Will be available when js is enable, so you can show/hide some stuffs


INSPIRATION


Original idea by 37signals.

Courtesy:-http://rafael.adm.br/css_browser_selector/

Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)