# \[ANN\] Browserized Styles Plugin **URL:** \ **Category:** Rails\ **Created:** [December 9, 2007, 8:43pm UTC](https://www.ruby-forum.com/t/ann-browserized-styles-plugin/122582 "2007-12-09T20:43:56Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [December 9, 2007, 8:43pm UTC](https://www.ruby-forum.com/t/ann-browserized-styles-plugin/122582/1 "2007-12-09T20:43:56Z")
Browserized Styles provides a dead simple way to create browser- specific CSS code for use in a Rails application. All you need to do is create a .css file targeted to a browser by appending an underscore and identifier to the end. === Installation === script/plugin install [http://svn.intridea.com/svn/public/browserized\_styles](http://svn.intridea.com/svn/public/browserized_styles) === Example === Let’s say I have some complex CSS code that looks bad in some browsers, but works in others. Let’s also say that i’ve put it into a stylesheet in stylesheets/complex.css. My stylesheet link tag looks something like this: \<%= stylesheet\_link\_tag ‘complex’ %\> Now all I have to do to target a browser is create a new CSS file with the browser’s identifier appended to it with an underscore (e.g. “complex\_ie6.css”). That’s it! The same exact stylesheet link tag will automatically check the current user agent and load a browser-specific CSS file if it exists. Ta-da! One-step browser styles! === Identifiers === Browsers are identified as following. You would create the CSS file as “yourcssfile\_browsername.css” IE6: ie6 IE7: ie7 Opera: opera Firefox: gecko Safari: safari Konqueror: konqueror === Limitations === At this time the plugin is only designed to work with .css files in your stylesheets directory. It will not work at present with URL-based stylesheets or stylesheets not found in your stylesheets directory (or some subdirectory thereof). === Resources === Blog Post: [http://www.intridea.com/2007/12/9/announcing-browserized-styles](http://www.intridea.com/2007/12/9/announcing-browserized-styles) Trac: [http://trac.intridea.com/trac/public/](http://trac.intridea.com/trac/public/) SVN: script/plugin install [http://svn.intridea.com/svn/public/browserized\_styles](http://svn.intridea.com/svn/public/browserized_styles) Copyright (c) 2007 Michael B. and Intridea, Inc., released under the MIT license ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [December 9, 2007, 9:03pm UTC](https://www.ruby-forum.com/t/ann-browserized-styles-plugin/122582/2 "2007-12-09T21:03:51Z")
This is an interesting idea. I am currently working on a project where I have specific CSS files for various browsers. Unfortunately, I’m experiencing variations not only between browsers, but the same browser on different platforms. For example, FireFox on Windows is not exactly the same as FireFox on Mac. And Safari on Windows is just a little different than Safari on Mac. The differences aren’t much, but just enough to require separate CSS files. So I use a scheme in which I have one primary CSS file for the site, then separate CSS files for each browser/platform that I care about. Peace, Phillip ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [December 9, 2007, 9:11pm UTC](https://www.ruby-forum.com/t/ann-browserized-styles-plugin/122582/3 "2007-12-09T21:11:30Z")
This is actually a problem I’ve run into as well. Down the road I would like to include the ability to separate out even by platform in addition to browser, e.g. complex\_gecko\_win.css and complex\_gecko\_mac.css. I’ll let you know if I ever follow this through to the point of including it in the plugin. Thanks for the feedback. Michael B. removed\_email\_address@domain.invalid ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [December 10, 2007, 5:26pm UTC](https://www.ruby-forum.com/t/ann-browserized-styles-plugin/122582/4 "2007-12-10T17:26:09Z")
Michael, On 10-Dec-07, at 11:20 AM, removed\_email\_address@domain.invalid wrote: > After looking into it a little more, it wasn’t actually all that > difficult! A new version of the plugin is immediately available on SVN > that allows you to target specific OS’es in addition to browsers. The > new specificity behaves as such: > > === Identifiers === How do you see this plugin working with rails asset caching? Jodi ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [December 10, 2007, 5:21pm UTC](https://www.ruby-forum.com/t/ann-browserized-styles-plugin/122582/5 "2007-12-10T17:21:28Z")
After looking into it a little more, it wasn’t actually all that difficult! A new version of the plugin is immediately available on SVN that allows you to target specific OS’es in addition to browsers. The new specificity behaves as such: === Identifiers === Browsers and OS’s are identified as following. You would create the CSS file as “yourcssfile\_browsername.css” or “yourcssfile\_osname” or “yourcssfile\_browsername\_osname” ==== Browsers ==== IE6: ie6 IE7: ie7 Opera: opera Firefox: gecko Safari: safari Konqueror: konqueror ==== Operating Systems ==== Mac OS (X or prior): mac Windows (any): win Linux: linux I hope this helps you out, happy coding! Michael B. removed\_email\_address@domain.invalid ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [December 10, 2007, 5:33pm UTC](https://www.ruby-forum.com/t/ann-browserized-styles-plugin/122582/6 "2007-12-10T17:33:11Z")
The plugin acts as a method chained onto stylesheet\_link\_tag and merely passes along some additional sources (the browser and os- specific stylesheets) if they exist. I haven’t tried it out, but to my knowledge it should work without additional configuration with Rails’s caching. It’s not my area of expertise, but feel free to try it out! Michael