All About the New CSS3

It took about 10 years, but CSS3 has finally been created. Hopefully, soon, CSS2 will be no more. I’m sure most of you are like me, you don’t care about what version of CSS you’re using, as long as you know how to use it. That’s why the introduction of CSS3 didn’t appeal to me at first. I soon found out though, that there may be a bit I want to learn about it.

So I’m going to go over the basics with you in this article. This is not a tutorial, but rather a ‘What CSS3 can do’ article. Because it’s so new, there are still some issues with it, which I will also go over.

So how’s it different from CSS2?

Not necessarily the biggest differences in the new version, but the first I noticed, were all the minor changes that made common website details much easier to do. Take rounded corners for example. Before CSS3, there was no way to do this without images. It was always a mix of CSS and images, and the CSS always was a hassle for what you got out of it. CSS3, however, has made a way to create CSS rounded corners, with just CSS. It has also provided ways to customize the size and curve of the corners.

Of course, this is just one of the numerous additions they’ve created for the new version. Among others are new text effects, different column variations, and multiple backgrounds.

Besides the minor details I’m so fond of, the main difference in CSS3 now is the introduction of modules. Because CSS2 grew too rapidly as the last ten years in web development have grown, all the elements were clumped into one big scattered, unorganized mess. With modules, different aspects of the new CSS will be categorized, and placed in modules for more efficient use. Some examples of modules are the Color Module, Ruby Module (which helps with the visual aspect of foreign symbols, like Japanese), or the Fonts Module.

It’s not important that your aware of the technicalities behind modules, but only that you know they’re there for your benefit. The point of this form of organization is that the use of CSS will be able to be much more expandable than before.

Is it ready to use?

This is the question that has been boggling my mind for weeks. So what’s the answer I’ve gotten out of these weeks of research? It’s sort of ready to use.

Yes, it is technically out, but it doesn’t necessarily have all the bells and whistles in perfect order. If you plan to start using CSS3, which I recommend we all ween into, use it with caution. Be sure to research CSS3 cross browser compatibility, and known errors or mishaps with the new code before using it.

Most modules are completed and may be used with ease, but many more are still only half finished.

Cross-Browser Issues

Cross-browser compatibility: the issue of all issues for web designers. This is the #1 reason CSS3 can not be widely used just quite yet. It takes people awhile to switch browsers, update browsers, and finally understand the benefits of these two actions. Here are the general descriptions between major browsers and their CSS3 compatibility status. You can also view detailed tables of each browser if you do a search on ‘CSS3 browser compatibility’.

Internet Explorer: The good news is that the new version of IE, Internet Explorer 8 is currently released (in Beta), and is much more compatible with CSS, and particularly CSS3, than any older version of Internet Explorer. If you’ve been working on websites for long, you’re aware the IE is the largest browser holding new developments in web technology back, as it is the only major browser that is still not W3 compliant.

So even with all the new improvements to the new IE, it is 1) still not as compatible with CSS3 as other browsers are, and 2) most people refuse to update their browsers to newer versions at all. There are still a large number of web users that are still running on IE6 (two versions ago), which are barely compatible with CSS2 (Already old now).

So to sum it up, here’s an important notice: Update your browsers, no matter what browser you use. You’re not only affecting yourself by staying outdated!

Mozilla and Safari: These two browsers work very well with both the new version of CSS and the older versions. They are both W3 compliant, which immediately makes them much better choices to view the most recent (and compliant, of course) web technology.

Because Mozilla and Safari users tend to be developers or designers more so than IE users, they also go beyond the standard compliance to make their browsers more compatible.

Opera, Netscape, and others: Although these browsers are coming smaller in user numbers, they are still large enough to be taken into consideration. These smaller browsers currently do not support very many CSS3 features, and aren’t updated as frequently.

The thing to consider though is that if a user is using one of these smaller browsers, and has it either updated enough to view most websites today, or doesn’t visit sites with new-technology content (like videos, flash, etc.) then you don’t need to worry about it too much.

The thing to keep in mind is too keep your code validated, and for now only use well-tested CSS3 modules, and other issues should sort themselves out over time. People will update their browsers eventually, even if it’s not until they’re barely able to view anything on the web!

Start Learning CSS3

Well if I haven’t gotten you interested in CSS3 at this point, maybe some examples of what it can really do will get you excited:

There hasn’t been a lot of opportunity for developers to write a good selection of tutorials, so most of them are introductory and very basic. Hopefully over time designers will start implementing more interesting and specific ways of using CSS3.

Promote CSS3

In order to work CSS3 into mainstream web development, many webmasters are promoting CSS3 in their blogs with tutorials, posts, and by using it themselves to get a hype going. With more people weening into using CSS3, more browsers will be urged to move faster to support it.

So if you’re interested in using CSS3 in the future, and want to see the development of it move quicker, I ask that you promote it on your website in some way. You can do this by either posting information like what I’ve done here, or by linking to other CSS3 articles.

CSS3.info is probably the largest website that is most focused on the new CSS3, so that is a good source to link to. They have a variety of tutorials, updates, and official news of the production of CSS3.

For the most part, resources of CSS3 are limited. If you have any good tutorials, articles, or information, please share!

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

3 Comments

  1. Kari

    January 17th, 2009 at 06:12 pm

    Ah, I love all the perks of CSS3. I don’t want to use it on my website quite yet though. Before I knew about validating my site i’d always experiment with opacity.

  2. Sara

    January 18th, 2009 at 12:47 am

    I hope I can get my hands on this soon. I will try to look into this so I can start learning all the quirks. I love the idea of rounded corners without images.

  3. Alison Kerr

    January 18th, 2009 at 11:21 pm

    I’m not really that interested in using this myself, but I do foresee a knock-on effect for a lot of people with things like WordPress templates. I have a couple of CSS sites I maintain, but I’m not up for doing much with them apart from maintaining the content at this point. As I learn more about the power of WordPress I realize that I’d rather use something like the Thesis WordPress theme. Faster loading and cleaner code on templates would be nice, once the bugs have been worked out of course!