I realized the other day that every professional project I have ever worked on has involved a struggle for Internet Explorer 6 compliance. Whether it be customer demand, or a personal need for a perfect solution, my layouts seem to always become a mess of conditional comments. I remember when IE6 was released. I was actually excited for this new futuristic browser. If only the darn thing worked the way it was supposed to. Then the web grew up, I moved to Firefox, and IE6 lingered on as that final bullet point in all my functional specs.
IE7 & IE8 offered some improvements. Finally I could make an argument for PNG24 images. Still had to battle floats, margins, and the like for a please-everyone solution. To this day I still have a virtual machine devoted to running IE6; for testing purposes only I assure you. I’m finally saying No Mas! At least for all of my personal work. Everything I do from this point on will take full advantage of the latest standards.
The first step in this initiative is my new mwilber.com wordpress template. It’s based on the default theme, TwentyTen, and takes full advantage of CSS3. The only images in play are the four you see in the header above. With some creative use of CSS3 embedded fonts, I hope to one day bring that image count down to one. Which brings me to a prediction:
I suspect that much like CSS gave birth to the “tableless layout”, soon CSS3 will give birth to the “imageless layout”; where image files are restricted to content areas, reducing a theme down to a single CSS file.
I’ve been doing a lot of experimentation with HTML5 & CSS3 lately. I plan on a CSS3 upgrade to my CSS Speech Balloons, featured in the Zeta Comics, which offer fully search-able dialog in a comic strip. I’ve also recently fallen in love with the Google Web Fonts project and the prospect of beautiful fonts that are also editable text. There are tons of really cool tools out there that are making HMTL5 layouts a brain dead simple process. You’ll see many examples of them in coming posts.