Advanced Search

Return to Snippet

Revision: 1545
at October 19, 2006 07:41 by danideu
Initial Code 
CSS Browser Selector
Simple trick to help you on CSS hacks!
Version 0.2.5 (October 5, 2006)
EXAMPLE

The JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page.

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

    * Internet Explorer - yellow
    * 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

If the box is white, something is wrong :-/
Help us in this case!
Source of this example:

<style type="text/css">
.ie .example {
  background-color: yellow
}
.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
DOWNLOAD 

Current version: 0.2.5 (October 5, 2006)

css_browser_selector.js.txt (> 1KB)
(http://rafael.adm.br/css_browser_selector/css_browser_selector.js.txt)

Rename this file from .js.txt to .js before using
USAGE
1. Copy and paste the line above, 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
    * linux - Linux (x11 and linux)
    * mac - Mac OS

Available Browser Codes [browser]:

    * ie - Internet Explorer (All versions)
    * ie6 - Internet Explorer 6.x
    * ie5 - Internet Explorer 5.x
    * gecko - Mozilla, Firefox, Camino
    * opera - Opera (All versions)
    * opera8 - Opera 8.x
    * opera9 - Opera 9.x
    * konqueror - Konqueror
    * webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira

Extra Codes:

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

INSPIRATION

Original idea by 37 signals.

http://37signals.com/svn/archives2/browser_selectors_in_css.php
TO DO

    * Rails plugin

CHANGELOG

    * 0.2.5 - Removed permanently ieMac code, bug on Opera 9 detection and now you must use ".[os].[browser]" instead of ".os .browser"
    * 0.2.4 - Added support for opera versions: 'opera8', 'opera9', etc
    * 0.2.3 - Added 'js' code to know when JS is disabled or not
    * 0.2.2 - Added OS codes to be used with browser codes - M@ McCray
    * 0.2.1 - Corrected small javascript bug in IE 5.01 - Daniel Westermann-Clark
    * 0.2.0 - Good refactoring, small and fast script! - Steve Clay
    * 0.1.8 - Added support for Internet Explorer on Mac OS (ieMac) - Jeff Bellsey
    * 0.1.7 - Added 'webkit' as alias of 'safari' and well written syntax with less bytes - Jean Pierre and Micah Snyder
    * 0.1.6 - Striped some spaces to make the file smaller and solved IE for Mac bug - Derek
    * 0.1.5 - Added support for ie6 and appends the class names to be non-destructive - Jesse Scott
    * 0.1.4 - Working on Safari, applewebkit was misspelled, without an p - Alex Wiltschko and Moises Kirsch
    * 0.1.3 - Changed the js a litle to get the html tag by TagName instead of having one id - Chris Warren and Tony Nelson
    * 0.1.2 - Changed from 'safari' to 'applewebkit/' and from 'firefox' to 'gecko/' - glasser
    * 0.1.1 - Initial release (2006-07-19)

LICENSE

http://creativecommons.org/licenses/by/2.5/
AUTHOR

Rafael Lima (http://rafael.adm.br)
CONTRIBUTORS

    * Vinicius Braga (http://viniciusbraga.com)
    * Chris Preece (http://www.mmtdigital.co.uk)
    * Dominykas
    * M@ McCray
    * Daniel Westermann-Clark
    * Steve Clay (http://mrclay.org/)
    * Jeff Bellsey
    * Jean Pierre
    * Micah Snyder
    * Derek (http://amphibian.info)
    * Jesse Scott
    * Moises Kirsch (http://www.moiblog.com/)
    * Alex Wiltschko
    * Chris Warren and Tony Nelson (http://www.imagetrend.com)
    * glasser

KEYWORDS

css javascript script cascading style sheet cross browser cross-browser browsers bug ie internet explorer konqueror safari opera firefox hack tip trick
Initial URL 
http://rafael.adm.br/css_browser_selector/
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Selector de CSS SEGUN NAVEGADOR

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript