The HTML5 Family: CSS3
What follows is a high-level overview of the massive CSS3 spec, subdivided into a variety of modules. Subdividing the spec into modules means that one contentious module does not hold up the development of the spec, and browser vendors can implement modules incrementally. While CSS3 includes many different modules in various stages of approval, this article will cover those considered a higher priority by the World Wide Web Consortium (W3C).
Transitions & Animations
Perhaps the most exciting modules of CSS3 are Transitions and Animations. The Transitions API allows the developer to specify that when CSS property is changed it animates from its initial state to its final state in a smooth transition. For example, a user hovering a link could trigger a
color change and increased
The Animations API, on the other hand, allows for multiple changes in CSS properties values over time. Animations can iterate a number of times, or repeat infinitely. Animations use
A great example of CSS Animation exists on Panic.com’s Transmit page, in which they style a div to behave like a card. The user is presented with content on the front of the card and clicks to start an animation as the card flips over and presents more information on the back.
2D & 3D Transforms
The Transformations API allows for rotating, scaling, skewing and moving page elements in 2D or 3D space. Transforms can be used in conjunction with CSS Animations to introduce a new level of interactive 3D experiences. Have a look at this demo created by Andy Clarke: by combining CSS Animations and Transforms, Andy has created a new way to browse posters in a much richer way than a standard color change or border.
The new Selectors module introduces a variety of new methods for finding elements to style. Some of the most useful additions are the ability to select elements based on their placement in the DOM or on the existence of an attribute. Two fantastic new pseudo-selectors are
:last-child which easily enable the targeting of the first and last item in a container.
With attribute selectors, the exact name or spelling of the attribute does not matter, as the browser will match the attribute name whether it’s valid or not. For example, to target every anchor with a
href attribute that starts with
'http://www.extjs.com/', the CSS3 Selector is
a[href|=http://www.extjs.com/]. There are lots of practical uses for this: for instance, you can style all external links on a site differently than internal ones.
These new selectors allow CSS3 to stay relevant as HTML coding practices continue to evolve.
Backgrounds & Borders
The CSS3 Backgrounds and Borders module allows for multiple backgrounds on elements and a new array of features for styling borders. The new
border-image property allows the use of an image to define a CSS; enabling rich, sustainable visual styles, like chat bubbles and intricate frames. CSS3 includes many other text and box effects such as
border-radius that standardize popular web design and UI effects.
The new CSS3
gradient() allows a web designer to specify a
background-color gradient that shifts from one color to the next programmatically. This means that the browser does all the rendering and saves the designer the trouble of generating an image.
The Color module includes a handful of different ways to specify transparency values in colors and background-colors. For example, the use of an Alpha value in the new
rgba() color function allows a web designer to use a black for a
box-shadow effect that has 20% transparency. E.g.
rgba(0, 0, 0, 0.8);
The CSS3 Fonts module allows for a font file to be included as an asset of a webpage, and accessed by a
font-family designation in stylesheets. Broad implementation of the Font module would eliminate the need for various image replacement techniques (like Cufon or sIFR) for styled HTML headings.
Some version of the Fonts module, also known as
@font-face, has existed since CSS2 and was initially supported by IE5. However, getting vendors and spec writers to agree on one font format has proved to be a long path. It is important to use a properly licensed font for web use, either from a commercial or open-source provider.
Multi-Column Layout defines new CSS properties for columns of text. Content can flow into multiple columns, with a gap, and optionally a rule, between them.
The Flexible Box Layout module defines a new
display value which allows for flexible layouts that previously required complicated floats with nested divs, or required resorting to tables for layout. The ability to vertically align block level elements is also a welcome addition. These features provide robust layout options like those available with Ext JS.
Media queries are an enhancement of the
@media rules already in CSS. The new Media Queries in CSS3 make it easy to target specific devices in different circumstances. For instance, stylesheets could be defined to be used on TVs, on mobile devices, or only in print view. Additionally, media queries can be set to target specific resolutions, which is helpful with the ever-rising number of mobile devices.
And the rest…
Other modules included in CSS3 include CSS Paged Media, which includes notes on how to use headers, footers and page numbers in printed webpages; CSS Ruby (or ruby with a small ‘r’ when referred to in the CSS3 spec), useful for marking up text inline with a pronunciation guide; CSS Marquee, a set of specifications for automated text-scrolling in the manner of an electronic marquee sign; and CSS Speech, which includes notes on how speech synthesizers should modulate while reading text.
There are still many other modules not yet ready for recommendation. The W3.org website has a complete list.
What does it all mean?
While HTML5 seeks to rectify some ill-considered practices or elements in HTML4 and XHTML1.1, CSS3 only enhances or further defines the already robust CSS2.1 spec. As you can see, CSS3 has many different modules, and promises to be a vital tool in web site and application design. It cannot be said that CSS3 has targeted one particular goal, but rather that these various modules work together to allow an overall richer web experience: pages will be easier to style, more pleasing to interact with, and work in expected ways across the wide variety of devices used to access the web today.
The HTML5 Family
Our continuing coverage of the many technologies which make up what people refer to as “HTML5”, we call The HTML5 Family. See all our published posts here: