We’re stuck with Internet Explorer for the next 3 years bare minimum, most likely 6. Let’s start thinking about how we can move forward.
We now have a method and an example. View my latest Zen Garden entry, mnemonic for the example; carry on reading for my method, which I dub Mozilla/Opera/Safari Enhancement, or MOSe for short.
MOSe relies on IE6’s inability to pick up child and adjacent selectors, or > and + as they’re known by. As well, some basic CSS3 selectors are becoming more and more usable in everything but IE (see CodeBitch’s CSS3 support chart) so we can use these to our advantage as well.
The key to the method is somewhat similar to how NN4 page design developed as CSS became more prevalent — after creating a basic, functioning page in IE, you add extra functionality with these selectors. While IE can’t render them, at least it doesn’t make a half-hearted attempt to and come short. And that’s way better than what we had to put up with to make things work in NN4.
I’ll leave application of MOSe as an exercise to the reader. Pick apart mnemonic and see a few ways it can be done. You can start at the spec, but for the sake of your Googling, here is a non–exhaustive list of CSS2 selectors you’ll want to pay special attention to, thanks to their support in MOS and non–support in IE:
- Child Selector, eg.
- Direct or Adjacent Sibling, eg.
#footer + .bottomLink
- Attribute Matching, eg.
- Attribute Value, eg.
acronym[title="Document Object Model"]
- Attribute Substrings, eg.
And a few CSS3:
- Substring Prefix, eg.
- Substring Suffix, eg.
- Substring Match, eg.
There are bound to be more that are MOSe–friendly.
:focus, and possibly
:not look promising, although the latter is buggy in IE5.
The point is to provide IE a way out by using CSS it has no hope of understanding. This is the only way we can keep moving forward in the next few years. Let’s embrace it.
(okay, I realize I say right on the Garden that it's not about “the latest bleeding–edge tricks,” but you can see how this is an exception. As well, I realize that some things might be funky on Mac browsers — I hear it renders alright, but I can’t guarantee there’s no weirdness going on.)
Anyone who says CSS is easy hasn’t had enough experience with it. It is easy if things go right; it is a bottle of Tylenol if things do not.
Example 1 — precisely the sort of thing I’m talking about. Take this simple block of code:
<div id="main"> <span> <p>multiple paragraphs here</p> </span> </div>
Try to give the span a border, if all the paragraphs are floated. It can’t be done, even if the span is a block–level element.
This should be possible, block level or not. Unless the text is removed from the document stream via absolute positioning, it should be contained within the span, which means it gets a border. However, and this is a problem amongst every browser, the floated text is treated as independent of the document stream. Hence: no border.
This is inconsistent behaviour. Floated items are not supposed to be removed from the document flow — you’ll notice how nicely the non–italicized paragraphs in example 2 wrap around the italicized text. This is expected. So why no border in example 1?
CSS is powerful, but with great power comes grea… strike that. Let’s just say it’s not easy and leave it at that.
update: Simon pointed out that my example is actually invalid, since block–level elements shouldn’t be contained within inline elements. The span is invalid when surrounding the paragraphs. But! Even when corrected, the problem holds — see example 3 for a div in place of the span.
As previously mentioned, expiring today is the patent on the LZW compression scheme which forms the basis of the GIF file format. Well, at least if you reside in the United States. Canadians, Europeans, and others are stuck with it for another year.
Kuro5hin has a great eulogy on the highs (and lows... mostly lows) of Unisys’ ownership of the format. From the creation of GIF87 in 1987 on, Unisys was content to sit back and let people use it. In 1994, I suppose their lawyers caught on. Any developer using the format was shocked to learn that, come Christmas of that year, we’d have to pony up a huge licensing fee just to include GIF importing and saving capabilities in our software.
I use the inclusive ‘we’ because I was writing a DOS–based image editor at the time, if you can believe it. I may even still have the Unisys licensing papers kicking around somewhere. I took one look at the $2000 initial license, considered I was writing shareware and lost all interest in GIF support.
So what does a public domain GIF (assuming that expired patents are released into the public domain — on this point I’m not clear) mean to the web developer? All praise of free data formats aside, not much. In this case, it means we don’t have to pay Unisys thousands of dollars per site we create.
Didn’t hear about that? At one point they were looking to bill any site owner using GIFs upwards of $5000US for a license. It was a big deal at the time. Hindsight says that would have been a great day for PNG had they gone ahead with the plan. It didn’t happen though.
So here we are today. GIF is 16 years old, while PNG is 8. They’re now both free file formats, which means the only reason to use one over the other is technological — Have another look at some of the technical issues involved in using PNG if you need a refresher.
Happy GIF Freedom Day. Ironically celebrated with a PNG banner, just cause I’m that kinda guy.
Eleven days from now, the patent on LZW compression forming the basis of the GIF file format is set to expire, according to C|Net. They question whether this means the death of the PNG file format.
PNG and GIF are not two competing file formats in a situation where you have to choose one or the other. They’re not black and white; they’re regular and extra strength.
PNG was created in reaction to the draconian licensing scheme Unisys imposed: creators of any software supporting GIF had to cough up a $5,000 surcharge whether their software was free or otherwise. This from a previously–open file format that was theoretically free to use. PNG was built in part to provide a free alternative, but also to better meet the needs of designers.
Now the licensing bait has been pulled out of PNG’s arsenal, so the only reason to adapt is technical. As we are all well aware, Microsoft’s Internet Explorer is the only modern browser that doesn’t support the alpha transparency that PNG offers. This, however, is not a reason to shun PNG until the situation improves. In a bout of ‘the grass is always greener’, I believe we’ve forgotten what it can and can’t do today. A brief summary is in order.
PNG, pronounced ‘ping’, is available in 3 flavours: true colour, grayscale, and palette–based. The former is better known as PNG–24, the latter as PNG–8 (24 and 8 bits per pixel, respectively) and these are the two that will concern us for now. 1–bit transparency means every pixel is either completely transparent, or completely opaque. 8–bit transparency means every pixel has an opacity value from 0 to 255, where 0 is completely transparent and 255 is completely opaque. Also see the accompanying PNG test suite.
PNG–8 is the GIF replacement. Allowing for custom–palette images ranging from 2– to 256–colour, it also offers a 1–bit transparency. This is exactly what GIF does, minus any hint of animation. File sizes are smaller, and support is consistent amongst all modern browsers. If you are using GIFs, there is absolutely no reason not to consider using PNG–8.
However, after considering it, there are still reasons why you may not want to actually use it. If you are exporting your images from Photoshop, you will consistently notice that your file sizes for equal PNGs are larger than the comparable GIF. This is a limitation of Photoshop, and highlights weak PNG support rather than any problem with the format itself. Work–arounds are possible by exporting from another more capable program like Fireworks, but that adds an extra step to the process.
See the first couple of comments to this article for plug–ins and third–party applications that get around Photoshop’s flaw.
Now we come to the heart of the matter. PNG–24 is the one we all want to use. Internet Explorer doesn’t support alpha transparency properly as we’re aware, which renders the main reason we wish to use it null and void. Such a great loss, we lament.
Except that we forget to consider also that PNG–24 is a lossless compression format, and in most cases we wouldn’t be able to accomplish what we’re dreaming anyway. Why? File sizes, my friend. If you compress a 400x200 image into a 25k JPG, you’re reasonably happy. That same image as a PNG with an alpha channel might hit 150k if you’re lucky, while 200k is more likely. A lossy PNG–24 will never exist either, because an alpha channel with compression artifacts would lead to randomly transparent pixels – something that is definitely not desirable.
PNG–24 is certainly great for some effects, and allows for amazing visual eye candy. But you will never build whole sites with it, not while bandwidth is a concern. It will remain a niche format even when widely supported, to be used only in situations when the 1–bit transparency of PNG–8 or GIF won’t quite suit the bill.
Other PNG Features
PNG offers plenty of extra features including gamma correction, lossless compression, 48–bit colour, alpha transparency, and even multi–image files (animations, anyone?) via the MNG extension to the format.
48–bit colour is absolutely useless on–screen. Your monitor displays 256 levels in each red, green, and blue channel per pixel. Each channel is represented as a single byte, hence 8 bits (1 byte) times 3 channels equals 24 bit colour. The next jump up to 48–bit colour involves doubling the bits per channel. A 16 bit red channel does not mean 512 levels of red though, it actually means 65,536. No monitor on earth displays that many levels per channel, and any advantages of having the extra colour are only realized when working in different colour models (which does us no good on the web).
I question the need for per–image gamma adjustment (as opposed to per-page) but I can see some practical applications of it, when considered outside of the context of the web page. Not every application of a graphic file is web–oriented. You may never use some of these features, but other graphics professionals may be hard–pressed to ignore them.
So we’re in a funny spot. We can use PNG on the web, but not fully. With a bit of elbow grease we can start using PNG–8 as the GIF replacement it was always meant to become. But that bit of extra work means it’s almost a sure bet that most professionals will avoid the challenge for now. A valuable addendum to the alpha transparency pressure on Microsoft might be found in calling on Adobe to work better optimization techniques into their software for PNG–8. Both issues are equal hindrances for PNG adoption.
PNG may gain dominance sooner or later, but despite it all, the 16 year old GIF file format is going strong. And while the patent news is good for the Free Web, it doesn’t mean PNG is going anywhere.
Comments are open on the Second Edition of the PNG specification until June 23rd, 2003.
Reasons to quit your job, and an explanation of absence.
“Well since it doesn’t handle proper markup, can’t we just have our CMS wrap that paragraph with an <h6> to hack the text’s formatting?”
So if anyone in the Vancouver, BC area is looking for a designer who’s up on the latest standards, we should talk. I’m not quite ready to move yet, but getting there.
Off to San Francisco for the weekend. Get out and enjoy the weather. Back Monday.
And speaking of design, do not miss the two excellent new Zen Garden submissions: “Wrapped in Burlap” by John Simons and “What Lies Beneath” by Micheal Pick. You may remember Mike’s previous submission, “Dead or Alive”. These two designs are phenomenally creative examples of how radically different the same designer can approach the same problem. There’s some incredible talent in this one, and if you’re in the New York area, do peruse his portfolio. §
Why the Luxury Web idea wasn’t destined to work, and more questions than answers.
There’s nothing like a good talking to by Zeldman to make you reconsider your ideas in a real hurry.
Right on the money as always, he draws parallels to the Apple ‘Switch’ campaign. If they’re not having luck, given their marketing budget and that they cater to an audience who responds enthusiastically, then a loosely gathered group of volunteers trying to lure people away from their current browsers won’t make much of a dent.
It’s tempting to call this particular comparison apples and oranges. Switching or upgrading an Operating System requires a hell of a lot more commitment and money to upgrade apps, not to mention the difficulty in rollbacks if things go awry. In reality, the scope is different but the underlying mindset is the same. “This is what I use. It’s what I’m comfortable with. Leave me alone.”
I believe he’s dead on about browsers: the end user really can’t care less about which browser they run. Which is why the Luxury Web concept focused on selling features, rather than selling browsers. But since, as Zeldman points out, this is precisely what others have tried and failed, then even that rudimentary thinking on the subject must be flawed.
My original thought was a reaction. It was a ‘well we can’t just sit here and take it, we have to do something!’ The percentage of the population that fails to vote each election have no right to complain about their elected leaders if they don’t speak up when they have the chance; it was my attempt at voting.
So what do we do now? No one but Microsoft is going to be content with letting the situation stand. Rapid evolution and occasional revolution have been a given in the computer industry for decades. When they slow down, we react. It happened last time; it will happen again. The question is: how?
And just for the sake of having it out there one more time, I don’t, in fact, think we’re in that bad of a spot right now. “…be thankful we’re even this far. Being stuck with IE6 for the next 7 years is way better than being stuck with NN4.” It could always be worse.
All complaining about Microsoft’s current focus aside, much praise is due Tantek Çelik and his team for this. That is a lot of green in the MSN/Mac OS X column. Way to go! § Douglas Bowman followed up his recent Zen Garden submission with an incredibly in–depth look at his design process. This is a must–read article. § Seamus Leahy adds an offering to the recent CSS–2 pseudo–class tricks that have been going around, and ups the ante to CSS–3. While we’ve been focusing on :hover, he decided to explore :target. Take a look in your favourite Mozilla deviant.