10 POWERFUL THINGS YOU DIDN’T KNOW ABOUT CSS3

Cascading Style Sheets, the next level. CSS3. With an array of increased creative opportunities, CSS3 is much better than its predecessor CSS2, and gives developers that much-desired control on a web page’s look and feel.

We took a closer look at CSS3 and want to show you 10 things you might not know about CSS3.

What’s new with CSS3?

There’s a huge amount of improvements over the last version, like the ability to easily add video and 3D objects to your webpage. But then, all this obvious flashiness is merely the tip of the iceberg.

In fact there’s much more that can be done on this platform. With an ocean of possibilities out there, this post is about the top eleven. Here are some things you can do with CSS3 that you probably overlooked. And if you have your own experience, don’t forget to add a comment in the comments section below.

Backwards compatible

This is actually pretty well known, but I thought I’d put it in here as well. So, before you start wondering whether you’ll have to ditch all that work you did in the previous versions, here’s some good news.

CSS3 is completely backwards compatible with earlier CSS versions. That old site running on a previous CSS version can be reworked with CSS3.
Also, with browsers already compatible to CSS2 and other versions, changes with CSS3 are reflected perfectly as well. And if you just want to add to it and not rework the entire site, that’s ok, it’s all possible!

PS: Keep in mind though, you won’t be getting the added speed benefits everywhere if only a part of your site is built with CSS3.

Independent modules, simplified working

Unlike CSS2 which was comprised of a single document, CSS3 is broken up into many individual modules, improving both functionality and ease of working.

The advantage?

Well, it makes CSS3 a whole lot easier to handle given its complexity.  Doing this the CSS2 way, would’ve made things very difficult to manage.

The most important modules include Selectors, Color, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations and user interface.

The old CSS specifications are present too, though they have been split into small functional pieces. This makes handling them much easier. Also, keep in mind that these modules are currently under varied stages of recommendation through the W3C.

Easy to change, easier to view

With the modular structure and new functionalities, CSS3 makes it much easier to make changes.  This is possible because individual modules can be easily changed and integrated into the main system.

Finally, this allows independent individual module testing as well, which makes it easier to pin-point issues and make corrections where required.

A major concern of all web designers is on how to easily make the site available on different media and devices. CSS3 improves that adaptability making it easier to view your site on mobile devices or even take an e-reader-friendly approach.

Faster development speed

CSS3 has also managed to set new benchmarks in development speed. Many parts of its functionality now include what used to require a CSS – Javascript combo. This way, time is saved during production, during loading and finally towards the end product. In addition the improved flexibility that comes with the modules reduces turnaround times as well.

Cross browser compatibility and platform independence

Today’s end users have plenty of browser options to choose from. This makes browser compatibility a major challenge for all web developers.

CSS3 enjoys a wider range of browser support, which was not possible before. Moreover, despite CSS3 not being included in the W3C standards, many browsers are offering support to its new features.

Also tools like the CSS3 Generator, provide designers a hassle free design process. Developers are provided with code that is automatically generated with vendor specific prefixes. CSS3 offers a level of platform independence not seen before and is supported by new versions of all the important web browsers.

Better backgrounds

Backgrounds no longer need to be static and boring. What previously needed additional scripting and programming, can now be done easily with CSS3.

Multiple Backgrounds

While CSS3 retains its box model, many new style properties have become a part of the parcel. Multiple background images can be included on a page and layered.

CSS3 Background size

The CSS3 background-size property allows to specify the size of these background images. The background image can easily be clipped and sized according to the vision of the designer. Most importantly though, all this can happen dynamically.

There’s no reason to have all those different backgrounds for different situations anymore. This is a good thing, because with today’s variety of screens sizes, shapes and resolutions, doing things the old way would’ve been a real mess.

borders and text effects

If you’re bored with the standard border variants of solid, double and dashed, CSS3 brings a host of options. An overlooked added feature is the ability to use an image as a border. The CSS3 border-image property allows you to define an image which can be used as a border.

The border-image property takes the image and slices it into 9 sections. The middle section can be stretched or repeated. See example below: