jump to navigation

Plug This: css_browser_selector plugin May 22, 2008

Posted by reidmix in Code, Plugins & Gems, Rails.
Tags: , , ,

I’m happy to announce my first plugin based on the css_browser_selector javascript which adds the name of the browser and platform as css class selectors that your client is using on the html element in your page. For example:

<html class="gecko mac js">

I’ve released my first version of the plugin (at 0.9.1) and you can download it from on LATimes RubyForge project or from GitHub. You can read how to use the plugin in its README, it offers a way to include the javascript inline into your views and layouts:

<%= javascript_tag css_browser_selector %>

But wait there’s more! What the plugin also does is offer a body (and html) tag helper that will render css selectors into your views from the backend. The real benefit to this is that these selectors will be available within the page without needing javascript enabled:

<% body do %>
  <%= yield %>
<% end %>

And this will add the selectors as you would expect to your body tag:

<body class="gecko mac">

The body helper is currently aware of page caching and will revert to the javascript version if the page is being cached through the caches_page method.

This is my first plugin and, yes, I still have some work to do (complete my tests, better caching awareness, sensitivity to pre-existing body and html tag helpers), but I wanted to share back to the community. Following Giles Bowkett‘s mantra to release software (often and early).

There’s plenty of more options as explained by the README. I welcome feedback, suggestions, improvements, bugs, and diffs! I’d also like to thank Rafeal Lima who implemented and maintains the javascript and his help and support with the plugin



1. Jeremy Olliver - June 19, 2008

Fantastic stuff, we’ve been using the javascript version 0.2.5 in our production app for the few tweaks to be done with layout cross browser platform (came here looking for ff3 specific, which I find are in 0.2.7)

The backend version sounds great, using before filters to check the browser http request I assume?

2. reidmix - June 19, 2008

Actually, it occurs on render in the body (or the html) helper which in turn looks at the request.env[“HTTP_USER_AGENT”], which holds the user agent string. The rest is just like the javascript version except it is written in ruby. Also, during render it examines whether the action is page cached it swaps to the js version if it needs to.

Thanks for the kudos!

3. reidmix - October 28, 2008

Moved the project over to GitHub.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: