CSS3 is not new, nor is it just round the border-radius’s corner! It patiently sits, all ready to make its debut, sipping coffee and waiting for the browsers to provide the red carpet. You see, it is the browsers that need to catch up.
Note “the browsers need to catch up”
It is very important to learn that while it is fun to play with CSS3 – as I will demonstrate over the next few tutorial submissions – it is not yet fully supported in current browsers. This means that if you are to incorporate CSS3 in your website, be sure to have some fallback code for the browsers that are not supporting it!
Here is a quick ‘CSS3 versus Browser’ outlook:-
- FireFox (3.0.5… some support)
- Google Chrome (1.0.154.36… some support)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6… little support)
- Safari (3.2.1 on Windows… good support)
What is CSS, yet alone CSS3?
Very briefly, CSS stands for ‘Cascading Style Sheets’ and is a mark-up language for altering and giving style to a website. The 3, is just to represent the next generation in style sheet language. A version number, if you will.
Why am I writing about CSS3 if it is not yet fully supported?
Because it is fun to learn new things! …and a few people have asked me how to get the rounded corners on their online profiles. I explained how to do this with images or CSS3 and like a snowball rolling down a hill, I am here writing up a few things I’ve been learned along the way and hope that it will this may just help others out too.
Don’t just listen to me though! Eric Meyer is a fantastic chap who knows a good thing or two about CSS, among other things! There is a great interview with Eric here on Six Revisions discussing CSS3 and it is definitely worth the read!
Zen Elements Blog | CSS3 Series
- CSS3: Introduction
- CSS3: Border Radius
- CSS3: Border Color
- CSS3: Shadows
- CSS3: Background Images
- CSS3: Multiple Column
- CSS3: Embedding A Font Face
- CSS3: Opacity
- CSS3: RGBA
- CSS3: HSL & HSLA
To follow the upcoming tutorials, I advise – if you don’t already have them – to download a few browsers…
You will notice that internet Explorer isn’t there, mainly because you probably already have it and well, it currently rates pants for CSS3
Subscribe to RSS or Email so you don’t miss the next article!
Thanks for reading!
Alex | Zen Elements
I think I’m going to like this! Starting my way to a degree of Computing and Design through the OU next month, so yay for extra reading! ;)
On with the next article!! :D
Olivia
http://www.plurklayouts.com
Nice to have someone bring this subject back up and out in the open. :) Can you do html5/6 next, these first though, always glad to learn.
Peace
Mich D
I’m glad you like the above so far and are looking forward to the future releases. Next article should be soon arriving, if I can be less pernickety about how I’m arranging everything!
@MichDdot, I am also glad to say – having been recently reading through an old batch of my magazines – this has also been running in my mind too and I will be glad to get some things released in HTML 5 / 6 in the next little series.
Thanks for your feedback.
What a great idea! Thanks for sharing your learning :)
You are most welcome, I am glad you liked it and I hope you enjoy the little CSS3 series!
excellent posts!
I have learn these all…
but, one problem is, you have just tested the google Chrome browser version 1.0.xxx, but I find the version 2.0.xxx support some of the CSS3 features, such as background-size and multiple background.
so what if add a Chrome 2.0.156 testing?
@Vocal | Thank you for your feedback and I’m glad you liked them, even if only a recap over what you’ve done so far. I currently only had the G.Chrome v1 to test on, which is why the Browser compatability was only references to that.
I’ll double check I can’t get my hands on v2 and if so, update posts accordingly. Failing that, if you’d like to lend a checking hand and let me know what declarations are supported in v2 via email, I’ll post them up. :)
Hi… IE8 was released. You could update your article telling if it works or not there :) Really great site and good articles!
Thanks for that, Tom :) Something I’d be meaning to get round to!
I wonder if you hazard a guess though before seeing, as to how succesful you think IE8 is with the CSS3 declarations… really Microsoft?
Great, but in Africa most of the users still use IE 6, Mozilla 3- and Opera 9.2-.
Hurry up IE!!! Lets get the red carpet rolling :-)
This is great, thanks! I know it will be a while before it’s really usable, but it’ll be good to know beforehand to get a jump on things.