CSS3: is the right moment to use it?

The draft of the CSS3 code arouse a lot of excitement from the first moment of its announcement,  then seeing the first browsers  (all, except IE) that starter to support  these fantastic proprieties, making simple to achieve even the most complicated thing sent in ecstasy  many web designers  that decided to dedicate body and soul to this novelty, along with HTML5.

The HTML language defines the structure, the fundamental part of the site and leaving it at the mercy of a non standard code, or of js libraries that should  run sites in HTML 5 on non-compliant browsers (like Modernizr) is however a risk.

Different is the story for the CSS code that, by definition, defines the presentation.

For what concerns HTML 5, I think that use the specifics for commercial projects is not the right choice, but nothing prevents you to try it on your personal sites

The presentation

A well structured site, is visible and understandable regardless the CSS is set or not: of course it won’t be beautiful, a website without CSS will be a bit dull and boring, we won’t recognize at the first glance the site we’re in by the colors or the background images… but we’ll continue to use the information that the web has to offer.

This means one single thing: that CSS is an accessory. Without which you wouldn’t dream to create a website, but however it’s an accessory.

Seems bad to say or even to think, from web designers or enthusiastics of the field, but it’s it. On the other hand, this sad truth  gives us the leisure to be able to experiment in a more free way, because the important thing is that the site is usable. Moreover, there’re the half measures, it’s not true that between  an extraordinary website and a page with formatting  there can’t be something “cute”.

CSS 2.1 made friends with CSS 3

The best thing is that setting the style with CSS 3 doesn’t mean you have to renounce to CSS 2.1, therefore the idea would be to create a great site with CSS 2.1, visible on the browsers currently in the circulation and then make them better thanks to CSS 3, to improve the users experience of who uses modern browsers (or not, using javascript).

You’re probably wondering what would we do without that certain shadow behind the title that makes the whole thing harmonious? Do you think that probably those rounded corners are necessary? You don’t want to renounce to the gradient, or to the inside shade of that box?

You probably know that what I mentioned are proprieties defined by CSS 3, proprieties that improve the aesthetics and for this reason  “ not absolutely necessary”. But to create the effects of  such proprieties , in the recent past, many techniques have been used, each one with its own problems

Rounded corners are without doubts one of the most evident and emblamatic changes: ” a symbol of the revolution”.

Rounded corners

Rounded corners are very popular a long time before the CSS3 draft, already at the times of  table design: rounded corners (but even straight) were designed in the small images to put in board tables.

Advanced in the years, when div and CSS started to spread, the techniques are different and there are many still in vogue, all of them involve the use of at least one image (that contains all four corners, rather  big) and the addition of the non semantic HTML tags in  a greater number according to the flexibility requested.

For example, if your div with id “box” must have rounded corners you can’t just put a background image with rounded corners inside the #box because  if the user would resize the text, this could overflow from your box.

Therefore you should set two background images and as this is another propriety added by CSS3, the only way to do in the previous versions is to add a non semantic tag to which to give the second background (always the same image but positioned differently). This way resizing the text, also the box enlarges accordingly.

If the layout was fluid (i.e. resizing horizontally automatically according to the width of the browser window), you should still add non semantic markups and give to each tag its background corner.

There are many techniques that try to minimize the non semantic markups, but the quantity of code necessary is always a lot and also the CSS lines aren’t a few.
For example look at  this technique: 6 div, a paragraph, a background image and 35 lines of  CSS code.

For an unnecessary thing like the aesthetic of a box it seems really excessive.
It’s true, that it can be improved, but you’ll never get the same synthesis of CSS3.

To create the effect with CSS3, one paragraph is enough (perhaps with an assigned class) and the border- radius property, in which you specify  the number of px of the radius.

In reality at the moment we have to write a code like this:


-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

to ensure that everything is visible on browsers based on webkit (Safari and Chrome) and on Firefox (prefix “moz”); while Opera and the new versions of Safari are satisfied with the simple “border-radius”.:

Obviously Internet Explorer doesn’t support anything of all this, up to version 9, for which however it seems necessary to declare the radius of each corner (e.g.: border-radius: 15px 15px 15px 15px;).

Borders, shadows, gradients and many beautiful things… but IE?

For the gradients or the shadows inside the boxes, you have always used background images, sometimes even for the outside ones, even if you have had problems similar to the rounded corner ones.

For the shadow effects on the text, you have preferred to use some images that would render the idea, but CSS3 has some synthetic and fast solutions for all these things.

Perhaps you are one of the few people that still have at heart (rightly) the users of Internet Explorer, especially versions prior to 9 (as XP is not upgradeable).

However I must say that in this case there’s nothing to be worried about. If your site is well structured, the embellishments added with CSS3 are only decorations that make the site more pleasant to the eye of users of other browsers to what already is without these attentions. And the IE users won’t miss it.

Although , after realizing this, I can say that it’s still possible to use a js library, like CSS3PIE,  easy to implement, that can render the CSS proprieties even on Internet Explorer 6-8.

So, can I use CSS 3?

At the light of these considerations, my idea is that it is possible the use of CSS3, always better on projects you can control, so that you can update the code if necessary.
The advantages are obvious: lighter pages, more semantic markups, easy to modify an effect without having to enter obligatory in an image editor, simply just changing a couple of parameters.

The disadvantages are in the fact that it’s still not a standard, therefore some specifics are subject to change (even if it’s known , the browsers make the standard, if mostly all the browsers have implemented the functions, unlikely they will disappear) and for the same reason it’s not usable in  PA sites. The other disadvantage is  the lack of compatibility with IE, that we saw how to avoid in a more than acceptable way

Comparing the pros and cons between CSS3 and the old techniques, I think that the winner is CSS3.

But how can I use it?

My advice is to write the CSS3 proprieties on a different style sheet, separated from the rest, so that the finding of the code is more immediate and more easier to change if necessary.

Useful links and conclusion

While I was finishing the writing of this article, among my feeds I came up with this article written by Dave Sparks on Smashing Magazine,  it’s very in-depth and shows some real- world examples respect to the discussion made, besides indicating other javascript libraries for the CSS3 support; obviously I advice you to read it.

I would also like to point out this useful compatibility table CSS 3 and HTML 5 with the different browsers and this handy tool that generates the CSS 3 code according to the parameters you set, so that you can start using CSS3 in your projects, rather than an avalanche of non semantic markups and background images.

Or you’re already using it? Do you use any js libraries for the compatibility or you’re not interested? Let me know what you think!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Passionate and professional web-designer, she knows deeply (x)HTML/CSS, loves to experiment PHP & js scripts and is always ready to learn new practices and techniques. She prefers a sober design for web-sites, with particular attention on usability and accessibility, moreover on what is under the shell: the code, strictly standard.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

7 comments

Trackback e pingback

  1. xhtml css templates – CSS 3: is is the right moment to use it? | Your Inspiration Web | XHTML CSS - Style sheet and html programming tutorial and guides
    [...] this article: CSS 3: is is the right moment to use it? | Your Inspiration Web Share and [...]

Leave a Reply

Current day month ye@r *