CSS 2 was released in 1997, and after more than 10 years it needs to be updated to reflect the new uses and trends we’ve been seeing in the web. This new version of Cascading Style Sheets brings new features long awaited that will make web development easier. Alongside with HTML 5, this new version represents the evolution of the web, and aims to take the concept of semantics into the core of the web.

CSS 3 has quite a few new concepts. Let’s take a look:

New properties

  • Borders: border-color, border-image, border-radius, box-shadow.
  • Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
  • Color: HSL colors, HSLA colors, RGBA colors opacity.
  • Text: text-shadow, text-overflow.
  • Interface: box-sizing, resize.
  • Selectors: attribute selectors.
  • Formats: media queries, multiple column layout, speech.

New features

Using these new properties we’ll be able to achieve things such as:

  • Borders, background
    CSS 3 will allow images for borders, round corners and shadows. Objects can not only be positioned, but its direction can also be changed (horizontal or vertical).
  • Multi-column layout
    Designing pages with multiple columns now will be easier than ever. Until now we needed to enclose the content in two separate DIVs to simulate a two-column layout; now we’ll just use column-count: 2. Not all that hard, right?
  • Advanced Layout
    This new feature will allow objects to be distributed along the screen in a better an easier way, and combine them in different manners without additional tags. Besides, the page model will be included: this means that we will be able to indicate page footers, crossed references, and section headers.
  • Selectors
    There are new selectors to make it easier locating exactly the element you want:
    E:only-of-type: an element which is unique in its type.
    E:not(s): an element which doesn’t match simple selector.
    E ~ F: an element F with an element E right before.
    E:nth-child: the n-th child element of a parent node. With this selector we’ll be able to implement things such as zebra tables.
    E:nth-last-child: the last child element from a parent node.
    E:nth-of-type: the n-th element which is of a certain type.
    E:first-of-type: the first element which is of a certain type.
  • Resizing
    Up till now, if we wanted our elements to be resizable we needed to use Javascript to alter its attributes. With CSS 3 it will now be a task of the browser, just by using the resize property.
  • And many more things …

Some properties of CSS 3 are already being implemented in most major browsers. There’s not a 100% fully compliant web browser yet (specially because CSS 3 is not finished yet), but it won’t take much time to have one. This means that maybe we won’t be able to use all of these new features right now, but we can certainly start using some of them. So, what are you waiting for? The sooner the better!

Further reading

Related posts:

  1. HTML 5: dramatic improvements in the web language
  2. The Semantic Web