CSS 3

CSS 3 allows feature-rich web design.

What is CSS 3?

CSS 3 is the latest revision of the Cascading Style Sheets specification for web pages. CSS is what defines the design of any HTML document or web page. CSS 2's specification is what is currently supported across all modern browsers, however it has become large and complex. To manage the development of CSS 3, the specification was broken into small parts called modules. While the details of some of these modules are still being hammered out, many are already supported by browsers such as chrome, firefox, safari, and Internet Explorer 9.

What are some of the new modules?

  • Selectors

    Selectors in CSS 3 are going to provide developers a lot more flexibility in selection specific areas of the document. Some of the new selectors include:

    • A checked pseudo-class that matches any checked elements (radio, checkbox).
    • A target pseudo-class that matches only elements that are targetted in the URL.
    • The ability to match on element attributes and attribute values, and even partial matches.
    • structural pseudo-classes such as nth-child, nth-of-type, etc that would eash odd/even row styling.

  • Text Effects

    Some of the new effects avaiable for text in CSS 3 include shadows as well as the ability to make changes to the overflow, hyphenation, whitespace and justification of text. In addition to this, CSS 3 brings the ability to use web fonts. Web Fonts are a way for the browser to load a particular font from the web, giving designers more freedom in font choice.

  • Speech

    The speech module aims to "style" the voice generated by screen readers (text to speech). A few properties it covers are volume, balance, rate, and pitch of the voice.

  • Backgrounds and Borders

    The new additions to backgrounds and borders mean rounded corners won't need to be a painful process to code anymore. Instead of image overlays or odd tools to generate lots of weird hacky css code, rounded corners can be as simple as border-radius: 5px! Not only are rounded corners included, but multiple background images and gradients are too!

  • Multi-Column Layout

    This handy style allows you to split up an element's content into several columns as easily as column-count:2;! The columns will also be able to styled in other ways, such as the width, the padding between them, and borders around them.

Here's a full list of modules.

How does Metal Toad use CSS 3?

CSS 3 eases implementation of designs without the need for strange hacks or extra hefty plugins. This translates into less development time, faster design updates and less code used. It also opens up the door to some great looking web applications.