Beyond HTML5 and CSS3

In the old days, there were two box models; the Internet Explorer “quirks mode” box model and the standard box model.

In the standard box model, the size of the box was the width of the box plus the padding. So if you had defined your box to be 300px wide, and you had padding: 10px then the size of your box would be 320px, or 300px + 10px left padding and 10px right padding. This is one of the most difficult things to learn when doing CSS layouts.

But in the “quirks mode” box model in IE6, the size of the box would be the width of the box, and if you applied padding or borders, it would adjust accordingly. Personally, I always thought that was the more reasonable approach, but it was also the number one reason sites looked weird in other browsers if you designed them in IE.

Fast forward to now, and we have a new solution. Add this to your CSS:

*, *:before, *:after{
  -moz-box-sizing: border-box;
  -webkit-box-sizing:    border-box;
  box-sizing: border-box;
}

The box-sizing property makes the box model work just like quirks mode in IE. To put it simply, that means when you’re dividing the page into columns and you say that each column is 50% wide, then no matter what kind of padding you put in those columns, the width will not change.

I recommend this approach, but you should be aware that it won’t work in IE 8 and below.

You can read more about this at http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Loading fonts with CSS3 usually involves specifying several URLs in the stylesheet for the various font formats. These mean an extra request which can make things a bit slower. It turns out it's possible to use data-uri and embed the font right in the stylesheet. Read more here.

Devices running iOS 4.2 now support Web Sockets in Mobile Safari. This is great news for services that want to use Web Sockets and can’t rely on a Flash fallback.

iOS 4.2 also now supports TrueType Fonts and they look pretty snazzy.

The iOS devices have had great HTML5 and CSS3 support. LocalStorage works quite well, as do things like CSS3 transformations, pseudoclasses, and multi-column layouts. Offline support works great too, so it fou’yre looking for a neat way to build an offline mobile app for the iPad, you’ve got all the tools you need.

The Colorzilla extention for Firefox is a handy companion for developers, and the folks behind it have just made things easier when it comes to creating nice-looking CSS3 gradients. Check out the Ultimate CSS Gradient Generator. With just a few mouse movements, you can create gradients that easily work across browsers, like this:

background: #f2f6f8; /* old browsers */
 
background: -moz-linear-gradient(
            top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* firefox */
 
background: -webkit-gradient(
            linear, left top, left bottom, 
            color-stop(0%,#f2f6f8), 
            color-stop(50%,#d8e1e7), 
            color-stop(51%,#b5c6d0), 
            color-stop(100%,#e0eff9)
); /* webkit */
 
filter: progid:DXImageTransform.Microsoft.gradient( 
       startColorstr='#f2f6f8', 
       endColorstr='#e0eff9',
       GradientType=0 
); /* ie */

While it’s important to understand how gradients work, tools like this are great because they do the grunt work for us.

Well, it seems I’m a little late to the party – Remy Sharp has beaten me to the punch and posted a great post explaining the sudden popularity of polyfills. You should read that too.

Over the last few days, people have been talking about “polyfills.” According to Paul Irish, a polyfill is

A shim that mimics a future API providing fallback functionality to older browsers.

Throughout the book, we discuss many different polyfills, even creating our own at times. As more developers implement more of the interesting HTML5 and CSS3 features, more interesting polyfills are emerging.

One of the most well-known polyfills is Remy Sharp’s html5shim which lets us use the new sectional markup in our pages in browsers like IE 8 and earlier. Others like Socket.IO go beyond simple polyfills and provide both server and client-side fallbacks for Web Sockets.

The Modernizr wiki has a huge list of various shims and polyfills you can use in your work.

Creating usable fallback solutions is the only way we can use these new APIs and features on our sites today. HTML5 and CSS3 provides a fallback solution for almost every topic covered.

HTML5 and CSS3 are the future of web development, but you don’t have to wait to start using them. Even though the specification is still in development, many modern browsers and mobile devices already support HTML5 and CSS3. This book gets you up to speed on the new HTML5 elements and CSS3 features you can use right now, and backwards compatible solutions ensure that you don’t leave users of older browsers behind.

Buy the beta copy now and contribute to making the final version even better.