Chinmay Chiranjeeb » css http://www.chiranjeeb.com a UI Developer. Thu, 19 Jan 2012 21:56:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS Browser Selector http://www.chiranjeeb.com/css-browser-selector/ http://www.chiranjeeb.com/css-browser-selector/#comments Mon, 22 Dec 2008 12:02:25 +0000 admin http://www.chiranjeeb.com/?p=59 Continue reading →]]> Clever technique to help you on CSS hacks.

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

EXAMPLE

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

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>

Github

http://github.com/rafaelp/css_browser_selector

DOWNLOAD

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

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)
  • 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
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • chrome – Google Chrome

Credits

CSS Browser Selector

]]> http://www.chiranjeeb.com/css-browser-selector/feed/ 0