Website Design: What will CSS3 bring to the table

With the Internet Explorer not supporting even some of the CSS2.1 features, it’s not a surprise that work on CSS3 has been going on since 1999 and still it’s only the Safari browser that supports some of its stellar features. But it doesn’t mean we cannot CSS3-enable our website designs so that whenever the mainstream browsers catch up with CSS3 coding features, you’re already prepared. Here’s the link where you can test if your browser is CSS3-ready.

Personally, my favorite enhancement is the way we’ll be able to handle the background images. Currently we can use only a single image behind a DIV or an HTML tag. In CSS3, we’ll be able to use 8 images. This will be great if you want to create those famous rounded corner boxes or fancy navigation schemes without having to write tons of inline markup.

Another great feature is the styling of the various hyperlinks. You have many kinds of hyperlinks on your website. There could be URLs, there could be inner links (that belong to your own domain) and there could even be the email links (for instance, mailto:). For example, if you have this code in your CSS3 definitions file:

a[href^="http:"] {
background: url(img/image-for-external-link.gif) no-repeat right top;
padding-right:15px;
}

All the external links with appear with a different background image. If you want an email icon to appear with your Contact us email link, you can use the following CSS3 definition:

a[href^="mailto:"] {
background-image: url(img/email-image.gif); no-repeat right;
}

With CSS3 there is no need to use images and increase your page size if you want to display shadow under your text. For instance,

h1 {
text-shadow: 3px 3px 6px #333333;
}

will display shadow under your heading text.

With people accessing websites using all sorts of devices such as TV, PDA, hand-held devices, display panels, and of course computers and laptops, in CSS3 you’ll be able to create “profiles” for different types of media so that your web pages look good everywhere.

Presently, I think the current version CSS has all the features an average website needs to look good as well as be accessible. The problem actually is not with the standard or features, the problem is with incompatibility or non-compliance. A majority of people use  Internet Explorer and this is a browser that fails most miserabley when it comes to rendering/supporting the CSS-based designs.

You can read more on the current state of CSS3 Working Group progress.

Go back