CSS: differences between CSS 2.1 and CSS3

CSS 2.1 is still a work in progress, although this specification has been on the run for years. However, CSS3 is the natural evolution of CSS 2.1, providing several enhancements and improvements to the previous version, which include:

1. New selectors for a better pattern matching

   CSS3 includes new attribute selectors, pseudo-classes and pseudo-elements which allow us to select an element based on the presence of string segments, element UI states and more. The major difference here is that now CSS3 pseudo-elements use a double colon instead of a single one. For example:

   h1:before {} /*CSS2.1*/
   h1::before {} /*CSS3*/
   

2. Full XML namespace support

   CSS3 fully supports namespace selection through the @namespace media rule. Further, CSS3 now are able to select a full qualified XML element thanks to the syntax element|suffix.

3. Layout enhancements

   CSS3 supports multiple background images, rounded borders, color transparencies, multi-column layouts, new text properties, box shadows, animations, transitions and more.

4. Media queries

   CSS3 is now able to target specific styles to specific devices and under specific environment conditions through the improvements added to the @media at-rule.

5. Print layout

   CSS3 controls print pagination better than CSS 2.1. Now we're able to specify headers, footers, footnotes, indexes and much more.