Distantly Yours: Web Design and Photos in Bloomington, IN, by Dan Hiester


Three reasons IE isn't an excuse not to dabble with HTML5 and CSS3

IE8 doesn’t support HTML5 or CSS3. IE7 supports even less of the ancient HTML4 and CSS2 standards. Yet, these are the most popular browsers in the world.

It’s a frustrating reality that makes many front-end web developers believe there is no reason to even bother with newer development techniques until IE8 usage declines. Thankfully, that’s just a myth, because with a few tricks, you can still dabble with new front-end development techniques without IE holding you back.

Use HTML5 tags and style them with html5shiv

IE won’t apply CSS styles to an element in HTML unless IE recognizes that element. That used to pose a problem to HTML5 early adopters. Now, all you need is html5shiv, and you’ll be able to style those new HTML5 elements to your heart’s content. It works by using Javascript to add HTML5 elements to IE’s DOM on page load. With the elements added to the DOM, IE now interprets them, and allows you to style them.

CSS3 Media Queries let you tailor your layouts to users’ screens

We have to face the facts: the good old days, when web designers could depend on a trend of screen resolutions slowly, but steadily climbing upward, are gone. With the explosion of smartphones and tablet devices, our users’ screen resolutions are more diverse than ever before. The good news is, Media Queries, part of the CSS3 spec, allow us to specify a subset of CSS rules for specific screen sizes. This means that, with some extra work, as the always excellent Jon Hicks did with his site, you can have a website that looks great regardless of whether the user has a giant, 20”+ monitor, or a 3.7” smartphone.

There are two ways to implement this new technique in IE: You can use a jQuery plugin, or, if your site doesn’t use jQuery, there’s a standalone JS project as well.

Enable new CSS selectors, if you really need them

CSS offers a handful of very helpful selectors that make life easy for us, but the most helpful selectors aren’t supported by IE. You could add support for these by using IE7.js, a project that has continually updated itself to add new features to IE as each new version fails to keep up to pace with its competition.

I probably wouldn’t use this file, however, because many experts point out that using these newer selectors require a lot of processor overhead, and can affect your page’s rendering speed. Only use this file if you really, really need it. Ideally, you shouldn’t have anything in your stylesheet that requires you to use it.

Front-end web development has changed

Knowing these tools are available to implement advanced layouts on old browsers opens exciting new possibilities to designers. I, for one, know it’s time for a redesign of this site, built with some HTML5/CSS3 sugar. Are there any similar tools you use and like, that I haven’t mentioned?

Comment

Rules:
HTML is not allowed, but Textile is. Lost? Check out some Textile Help.
Gravatar:
Your email address can be used to place your personal Gravatar next to your comment.