An exploration of CSS3 (1/2)

Over the next two blog posts, we shall be conducting a look into the latest generation of CSS and HTML. Yes, that’s right: this is a two-part series. So, lets get started:

What is CSS3?

Firstly, for those that do not know, CSS stands for Cascading StyleSheet. A Cascading StyleSheet is a file that contains the styling information of a website.

In the old days, styling was added into the HTML documents direct, embedded in the html code, which would prove a nightmare if you needed to make a change that affected every page on a website.

The solution was simple: to create and introduce a new means of applying style, a means which all style information would be stored in a separate file, and called upon where necessary.

The result was simpler HTML files containing mainly content, and a CSS file containing all the presentation information. For a number of reasons, CSS made website development more efficient.

So, what’s new?

Well, quite a lot, that will save many developers much time.

We quite like the look of:

• Shadows – for boxes and text – finally a method to add a shadow to a div, without resorting to old tricks, such as playing with borders, adding div’s behind div’s, just a little offset, etc.
• Border-Radius – border radius is fantastic for adding that smooth rounded edge to a div or image – it really is amazing, and saves so much time, having to round the edges of an image, or create an image to add the effect to a div.
• RGBA backgrounds – supporting opacity – it can often be frustrating if you find a colour you want to use for your background, but it’s just that little bit too dark to match your scheme, so you find an alternative, but it’s just not the same, it just isn’t.
• Columns – it will be possible to create a div that will split it’s text up, automatically, into a specified amount of columns. This will be great! Recently, when developing a website for a client, a list in the footer needed to be split into 3 columns, which required some effort to get the data, and distribute it evenly across three div’s. This is time that web designers will no longer need to waste on such a trivial task!
• Gradients – I have yearned for gradients in CSS for quite a while – in fact when I was learning CSS, I was quite shocked to find that it was not an option.

There are more to be explored, but we’re just going to highlight a handful, of what we consider to be the best five that will have the most significant impact upon web design in the not-to-distant future.

Verdict

CSS3 is great – it does represent a great step forward in supplying designers with options that will make design easier, but we cannot fully recommend it because:

• CSS3 is still not fully supported, despite the first CSS3 drafts being written 13 years ago, and CSS4 drafting since September 2009.
• Internet users are often slow to update their browser, and although Google Chrome, and Mozilla Firefox have taken measures to automatically update their users for them, some browsers, such as Safari and Internet Explorer do not do this. With the majority of user’s likely to be running outdated browsers, it will take a long time before there is enough support to warrant the full and proper use of the third generation of the Cascading Style Sheet.

In the next blog post, we will aim to explore HTML5, and determine what it has to offer.

Exciting stuff!

Webetecture

Web Design, Maintenance, SEO & Hosting services