Looking for the lessons? Get started!
This site’s approach to CSS3 and HTML 5.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
This site is a bit restrained when it comes to adding CSS3 and especially HTML 5 elements. No browser completely supports either of the spiffy new iterations. It’s a matter of browser support.
For CSS3 properties and selectors, the latest versions of the Webkit browsers (Safari 5 and Chrome 16) give by far the most support. Firefox 10 gives strong support, as does Opera 12. Internet Explorer is a different case; since IE, unlike almost every other browser on the market, does not upgrade itself, many people are forced to use older versions. You can pretty much forget about CSS3 support for IE versions 6, 7, and either 8. IE 9 and 10 do a much better job of supporting CSS3. However, every single browser on this list does not support one or another CSS3 property or selector: in other words, no browser gives 100% support, though some of the elements not supported are arguably irrelevant (i.e. few of us will ever use them in real-world designing).
HTML 5, unlike CSS3, isn’t even out of working draft yet, so whatever we think HTML 5 will do, that may change before the final draft is adopted. Browser support for HTML 5 in its current form (I originally wrote this in the summer of 2011; the situation has not yet changed) is problematic. Again the Webkit browsers do the best in supporting HTML 5 applications and its variety of other elements. Firefox supports much of HTML 5 elements, but has some gaping holes in that support. Opera does a better job than Firefox, and overall is the rough equivalent of the Webkit browsers in supporting HTML 5. IE … even IE 9 and 10 only support very limited aspects of the HTML 5 elements.
You can find out more about the individual support each browser has for the two at the HTML5 & CSS3 Support page.
As such, I’m making a command decision not to include HTML 5 elements in this site. CSS3 inclusions will be limited and clearly marked as optional, though as time allows I will be adding more and more CSS3 elements and techniques to these pages.
While we are all eager to begin implementing HTML 5 and CSS3 in our designs, we need to lock down our knowledge and expertise with HTML 4 and CSS2 first. But keep checking back; as time goes on, HTML 5 becomes firmed up, and new browser versions exhibit stronger support, I will begin including more elements from both CSS3 and HTML 5 in these pages.
