CSS3 with IE6 now
I began working on a project lately where I was given a design but the colour scheme had to be decided upon because it needed to go through a branding process. Part of this required me to use some “creative” methods of getting around a few problems. For instance, there will be gallery pages with spotlight boxes, which will have curved corners. Now, I could have gone and made a selection of images with these curved corners and set them as the background, but once the colours were decided, I’d have to re-do all these (and there’s quite a few of them). We had also decided that a gradient should be used on a horizontal navigation, but again, no definite colours. Finally, we needed to apply a global template to a series of images, so I decided a simple way to do this would be to apply a transparent png over these images (again, negating the necessity to re-edit all the images once the colours came in. There were a hell of a lot more of these images than those for the gallery pages).
Of course, at the root of this lay the question, how could all this be done. So I decided, once and for all, to take the leap off the CSS springboard into CSS3. The problem? The site will be viewed within a corporation, in which every employee has a desktop with access to IE6 only… a lot of the time across Citrix. So how do I do this? Never mind Joe Public, the majority of traffic to this site will be internal and it’s success or failure will be measured by how easily staff can access the site, not alone the public.
I started looking into these problems in parts. There are filter shivs and polyfills to accommodate the png issue. I decided the best library among these was unitpngfix.js. The next part was the CSS3 elements. I realised early that I wasn’t going to be able to use all the available CSS3 attributes in IE6,7 & 8, but if I found something that offered me rounded corners and gradient backgrounds, that would do. Happily CSS3PIE fitted the bill excellently and so I decided to use that. This would be my first time experimenting with behavio(u)r (apologies our North American friends, but I can’t bring myself to use your spelling, unless in code!) files, so I looked forward to the challenge. Finally, there were a number of alternative requirements which meant I was going to have to get very inventive with my jQuery. jQuery 1.5 was released last week, which allowed me to update the library on the site anyway. More on this requirement though in another post.
I mocked up the design in HTML. Unfortunately, HTML5 was not an option, as the intention was really just to reskin the original (content heavy) website, so I had fairly precise guidelines as to how much I could “maneuver” the code. Templates were sent for accessibility testing and came back with gold stars attached. Next came the implementation.
None of this sounds particularly taxing. But wait, things just got interesting! The templates had to be applied to jsp files to accommodate the current structure and backend implementation. This included the way headers and footers were included, bespoke forms on certain pages, etc. Initially there were no problems, but once the first draft of templating had been completed, there were some very obvious problems. The png transparency was hit and miss; it would work on some pages, not on others. Refreshing the page might ensure the fix kicked in, but just as easily might not. Then, all of a sudden, on very few pages, the IE6 browser would throw an “Operation aborted” error, causing the browser to crash. This in itself, is not too uncommon for IE6 across Citrix, but it was happening with an alarming amount of predictability and regularity.
Tracking this down the issues behind this was at first fruitless (the MSDN recommendation was to upgrade the browser!) and laborious. I tried alternatives for the png fix, but still found the errors were hit and miss and again, the shiv itself was unpredictable in its application.
Eventually (thankfully) after some searching of the CSS3PIE forums, I discovered that the reason for the “Operation aborted” error was due to the fact that DOM objects (for example a form) were being loaded onto the page by the JSP, slower than the CSS3PIE behavior was being applied to the same object. It took quite a lot of trial and error, but by creating a “lateload.css” file with just the behaviors included in it and loading it in the footer of the page, I delayed the application of the CSS3 styles until all the DOM objects it was required for, were loaded. Fix one accomplished.
Having gotten the CSS3 to work, I was now presented with a javascript error on every page. Yet more time and investigation revealed that CSS3PIE and Unitpngfix do NOT play nicely together. A quick #lazyweb query on Twitter and I was pointed in the direction of another behavior file, iepngfix. Having decided that the CSS3PIE was to be late loaded, I decided not to take the risk, and added the behavior for the iepngfix into lateload.css after the CSS3 transforms were applied. Fix two accomplished.
The use of these two behavior files has allowed me to use the main elements of CSS3 in a design, which, in the end, will actually not bear that much influence (the use is subtle and indirect), but being able to use it and make it cross browser has given me a real sense of achievement. Coupled with a number of accessibility modifications I made (which I’m equally proud of and will discuss in a later post), it’s been a real payoff and a nice piece of work to experiment on.
I’m not going to go into the application of the behavior files (that’s well documented on the parent sites) but if you’ve any fear of using them, I can tell you they’re worth a look. Just make sure that your elements that require their use are all bundled together, e.g.
#id1,#id2,.class1,#id img {behavior: url(/path/to/file.htc);}
If you apply them individually, each instance makes a http request to the server and slows down your code considerably.