Tell me if this sounds familiar: “HTML5 and CSS3 do not have enough browser support to start using them today.” Or, how about this one: “We still have to support IE6, so using advanced CSS techniques would be a wasted effort.” Here is my favorite: “I will start embracing HTML5 and CSS3 when it becomes a W3C spec.”
Do you know why I am so familiar with these developer woes? Because I have expressed them all. That’s right. I was afraid. Afraid to embrace HTML5 because it did not have enough browser support. Afraid to confidently liberalize my CSS with advanced selectors and properties such as nth-child, border-radius, and RGBa for fear that I would have to mimic the exact look and feel in IE6. After all, it was WAAAAY too early to use header, section, article, and footer right? And what was up with that weird doctype, <!DOCTYPE html>, anyway?
My fears began to subside last year while working on the Office of the University Registar. It was my first client project using advanced selectors, box-shadow, and RGBa, which are all a part of CSS3. After working on the site, I started to feel pretty good about trusting these advanced CSS3 techniques.
Not long afterwards, I used HTML5 and lots more CSS3 during the re-design of this blog, which launched just a couple of months ago. And if that wasn’t enough to convince me that HTML5 and CSS3 were safe to adopt, attending An Event Apart in Washington, DC last week completely shattered any lingering doubts. Jeffrey Zeldman, Nicole Sullivan, Dan Cederholm, Luke Wroblewski, Kristina Halvorson, Jared Spool, Eric Meyer, Jeremy Keith, Aarron Walter, Andy Clarke, Ethan Marcotte, and Jeff Veen delivered one of the most convincing, well-crafted, beautifully-themed, and appropriately-paced arguments for embracing HTML5 and CSS3 today.
But it wasn’t just about really cool stuff that you can do with the aforementioned markup and presentational languages. In contrast, the messaging of the 3-day event highlighted a much needed paradigm shift in the way people perceive various browsers and devices and how they render content. We should embrace the richness of the technical innovations brought forth the last decade, not by attempting to render web pages the same in every browser, but to celebrate the varying differences of modern displays. Dan Cederholm sums up the general sentiment with two beautiful statements.
You may be wondering, “That is great and all, but really, what about IE? Seriously.” Well, let me tell you some good news: Gecko, Webkit, Opera, and (drumroll) IE9 Beta offer tons of HTML5 and CSS3 support. In fact, IE9 Beta supports most of the new HTML5 elements and even supports some CSS3 features without vendor prefixes. Weird, huh? After years of IE6, IE7, and IE8 frustrations, IE9 is now setting the example. But that is a subject for another post, so I digress.
I don’t know about you, but I think that last paragraph effectively shuts down any arguments against developing with these modern techniques for grade-A browsers. But what about IE6, IE7, and IE8? Well, all of the AEA presenters collectively made a strong case for designing with flexible strategies, allowing these various relics to vary slightly in their rendering. So what if IE doesn’t get the subtle rounded corners of a submit button suavely executed via border-radius. Are Firefox users going to complain if they miss out on 3D animations, but have all of the content delivered successfully? Perhaps, those Firefox users did’t realize that Webkit users get that same content, but with a little more pizzaz. Even if they did, that’s okay. Let’s face it, most users don’t even know they are missing anything to begin with (and we don’t want them to know, do we?).
In DC, Dan, Eric, and Ethan demonstrated that @media queries can stealthily deliver the flexibility of desktop, iPad, iPhone, and Android displays depending on screen size. And do you know what else? Eric deftly pointed out that we (designers and developers) are the only ones who resize our browsers anyway! By the way, if you are curious to see @media in action, check out the Retreats 4 Geeks site, which we launched last week.
In closing, I want to thank Jeffery, Eric, and all of the AEA presenters for clearly framing the great potential of flexible design patterns, progressive enhancement, and thoughtful interactions through the use of these modern techniques. So, stop worrying and embrace HTML5 and CSS3 today!
Comments
As an hotel owner I am unsure if this CSS3 is ready for production use. We have a lot of users with old browsers. I see all the advantages but with a 15% rate of IE6-users it’s hard to really love HTML5 and CSS3.