I know we talked briefly about CSS3 earlier when we discussed the history and
current state of CSS.
So we know that CSS3 isn't really a specification itself, as CSS has been broken
up into series of modules that are evolving at different paces.
That still, however, leaves the question open:
what exactly is CSS3, and why are so many people talking about it?
Well, in many ways, CSS3 is simply a brand much, like HTML5 is.
People are using it as a blanket term to describe the new CSS features and the
functionality that have emerged over the last few years.
Now, part of this new functionality is the continued development of CSS through the W3C.
Another part of it is being driven by a new generation of browsers that are
focused on giving designers more powerful tools for creating sites.
In fact, some of the syntax and features being added to the CSS modules are
coming straight from people like Mozilla and WebKit, as they continue to stretch
the boundaries of what's possible through CSS.
So let's take a look at some of the features most commonly associated with CSS3.
Keep in mind that many of these features are in the early stages of being
supported by browsers.
Many are experimental, and many are features that have been around for some time,
but are just now being widely implemented.
Taken as a whole together, they will give you a good idea as to what people are
talking about when they mention CSS3.
In many cases, enhancements to older capabilities are defined as CSS3.
This include things like border radius, which allow you create rounded corners
for elements; border images; background property editions, like the ability to
have multiple backgrounds; and enhancements to controlling background image size,
orientation, and clipping.
In some cases, it's also associated with enhancements to existing property values.
The new color values of HSL and the addition of RGBA and HSLA, which add alpha
values to color values, are also often labeled as being features of CSS3.
Many of the new text-formatting features are often also classified as CSS3.
These include things like the new text shadow property, creating multiple
columns, and working with web fonts.
Now, web fonts aren't new, and they've been around since the CSS2.0
specifications, but browsers have only recently started adding
widespread support.
Web fonts allow you to use fonts that aren't installed on the client's system, and
greatly increase their creative control that designers have over their sites.
Quite a few new selector types have been added to CSS as well, and although they
don't get a lot of attention when people discuss CSS3, I would actually argue
that they are among the most important additions to CSS, as they dramatically
increase a designer's ability to target elements on the page.
There are also a few features that are almost always mentioned when CSS3 is discussed.
If you've been researching it at all, I am guessing you've come across these.
First, box shadow gives us the ability to add drop shadows to element boxes.
You can control the color, offset, blur, and whether this shadow is offset or
inset in relation to the element.
One of the features that gets a tremendous amount of attention is CSS gradients.
CSS gradients are incredibly powerful and allow you to set the background color
of an element to a gradient.
You can use a simple two-color gradient, or you can go all out by using numerous
color stops and varying levels of opacity throughout the gradient.
Now, these can be linear or radial, and designers are currently using them to
create all kinds of impressive visual effects, from creating buttons all the way
to building background patterns.
CSS transforms are also getting a fair amount of recent attention.
Transforms allow you to do things like rotate items, scale them, skew them, or
otherwise transform elements on the page.
While this has powerful implications on how page layout can be controlled, it's
also often used in conjunction with another new CSS feature, CSS transitions.
CSS transitions lets you animate from one CSS property value to another.
For example, you could animate the height of an element from 0 pixels to 100
pixels to reveal the contents of the element.
When combined with transforms, you can animate the position, rotation, and even
scale of an element.
One of the properties gaining the most attention currently is CSS-based animations.
Although the two are similar, don't confuse transitions with animations.
CSS animations are contained within their own specification, and they allow you
to create keyframes to control animations and properties that allow you to
control the timing, duration, and looping of the animations.
While that's not a comprehensive list of all the features that are being
attributed to CSS3, it should give you a good idea of what people are referring
to when they discuss it.
There's another thing that you should consider when approaching many of the
features that I've talked about here:
most are either not widely supported or not supported at all in older browsers.
Now, many of them are experimental and are only supported through the use of
vendor prefixes, which we're going to discuss in more detail in just a little bit.
What that means is that if you decide to use these new features, you will need
to--at least in a short term--plan for how you want to deal with older browsers, or
browsers that don't support the features.
In some cases, like gradients, browsers differ in syntax and execution.
You'll also need to keep an eye on how the syntax is evolving.
Many of those features are still being refined, and it's not uncommon to see the
syntax and behavior go through significant changes before they're stabilized.
In other words, proceed with caution until the features are supported
evenly across browsers.
So keep in mind that CSS3 isn't really any one specification;
it's more of a general term used to describe evolving CSS features.
Keep an eye on emerging techniques and how they're being implemented, so that you
can make intelligent decisions about when to start using them.
For more information on many of the CSS3 features I've mentioned here, be sure to
check out my CSS3 First Look title in the lynda.com Online Training Library.