Tuesday, October 05, 2010

Blog post is a work in progress while I actually do the research. Posting it here now anyway because I’m at the stage that I want to get it up on Github and so it allows me to link to some form of Readme here that will give you a clue to what’s going on…

A small jQuery plugin–called Media Queries–caught my attention around 2 months ago that I decided would be really useful for creating adaptive layouts for various desktop (and mobile) resolutions. I liked the plugin a lot but I didn’t always want to stick jQuery in every site I created that I’d want to support some sort of adaptive layout.

7 late nights later, I rolled up my sleeves and started hacking away. The script was a mishmash of DOM functions and jQuery DOM functions so I spent some time learning the script and rewriting it. At this stage, I’d like to thank Paul Irish for reminding me that there was nothing wrong in seeing how others did it, in his video on 10 Things I Learned from the jQuery Source, as I had a look at some other sources to pull together some ideas that would make the conversion a little smoother. It really shocked me that I didn’t actually have to do any debugging when I finally ran it in a page the first time. Of course I ran it in Safari 5 and it didn’t actually need to run most of the code. I digress

IE6

Debugging had to start—for me—in IE6. I had this big vision that my name would be blasted into the stars and that I would become the new big name on Twitter, Digg and all my favourite bloggers out there. And then that bubble burst. Parrrrrrrrppppppphhhhhhhsplplpplplpllplplplpip.

To elaborate, allow me to show you a brief snippet of output:

BODY{ PADDING-LEFT: 0px; PADDING-TOP: 0px; PADDING-RIGHT: 0px; PADDING-BOTTOM: 0px }
@media Unknown{P{ DISPLAY: none }}

Parrrrrrrrppppppphhhhhhhsplplpplplpllplplplpip

It’s pretty clear that IE6 has absolutely no clue what to do with your sexy CSS. Please note that this issue only really presents itself when you use inline @media declarations. If you keep all your CSS in separate files, as I do currently, then you’re probably fine; it’s a world of pain otherwise as IE6 has issues with @media.

Respite

At least I can get it to function in older versions of Firefox and Safari… Right? No. Gecko 1.9.1 represents the birth of inline @media support in Firefox. However, there are issues with older versions of Firefox. I couldn’t actually get a copy of Firefox 1.0 running on the virtual machine I had so I decided to jump ahead to 1.5 (I hope you don’t mind.)

Either way it wouldn’t have mattered. Firefox 1.5 (Gecko 1.8.1ish) and below don’t really have much love for complex media attributes on the link element. So, 2 days in to my little research project, and I already don’t really want to continue rewriting this little script. I’ve been coding while I research so I’ve already got some functions in place to do some sexy work on inline @media queries. It’s just a shame that the various browsers remove it all from the DOM or mingle it into uselessness.

More sexy blogness to come once I’ve done some more on that day job thing…