Getting ready for CSS3


- Post was last modified on February 21st, 2009.
post-thumb

This was a topic covered in episode 6 of the FS-Air podcast which I am part of (Episode will go out on Friday), and we all shared our views on the subject and the reason why we're excited about it. Because the podcast has time a length limit which we generally stick to I didn't include everything that im looking forward to in CSS3. (As we also covered other points so we generally spend the same time on each section) For anyone who is wondering what the hell CSS3 is, basically it is the new version of the CSS language. The W3 (World Wide Web Consortium) have already started sending out there new version out to various browsers company's and have began referencing it on there website, but with that being said, I don't expect it to be fully supported in browsers for a while yet

Although CSS3 has been sent out to browsers company's it is up to them to support it. Some have taken up the oppurtunity and I know that Safari have some support of CSS3 built in via the webkit, Opera has some support too and also I think Mozilla may have some, but im not sure on that one. Other browsers such as Internet Explorer do not have any support built in and considering Internet Explorer 8 is in Beta 2 at the moment, we probably won't be seeing any signs of CSS3 support in IE until it's final release. But this not being to much of a problem as CSS3 is still in development and the W3 are constantly making new revisions and updates to it.

But for Website Developers CSS3 is a very exciting topic, not because we're completly geeking out on a new update of a coding language but because of what CSS3 will bring to websites, there is so much that everyone's been asking for and the W3 have responded with CSS3 and it's probably going to be one of the most revolutionary changes in website development.

So what new attributes and general features can be looking forward to?

Like I said there are so many new additions coming to CSS3, both big and small but none the less making a difference, and when it's in full swing everyone who develops websites is going to want to try out these new additions but what are the additions? Well there are many but here are some main one's (Generally the one's I think will be benefical)

Shadow:

Shadow/Drop Shadow is the effect of a dark shadow appearing underneath say a container div making it look like it's creating a shadow in it's current postion. At the moment in CSS2, there is no specific attribute that is supported by all browsers to create shadow from just using on attribute set in a stylesheet. There are two ways to probably do it at the moment using multiple divs or using one div and .png image gradient. The mutiple Divs method is very bad as it uses about 5 divs to create the shadow, so the best way to do it in CSS2 would be to create a gradient image save it as .png (For transparency) and then include it one div called shadow, much easier and using less div's takes a bit of time to get the padding and positioning of correct though. But in CSS3 there will (Already is support) for the attribute box-shadow

box-shadow: 10px 10px 5px #888;

This attribute applied to the box div or what div it is would create a automatic shadow! No more .png images and certainly no more crappy multiple div methods!

Three Column website designs

To create a three column website design using CSS2 you would have to use the float attribute and float your div's either left or right and it generally get's annoying, but in CSS3 the W3 have introduced a Multi-Column Module, yes a entire new module to create a 3 column effect. As well as being present in design I can see this module being used to create a newspaper effect in content. Which I can also see being very popular with news blogs.

Attributes that are proposed for this are:

  • column-count - To determine the number of columns into which the content of the element will flow.
  • column-width - To describe the optimal width of each column.
  • column-gap - To set the padding between columns.
  • column-rule - To define a border between columns.

The above are currently proposed attributes and I don't think there any examples of it live yet.

Multiple backgrounds

This is another function which I can see being popular, CSS3 is to include multiple backgrounds, instead of specifying backgrounds in each div that you what a background to appear in. CSS3 will use this simply by specificing URL's to seperate the backgrounds being defined in one div:

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Defiantly good if your a person who creates those fancy gradient backgrounds on your body tag.

How much CSS3 support is in your browser?

As I said at the beginning CSS3 support is currently scattered around and not everything is supported (Yet) but there is a simply way to test if your browser does have some CSS3 support. You can do this by going to the link below:

CSS3 Selector Test

And clicking on the start test button. It tests various new elements that CSS3 has already built in and see's if there are included in your browser. I don't think any browser will get a 100% pass at this time, but it's just something to find out!

CSS3 Info website:

I recently became aware that there is a website set up which covers all of the information you need on CSS3, a great site which gives you info on all the proposed and current additions to CSS3 as well as revision updates, a really good website that covers most of the CSS3 information and updates, and if you want to find out more you defiantly should click here to go to CSS3.info

Well thats basically there my main new additions that im excited about in CSS3. There's so much more new stuff in CSS3 but there my main ones. It's great that us website developers are getting all of these new additions that we've been asking for and even some extra ones too!

2 Reader Comments, Why not join the party?

  •  
  • Fire G
    January 13th

    Great Article James, wish you went this deep DURING the podcast XD.

    Also, as an F.Y.I. The last pre-release version of IE8 (before the final release coming up in a few weeks/month) there's about 43% CSS3 compatibility (seems most of the :pseudo elements arn't supported).

  • James
    January 13th

    Sorry Jon! You know how hard it is sometimes to actually get your words out without sounding like a babbling idiot! And we did cover other sections to, so we've got allow time for those areas as well!

    Thanks for the info on IE8 :)

Leave a Reply





Please Note:

Comments are moderated by both human and automatic resources, to help control the amount of spam comments, as well as unsuitable comments. When you post a comment it should appear instantly, but a comment may be held for moderation if it is deemed suspect for a variety of reasons such as spam, or contains content that may be unsuitable for display. If this is the case you will be notified when you post your comment. Comments are reviewed on a daily basis. For information about comments on James' Blog please click here to read the comments policy.