HTML5 and CSS3 Works in IE

Standard

Well, kinda …

CSS can be a major headache for unseasoned front-end developers. The intricacies of layout design and how different browsers interpret them is the bane of a designers existence. The most common problem we have is how IE has handled this.

With a few tools though, sanity can be restored to UI development.

First, always use a CSS reset stylesheet. This reduces the number of things to keep track of when doing styling by a ton. I’m personally fond of Eric Meyer’s CSS reset code.

Second, get the Modernizr javascript code on your site. There’s a number of things this will do for you, including adding css classes to the html tag indicating the browser’s capabilities, and modifying HTML5 markup to work in IE6. Trying to work in IE6 without javascript? Let it go. Somethings aren’t worth fighting for.

Third, I really recommend the HTML5 Boilerplate. Actually, just reading through that is a learning experience. Even if you d on’t use the templates, you’ll know much more about how to make a very accessible and cross-browser / cross-platform usable site.

So, with all of these tools in place, you can do a few things in your CSS that should work safely for any browser. I’m partial to Facebook-style transparent borders, so let’s start there. (Note: There is an excellent demonstration of this at CSS-Tricks that explains this very well)

HTML (5ish)
<section class="clear-borders">
<article>
<p>Lipsum, oh yeah</p>
</article>
</section>

CSS
.clear-borders {
/* the borders (older browsers will only read the first definition */
border: 10px solid #999;
border: 10px solid rgba(170,170,170,0.5);

/* again, older browsers won't understand these definitions, so they'll be skipped */
-moz-background-clip: border; /* Firefox 3.6 */
-webkit-background-clip: border; /* Safari 4? Chrome 6? */
background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */

-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */

-moz-background-clip: content; /* Firefox 3.6 */
-webkit-background-clip: content; /* Safari 4? Chrome 6? */
background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

The end result here is that older browsers will use the hex color border. So, when you create these colors, try to be pretty close to what your transparent color looks like in actuality. Newer browsers will pick up on the rgba and background-clip definitions.