-
"IE 6 is a riskier proposition, but can show improved image resizing when the AlphaImageLoader CSS filter is applied, the same filter commonly used for properly displaying PNGs with alpha transparency." Oh, that's interesting.
-
Mirror's Edge 2D flash game – which look, by all accounts, to be an official spin-off. Can't wait to see the full version; it's a very impressive little game.
-
"You want to know what I think? I'll tell you what I think. Here's what I think: Java Java Java is is is too too too damn damn damn verbose verbose verbose. That's what I think. And I'm sticking to it. So there."
-
"The Nietzsche Family Circus pairs a randomized Family Circus cartoon with a randomized Friedrich Nietzsche quote." This one is particularly good.
-
Wonderful, wonderful, stop-motion trailer for a Megaman 9 built out of the real world. Hypnotic, and lovely.
-
"Director Ridley Scott will helm the bizarre big screen adaptation of popular boardgame Monopoly… According to the Hollywood Reporter, Ridley will give the Monopoly movie a futuristic edge akin to his 1982 epic Blade Runner… The unlikely subject matter is just one in a line of Hasbro games to get big screen makeovers as part of an exclusive pairing with Universal Studios… Transformers filmmaker Michael Bay is producing a Ouija Board feature, while a film version of beloved classic Battleship is also in development." I know what "development" means, but still, this is the craziest games-to-film news I've seen for quite some time. Hollywood is strange.
Handling IE specific stylesheets with a Rails plugin
10 December 2006
Time to announce my first published Rails plugin: ie-specific. And, more importantly, time to explain it.
I work as a front-end developer for a large scientific publishing firm. We’re very much committed to standards compliance and accessibility, as such, make every effort to ensure our sites work in as many browsers as possible. And that includes Internet Explorer 5.
Now, prior to IE7, we did this (by and large) by producing standards-compliant stylesheets, and then adding browser hacks where they were the only solution, in order to achieve consistent look/feel in many browsers. Fast forward to IE7, and we’ve now got a problem: many browser hacks (notably * html
) no longer work in IE7 and yet it still has its own raft of styling quirks.
So we’ve decided to change the way we implement browser-hacking. On the project I’m currently working on, we now have a main.css
which contains all the standards-compliant, “correct” CSS. We then place the IE-specific styles inside IE conditional comments. Each browser version gets a css file of its own where necessary, named for the name of the relevant IE conditional filter – eg, lte-ie-6.css
, ie-6.css
, lte-ie-5.500
, etcetera.
When I started work on the front-end integration for this Rails project, it was clear that this was obviously something that could be automated in Ruby – and, given that we were probably going to use it again, it made sense to package it as a plugin so that the next time I came to need it for a project, a quick script/install
would be enough.
Enter ie-specific, currently hosted at Google Code given that a) it’s open-source and b) it’s an easy way to get anonymous public svn.
It’s really simple. First, install the plugin:
script/plugin install http://ie-specific-rails-plugin.googlecode.com/svn/ie-specific
Now, place any IE-specific stylesheets into #{RAILS_ROOT}/public/stylesheets/ie_specific
, named with the appropriate conditional filter (eg: lte-ie-6.css
). Similarly, you can place IE-specific javascript into #{RAILS_ROOT}/public/javascripts/ie_specific
. We use IE-specific Javascript to simulate min/max-width capabilities in Internet Explorer.
Finally, in the <head> of your layout, include the following ERb:
<%= ie_specific_styles_and_scripts %>
Each file in the ie_specific
directories will be automatically included inside appropriate conditional comments – CSS files will be imported via an @import
directive, and JS files will be appropriately escaped as CDATA
(important for us, because we write XHTML 1.0 strict). There’s no unnecessary duplication, either – lte-ie-6.css
and lte-ie-6.js
will automatically be placed inside the same conditional comment.
That’s it, really – it’s very simple, but it’s also a convenient way to keep markup and styles clean and let other developers know exactly what’s a hack and what’s not. For more info, check out the README. And let me know what you think!