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
=== 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
Trac: http://trac.intridea.com/trac/public/
SVN: script/plugin install
http://svn.intridea.com/svn/public/browserized_styles
Copyright (c) 2007 Michael B. and Intridea, Inc., released under
the MIT license
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
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.
[email protected]
Michael,
On 10-Dec-07, at 11:20 AM, [email protected] 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
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.
[email protected]
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