CSSquirrel A look at web development and web design by Kyle Weems

Today’s comic is a bonus, bringing the count for this week to a nearly unprecedented two. I know, such generosity on my part staggers the mind. The comic also seems like fodder for some form of novelty t-shirt. I’ll get right on that.

Like most people that make websites, I heard of the funeral held for the cantankerous, ancient and malformed IE6; a funeral doubtlessly inspired by Google’s announced discontinuation of support for IE6 in many of their products this month. Like even Microsoft itself, I’m glad that there’s another nail in the coffin of this undead browser that still clings to the computers of many, many web users.

I realize that, funeral or no funeral, IE6 isn’t gone. Not yet. There’s entirely too many people still using it, making it unsafe to simply pile in the dirt over its head. But for me and my amazing coworkers at Mindfly Web Design Studio, it’s as good as dead. Seizing the opportunity provided by Google’s announcement, I pitched an idea taken from one Andy Clarke, Brit rockstar: Let’s stop explicitly supporting IE6, and feed it instead a universal, generic stylesheet for all sites. Those users who visit a site with IE6 will still get what they’re looking for, just in a more modest package.

Being hip designers on the cutting edge of awesome, they naturally all agreed with me. The hours once slavishly chained to the moribund beast in the woods now will be devoted to more fun tasks, like convincing clients that random pictures of their children will not increase online sales of tractors.

Today’s comic’s title is a reference to the Battlestar Galactica equivalent to “Amen” for those few of you not as deep in the sci-fi geek rabbit hole as yours truly. (This came directly from a great idea by Shaun Inman regarding “Six” that I failed to implement due to time.) It acts as a solemn affirmation of what’s being spoken.

So let’s get solemn: IE6 is dead to me. Let’s move on without it into the modern era web. So say we all.

Nothing keeps you more humble in your industry than learning an important job-related detail, then discovering shortly thereafter that everyone else has known for years. For the past few months I’ve been experimenting with “OOP CSS”, taking advantage of mutliclassed elements to reduce stylesheet size and increase CSS reusability (after attending this presentation by Nicole Sullivan at Web Directions North.) Within the past couple weeks, I found some major roadblocks to using this technique with IE6 when being incautious about how the rule descriptors are ordered: IE6 majorly bungles multiple-class descriptor support.

To get a better view of what I’m speaking about (assuming you’re not already familiar with it), go check out the post I wrote at Mindfly about this very issue: Web Developer Weems and the Case of the Multiclass Bungler (AKA IE6).

When my analytics started showing IE6 hits, I realized two things.

1. Even people following links from a place like meyerweb.com (thanks for visiting!) may still be using the dread bile beast of Redmond (Internet Explorer 6 for those not following along).

2. They probably want to be able to see/use the site like everyone else.

I needed to bite the bullet and get that particular “browser” (if you can call it that) to render the site functionally, since this page is crawling with PNGs. Unfortunately, after a couple of hours of tinkering around with Dean Edwards’ IE7, things hadn’t improved much. I got the transparency I needed, but a lot of unusual bugs crept into the header (clipped elements, missing buttons, unusable navigation, etc).

So since I’m expected to work on client sites at work and I was out of time, I made a quick fix (using conditional comments and a ie6-specific stylesheet as I describe here) and for the moment the IE6 version of the site has GIFs. Ugly-edged GIFs. I could clean them up, but I think I’m going to take a page out of Andy Clarke’s book and just do a completely different look for visitors with IE6, like he does with Stuff and Nonsense.

I suppose a design that was nothing more than a giant mother nagging you to upgrade your browser wouldn’t quite be appropriate.

As discussed here, I’m really getting into CSS3 Attribute Selectors. As mentioned earlier in my Yo-Yo post, I’ve been looking into solutions to make these guys more accessible, and I’ve come full circle to realize that I don’t need to do anything extra to incorporate them in my website and have users see them in any major browser. This is because:

1. The modern versions of Internet Explorer, Firefox, Safari, and Opera all support them. (Here’s a test page at Mindfly’s website to prove the point).

2. The Dean Edwards IE7 script DOES extend full CSS3 attribute selector support to IE6 (I’m guessing my earlier tests had an error, because now I’m showing full compliance with this second test page that includes that script (once again, at Mindfly).

The CSS3 features I’m really looking for support for now, then, are the CSS3 pseudoclasses and multiple background images. *drool* Multiple background images alone would help cut down on my markup immensely, making features such as rounded boxes so much less of a pain in the arse.

I’ve been getting more obsessed with attribute selectors these days. They do such delightful things, and really help me cut down on the markup I need for a site. The problem, of course, is browser compatibility. So I started working on some javascript to give IE7 the functionality for CSS3 attribute selectors.

Then I discovered to my total shock that IE7 actually does support CSS3 attribute selectors.

Someone should tell Sitepoint this, as their reference incorrectly states that it does not.

However, IE6 doesn’t support ANY attribute selectors, so I went to the blackboard again to write a script for that.

Then I discovered that Dean Edwards’ IE7 script does give IE6 attribute support. So I stopped writing my own script and went to check that out.

A while later, I discovered that the Dean Edwards script, however, does not give full support to IE6 for css3 attribute selectors. (Most notably, *= doesn’t seem to work).

So now I’m working on that script again.

I think I’m beginning to understand what a yo-yo feels like.