Vendor prefixes
How do browser makers implement a CSS3 module that isn't technically finished, without locking designers into a methodology (and thus code) that might later become obsolete? By means of vendor prefixes.
Safari's (and now Chrome's) experimental border-radius implementation is prefixed -webkit-borderradius; Firefox uses -moz-border-radius.
The best practice is to list the vendor-prefixed declarations first, and then the non-prefixed standard W3C declaration, like so:
.comment {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
By listing the standard, non-prefixed version last, if border-radius should change between the present experimental version and the final released spec, the actual spec will 'win' in browsers that support it – and the older rules will still work for older versions of Firefox and Safari that support the experimental version.
Like vector art in the browser CSS3 excites the mind because of its ability to stimulate the eye. Where prior versions of CSS required extensive use of background images to create gradients, shadows and other graphic effects, CSS3 has the power to create visuals using nothing more than code.
Impressive demos of this capability include Louis Harboe's iOS icons and Jeff Batterton's iPhone, both designed entirely in CSS and both only viewable in the latest WebKit browsers, Safari 5 and Google Chrome 5.
DEMOS WITH DE'MOST: iOS icons made in pure CSS
Now, unless you're trying to demonstrate the power of CSS3 to create artwork, nobody recommends writing tortuous CSS and markup of such demos. But there are plenty of practical, real-world uses for CSS3's amazing artistic capabilities.
Its ability to create gradients, shadows and other effects without requiring background images makes it an invaluable bandwidth-saving performance partner for faster websites – important on any site, and particularly vital for sites viewed on smartphones, where bandwidth speed is as unpredictable as the weather.
Likewise, CSS3's visual panache makes it a most valuable tool for creating resolution-dependent layouts. It's like vector art in the browser. Add HTML5 canvas and stand back!
Core CSS3 properties you can use today include border-radius, text-shadow, box-shadow, RGBA, opacity and even multiple background images (at last!), which are handled thusly:
body {
background: url(top.png) repeat-x top left;
background: url(middle.png) repeat-y bottom right;
background: url(bottom.png) no-repeat bottom right;
}
Generally, selected CSS3 properties work in the latest versions of Safari, Chrome, Firefox and Opera, although some also work in IE9, and some work in browsers as old as Safari 1.3 and Firefox 2! Not every CSS3 property named here works in every browser listed.
Complicating the picture, your site's visitors use a hodge-podge of browsers, from IE6, IE7 and IE8 to Chrome to Camino. So does this mean, as some people argue, that you should kiss CSS3 goodbye until everyone in the world uses IE10 and Safari 5? Of course not!
What use are visual flourishes that don't show up in IE? Ask an iPhone user. Apple sold more than 40million before the end of 2009 – at least half to people who use Windows PCs at home and may be stuck using an outdated version of IE in the office. But they're now as familiar with the WebKit-enabled CSS3 experience as they are with the Internet Explorer desktop, and they experience no cognitive dissonance switching between the two.
This consumer comfort with multiple browsing environments is also helping to stifle those client voices that insist sites must look and act exactly the same in every browser. And with mobile overtaking the desktop as the preferred interactive experience, people now enjoy and expect a certain calibre of visual and typographic glitz. Now more than ever, the delights of CSS3 are yours to enjoy and bestow.
HTML5: it's alive!
Spreading like pot at a Phish concert and matching CSS3 blow for blow, ready or not, here comes HTML5. If you're afraid of HTML5, think of it as a more forgiving (easier validating) version of XHTML 1.0 – one where EMBED is finally valid, and nobody cares if you forget to self-close an IMG.
Of course, HTML5 is more than that. It's the first serious update to the web's markup language, and the only version of HTML designed for a web of applications, not just documents.
Moreover, the sausage making is different. In the typical web standards scenario, a committee at the W3C dreams stuff up, leaving it to browser makers to implement it or not. Eventually, web developers adopt it, or they don't. But HTML5 inverts this paradigm.
Browser manufacturers (not the W3C) invented HTML5, basing much of it on what web designers and developers do already, and one man (editor Ian Hickson) rather than a committee decides what stays and goes. HTML5 is in the news not just because Apple uses it as a trident in its gladiatorial combat with Adobe, but because its canvas, video and audio elements provide a standard means of offering rich media without plug-ins.
These new capabilities with their potential to disrupt established web monopolies excite suits. But HTML5 is of interest to you and me for other reasons, including its addition of structural semantics to the HTML vocabulary via a limited set of new elements, including article, section and nav. (The names are taken from an analysis by Google of millions of web pages, to see what kinds of class names web designers were already using. HTML5 doesn't want to reinvent the wheel; it wants to give us better tyres.)
So what can you do with these new elements besides use them to structure modular, reusable content? Can you also style them? Safari, Chrome, Firefox, Opera and IE9 will indeed recognise and allow you to style these new HTML5 elements as long as you include a rule in your CSS that marks their display: block. Older versions of IE won't style these elements unless you first 'create' them in JavaScript using a technique jQuery lead John Resig calls the 'HTML5 shiv'.
SHIV SCRIPT: There's a handy script to automate shiv-building on Remy Sharp's blog
To automate shiv-building, Remy Sharp has created a simple enabling script that 'creates' all the new HTML5 elements, allowing versions of IE pre-9.0 to style the new HTML5 elements. If you're uncomfortable using JavaScript for this, you can continue to use standard HTML 4.01/XHTML 1.0 divs styled with appropriate HTML5 class names, eg div class="section". Then, when your audience is using WebKit, Firefox, Opera or IE9+, you can easily replace div class="section" with .
No time like the present
Half of standards making is minutia; the other half is politics. Rightly or wrongly, I reckoned HTML5 was at least partly Hixie's revenge against XHTML served as text/html.
Then a funny thing happened. Some friends and I gathered to hash out the pros and cons of HTML5 from the perspective of semantic markup-oriented web designers (as opposed to the equally valid perspectives of browser engineers and web app developers, the two perspectives that have primarily driven the creation of HTML5).
In studying the thinking behind some of the framers' more controversial design decisions, we discovered a markup designed to work the way developers think, and to support them as they craft a new generation of web apps on and off the desktop. HTML5's new semantics are tuned to the reality of publishing, which takes place more and more on or through the web. (Even ePubs often begin life as HTML, which means that soon, more and more printed books will, too.)
Meanwhile, its new bright-and-shiny bits compel entrepreneurs and programmers to forsake proprietary platforms for the web – at the very moment when CSS3 is smashing the old restrictions on web layouts and facilitating design that uses flexible grids and CSS3 media queries to hop gracefully from desktop to mobile and from widescreen to small.
Some people fret that the success of the iPhone and iPad will usher in a new age of corporate control, with Apple playing the Big Brother role that Microsoft has just abandoned. Apple's tight control over its store and its restrictions on which tools may be used to create iPhone apps certainly bear watching.
But when I see all those iGizmos flying off the shelves, I see WebKit in people's pockets. I see CSS3 and HTML5 on their laps. I see the web I used to just dream about. And I see you and me having a lot of fun over the next decade.
