CSS3 for web developers

Web developers are more interested in coding, while web designers are more attracted by the visual effects that we can achieve with web standards. This post aims to be a brief introduction to CSS3 for web developers, just for addressing some coding issues that may arise while switching from the old CSS 2.1 specifications to CSS3.

Changes in syntax

Functions and expressions

CSS3 syntax is fully compatible with CSS 2.1 syntax, except for some new structural pseudo-classes that apply the concept of functions to CSS selectors. Before CSS3, a function in CSS was usually defined by an identifier followed by a pair of round brackets. Examples of functions are url(), counter() and counters():

#test {
  background: url(image.gif) no-repeat 0 0;
}

The string contained within a function must be evaluated by a web browser. It basically allows for two types of values:

1. URI
2. IDENT

CSS3 extends the concept of function to CSS selectors. Now a selector can contain:

1. a function, such as element:nth-child(...)
2. an expression contained within the function body, such as element:nth-child(2n+1)

Now a function accepts an EXPR type that must be executed, evaluated and have a return value. For example:

tr:nth-child(2n+1) {
  background: yellow;
}

n is a NUMBER factor, followed by a plus sign and an integer (NUMBER). The selector works by evaluating the expression and returning the exact position in the DOM tree that corresponds to the matched elements (3, 5, 7 and so on).

Tokens for pseudo-elements

In CSS3, pseudo-elements don't accept a single colon as delimiter (DELIM), but they require a double colon. Thus:

p:before { }

must be rewritten as:

p::before { }

Comma-separated property values

CSS3 now accepts comma-separated lists of values for properties. For example:

/* http://www.css3.info/preview/multiple-backgrounds/ */

#test {
  background: url(body-top.gif) top left no-repeat, 
  url(banner_fresco.jpg) top 11px no-repeat, 
  url(body-bottom.gif) bottom left no-repeat, 
  url(body-middle.gif) left repeat-y;
}

Validation

CSS 2.1 is also valid CSS3, but it doesn't work either way. In fact, the CSS3 syntax can actually arise some problems in the areas described earlier, plus other problems related to properties and values that are unknown in CSS 2.1. The best thing you can do is to use the Validator's URI with the special parameter profile set to css3 just to avoid these problems.

Further, there are some values and properties that cannot be used:

1. CSS 2.1 system colors
2. vendor prefixed extensions (such as -moz-transform)
3. color names different from those listed in the specifications
4. aural properties and values

Always remember to use the URI's parameter specified above to avoid any possible cause of problems.