As CSS3 roars ahead in spite of the old Internet Explorer legacy browsers acting like a drag weight on faster adoption, there have been some really fascinating experiments with CSS3 properties and values which have created design styles far beyond what the original participants behind the W3C CSS modules could have imagined.
There seems to be a craze for recreating cartoon characters like Homer Simpson in HTML and CSS only, but I don't see any point in creating work with no practical value. Of far more interest to me are those that are pushing CSS to its limit but whose work can be replicated and expanded upon by other coders.
Pseudo Elements, Box Shadows and some CSS3 animation
Pseudo elements have a lot of practical, albeit minor uses. I've use them to add typographically correct smart quotes around blockquotes such as below (note the added space in the value for the before content property):
blockquote:before {
content :"201C" ' ';
font-size : 2em;
vertical-align : middle;
font-style : italic;
}
blockquote:after {
content : "201D";
font-size : 2em;
vertical-align : middle;
font-style : italic;
}
I use unicode characters rather than HTML entities because the latter has a habit of producing strange mistakes when cutting and pasting CSS.
I have also used pseudo elements in the past to add an extra oomph to menu links on the hover state like so:
#main-menu ul li a:hover:after {
content: " GO! ->";
color : #ffffff;
}
Other coders are taking it further.
I really like Chris Coyier's use of pseudo elements to create full browser width bars, while Nicolas Gallagher combines CSS3 transitions with ::before to create impressive shiny buttons (hover over the them).
The W3C working draft document CSS3 Generated and Replaced Content Module dated May 2003 and allows multiple pseudo elements per element. When browsers implement this standard expect another wave of ultra-complex CSS experimentation on par or more inventive then these pure CSS GUI icons.
Unfortunately, CSS 2.1 pseudo elements :before and :after do not work in Internet Explorer versions 6 and 7. Thankfully though there is a polyfil in the form of Dean Edwards ie7-js script. This script covers a myriad of advanced CSS not used in IE versions 6-8. It is the only script that gives support to pseudo elements. Be careful when using it though as it is a big file and it will create a Flash of Unstyled Content as the JavaScript is loaded.
Box shadows have been implemented for a couple of years now in Firefox and Webkit-based browsers. It didn't take long for coders to realise that adding layers of values, with pseudo elements and CSS3 transforms can create amazingly attractive and complex shadows.
A popular demo was created by Nicolas Gallagher.
Likewise the Viget crew have had a lot of fun creating their 39 Box Shadows, No Good Reason page (only works in Webkit-based browsers).
Like Nicolas Gallagher they only achieved their complex shadow effects by mixing box shadows with other important CSS3. In their case they liberally used gradients, pseudo classes and animation.
CSS3 transitions and transforms are a nice added bonus to the coders arsenal. When they first appeared my initial reaction was, 'Well that is what JavaScript is there for'; but they do add another welcome means of adding motion to elements on a page.
In its favour the syntax is easy to implement. There really is very little to using CSS3 animation. Secondly, it can animate elements on a page and animate them in particular ways that would be difficult even with a JavaScript library like jQuery.
I particularly like using animation on forms to give an extra usability feature. On the :focus selector I add a scale value like so:
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
-moz-transform : scale(1.05);
-webkit-transform : scale(1.05);
-o-transform : scale(1.05);
transform : scale(1.05);
}
Through experience I wouldn't recommend using CSS3 animation on page load and only use it on mouse and keyboard events. Presumably CSS3 transitions and transforms are quite resource hungry as whenever I have added them to a style sheet to fire on page load it creates a stuttering, non-smooth movement on the page.
Unfortunately, due to lack of support in the legacy browsers, you would have to be cautious in using a lot of the above in commercial jobs; but they clearly signpost a future direction for CSS users in which far, far more complex code will become standard.
CSS branching
Due to the frustrations of using a non-programming language like CSS, JavaScript and Ruby developers have created their own forks called LESS and Sass respectively.
Here you can create CSS but do so too with variables, mixins, namespaces and nested rules amongst much else. Both LESS and Sass have their own bands of loyal users who would only reluctantly return to straight CSS as used by the vast majority of front-end developers.
Both of these projects have created a valuable contribution to the industry because they present working alternatives to CSS that are radically different to the current W3C recommendations and drafts. However, should we be branching out into mutually exclusive CSS formats? To me this seems like walking into an uninspiring dead-end rather a viable and sustainable future.
Boilerplates & resets
A number of years ago Eric Mayer produced his famous CSS reset. It allowed web developers to approach a project knowing that before they have even written a single line of code, many browser inconstancies and quirks had been levelled.
Today, YUI reset and David Hellsing's Tripoli Reset have been become, if not obsolete, then certainly dated in the face of software and HTML and CSS changes.
As a modern CSS reset, Nicolas Gallagher (him again!) and Jonathan Neal created normalize.css. I'm particularly impressed with their detailed comments that describe the purpose of every line of code and I like the attention to detail in the form section.
Beyond just a CSS reset is HTML5 Boilerplate, the creation of Irish Paul. There's a ton of code in this project to learn from. I really like the work they have done in the .htaccess file. Proper Apache configuration is vital for a fast, non-buggy website, and they have covered a wide territory including GZIP, expires headers, proper MIME types and UTF-8 encoding.
Building upon this project is Andy Clarke's 320 and Up Boilerplate that takes a “mobile first” approach to web design. Again, this is a really interesting project to study and use.
I can't begin to tell you how much I have learned by examining the code in these boilerplates and resets. But, as a word of caution, the worse thing you can do is just cut and paste code without a clear understanding of what it does. Question everything. Just because a face like Irish Paul or Eric Mayer deems a particular line of CSS a necessity, doesn't mean that it is or is suitable for your web builds.
New layout modules
Last year saw a buzz of activity around new CSS layout modules. Originally back in the 90s tables were the preferred method of page layout. During the last decade this approach was chased out of existence by standards evangelists such as Jeffrey Zeldman who insisted on the separation between presentation and content, and in its place came the CSS solution of floats. However, CSS floats were never intended as means of laying out an entire page but of positioning objects like images within a body of text. Many involved in the web design industry have longed for a different approach to layout.
By my counting there are now five different W3C sponsored alternatives to floats! They are Exclusions and Shapes, Regions, Template Layout, Grid Layout and Flexible Box Layout. For a thorough explanation of all of them read net magazine's article The Future of CSS Layouts.
I find it difficult to get exciting about these new layout options. Using floats can be tricky (hello clearfix), but ultimately I've never had any serious problems creating complex layouts. Also, none of the above will be backwards compatible. I'm not against a fundamentally different approach to CSS page layout, but I would baulk at having different layout systems for different browsers in the same web build. It's also worth noting that Flexibox was first introduced in 2009 and it is now going through a radical rethink because the original draft proved lacking. I wonder how many of the other four will also be subject to major revision in the coming years?
Conclusion
CSS: use and abuse it. Time spend trying out new techniques is important to personal development. Make sure that you set aside some quality time to play around with CSS3 and see what you can produce. Look at the code linked to above and learn from it. Use it as a base for further experimentation. Avante!