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
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
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 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
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!
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 »