CSS 3: one more step in the evolution of the web
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:
- 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.
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.
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.
- 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!