Advanced Search

Selector de CSS SEGUN NAVEGADOR

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. CSS Browser Selector
  2. Simple trick to help you on CSS hacks!
  3. Version 0.2.5 (October 5, 2006)
  4. EXAMPLE
  5.  
  6. The JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page.
  7.  
  8. The color of this box will change on different os/browsers:
  9.  
  10.     * Internet Explorer - yellow
  11.     * Gecko Engine on Windows (Firefox, Mozilla, Camino) - red
  12.     * Gecko Engine on Linux (Firefox, Mozilla, Camino) - pink
  13.     * Gecko Engine on Other OS (Firefox, Mozilla, Camino) - gray
  14.     * Opera - green
  15.     * Konqueror - blue
  16.     * Safari - black
  17.  
  18. If the box is white, something is wrong :-/
  19. Help us in this case!
  20. Source of this example:
  21.  
  22. <style type="text/css">
  23. .ie .example {
  24.   background-color: yellow
  25. }
  26. .gecko .example {
  27.   background-color: gray
  28. }
  29. .win.gecko .example {
  30.   background-color: red
  31. }
  32. .linux.gecko .example {
  33.   background-color: pink
  34. }
  35. .opera .example {
  36.   background-color: green
  37. }
  38. .konqueror .example {
  39.   background-color: blue
  40. }
  41. .webkit .example {
  42.   background-color: black
  43. }
  44. .example {
  45.   width: 100px;
  46.   height: 100px;
  47. }
  48. .no_js { display: block }
  49. .has_js { display: none }
  50. .js .no_js { display: none }
  51. .js .has_js { display: block }
  52. </style>
  53.  
  54. Screenshots on Browsercam
  55.  
  56. Chris Preece contributed with some images
  57. DOWNLOAD 
  58.  
  59. Current version: 0.2.5 (October 5, 2006)
  60.  
  61. css_browser_selector.js.txt (> 1KB)
  62. (http://rafael.adm.br/css_browser_selector/css_browser_selector.js.txt)
  63.  
  64. Rename this file from .js.txt to .js before using
  65. USAGE
  66. 1. Copy and paste the line above, inside <head> and </head> tag
  67.  
  68. <script src="css_browser_selector.js" type="text/javascript"></script>
  69. 2. Set CSS attributes with the code of each browser/os you want to hack
  70.  
  71. Examples:
  72.  
  73.     * html.gecko div#header { margin: 1em; }
  74.     * .opera #header { margin: 1.2em; }
  75.     * .ie .mylink { font-weight: bold; }
  76.     * .mac.ie .mylink { font-weight: bold; }
  77.     * .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
  78.  
  79. Available OS Codes [os]:
  80.  
  81.     * win - Microsoft Windows
  82.     * linux - Linux (x11 and linux)
  83.     * mac - Mac OS
  84.  
  85. Available Browser Codes [browser]:
  86.  
  87.     * ie - Internet Explorer (All versions)
  88.     * ie6 - Internet Explorer 6.x
  89.     * ie5 - Internet Explorer 5.x
  90.     * gecko - Mozilla, Firefox, Camino
  91.     * opera - Opera (All versions)
  92.     * opera8 - Opera 8.x
  93.     * opera9 - Opera 9.x
  94.     * konqueror - Konqueror
  95.     * webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira
  96.  
  97. Extra Codes:
  98.  
  99.     * js - Will be available when js is enable, so you can show/hide some stuffs
  100.  
  101. INSPIRATION
  102.  
  103. Original idea by 37 signals.
  104.  
  105. http://37signals.com/svn/archives2/browser_selectors_in_css.php
  106. TO DO
  107.  
  108.     * Rails plugin
  109.  
  110. CHANGELOG
  111.  
  112.     * 0.2.5 - Removed permanently ieMac code, bug on Opera 9 detection and now you must use ".[os].[browser]" instead of ".os .browser"
  113.     * 0.2.4 - Added support for opera versions: 'opera8', 'opera9', etc
  114.     * 0.2.3 - Added 'js' code to know when JS is disabled or not
  115.     * 0.2.2 - Added OS codes to be used with browser codes - M@ McCray
  116.     * 0.2.1 - Corrected small javascript bug in IE 5.01 - Daniel Westermann-Clark
  117.     * 0.2.0 - Good refactoring, small and fast script! - Steve Clay
  118.     * 0.1.8 - Added support for Internet Explorer on Mac OS (ieMac) - Jeff Bellsey
  119.     * 0.1.7 - Added 'webkit' as alias of 'safari' and well written syntax with less bytes - Jean Pierre and Micah Snyder
  120.     * 0.1.6 - Striped some spaces to make the file smaller and solved IE for Mac bug - Derek
  121.     * 0.1.5 - Added support for ie6 and appends the class names to be non-destructive - Jesse Scott
  122.     * 0.1.4 - Working on Safari, applewebkit was misspelled, without an p - Alex Wiltschko and Moises Kirsch
  123.     * 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
  124.     * 0.1.2 - Changed from 'safari' to 'applewebkit/' and from 'firefox' to 'gecko/' - glasser
  125.     * 0.1.1 - Initial release (2006-07-19)
  126.  
  127. LICENSE
  128.  
  129. http://creativecommons.org/licenses/by/2.5/
  130. AUTHOR
  131.  
  132. Rafael Lima (http://rafael.adm.br)
  133. CONTRIBUTORS
  134.  
  135.     * Vinicius Braga (http://viniciusbraga.com)
  136.     * Chris Preece (http://www.mmtdigital.co.uk)
  137.     * Dominykas
  138.     * M@ McCray
  139.     * Daniel Westermann-Clark
  140.     * Steve Clay (http://mrclay.org/)
  141.     * Jeff Bellsey
  142.     * Jean Pierre
  143.     * Micah Snyder
  144.     * Derek (http://amphibian.info)
  145.     * Jesse Scott
  146.     * Moises Kirsch (http://www.moiblog.com/)
  147.     * Alex Wiltschko
  148.     * Chris Warren and Tony Nelson (http://www.imagetrend.com)
  149.     * glasser
  150.  
  151. KEYWORDS
  152.  
  153. css javascript script cascading style sheet cross browser cross-browser browsers bug ie internet explorer konqueror safari opera firefox hack tip trick

URL: http://rafael.adm.br/css_browser_selector/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.