Utiliser un CMSAprès des années de bons et loyaux services, le CSS 2 va disparaître ou plutôt il va fusionner avec le CSS 3. En fait, vous avez déjà sûrement visité des sites qui exploitent le CSS 3 sans le savoir. Si vous visitez un site et qu'il s'adapte automatiquement selon votre résolution de moniteur alors c'est le CSS 3 qui permet de le faire. À la base, l'objectif du CSS 3 était d'alléger au maximum les pages en implantant des effets tels que l'ombrage du texte et des blocs et la création d'angles arrondis à la volée. Au fur et à mesure de l'évolution du langage, le CSS 3 permet aussi d'utiliser plusieurs arrière-plans sur un seul élément, de jouer avec l'opacité ou encore de créer des dégradés.
Les effets spéciaux du CSS 3
Parmi les effets spéciaux les plus attendus du CSS 3, on avait les angles arrondis sur les éléments DIV. Un menu avec des coins arrondis est excellent pour le design, mais sa création avec le CSS 2 était fastidieuse. En fait, il fallait créer des images qui correspondaient exactement à la dimension du bloc et de faire en sorte qu'ils coïncident. Il fallait que ce soit précis au pixel près sinon c'était la catastrophe. Il fallait aussi emboîter plusieurs éléments DIV pour obtenir cet effet sur les 4 angles de l'élément. Mais c'est une époque révolue avec le CSS 3, car le style « border-radius » peut le faire en une seule ligne de code ! Vous devez juste spécifier le degré de l'angle pour obtenir un effet plus ou moins accentué. Mais ce n'est pas le seul effet du CSS 3, car on a aussi les ombrages.
Un ombrage est un effet qui permet d'ajouter une ombre avec différents niveaux d'opacité. Le CSS 3 permet de le faire avec du texte avec le style text-shadow, mais aussi dans les éléments DIV avec le style box-shadow. La beauté du CSS 3 est qu'on peut utiliser plusieurs couleurs et ombres sur un seul élément. Cependant, l'abus de ces styles risque de perturber le design. Mais le principal avantage est qu'on n'aura quasiment pas besoin d'images pour les maquettes de ses sites. En effet, on peut créer de très beaux sites avec de l'ombrage et des coins arrondis. Et si cela ne vous suffit pas, vous pouvez désormais aussi régler l'opacité d'un élément sans compter l'utilisation des arrière-plans multiples. Mais même si le CSS 3 promet de belles choses, on se rend compte que les entreprises des navigateurs font tout pour gâcher le plaisir avec leur code propriétaire.
Le cauchemar de la compatibilité du CSS 3
On a mentionné que si vous voulez créer un effet d'ombrage, vous devez utiliser le style box-shadow. Cette syntaxe est la norme pour le W3C, mais si vous l'utilisez et que vous affichez la page dans Firefox, alors cela ne fonctionnera pas. Le fait que Firefox ne suit pas toujours les recommandations du CSS 3 et il faut qu'on ajoute le préfixe -moz- au style standard pour que cela fonctionne. Et donc, cela devient -moz-box-shadow... Et si c'était uniquement Firefox ! Chrome et Google privilégie le Webkit et donc, le préfixe devient -webkit-box-shadow. Cependant, Opera tire son épingle du jeu en respectant la norme du W3C, mais si cela ne marche pas alors il faut utiliser son préfixe qui est -o-box-shadow. On voit que c'est une véritable jungle même si les versions les plus récentes de ces navigateurs supportent assez bien les normes du W3C. Mais quoi qu'il en soit, le chemin est encore long pour que les développeurs ne soient pas obligés de répéter les mêmes styles pour garantir la compatibilité.
Mais il y a un style où tout le monde fait ce qu'il veut et c'est la création de dégradés. Le CSS 3 permet de créer facilement des dégradés, mais aucun navigateur ne supporte la norme du W3C. Il faut obligatoirement utiliser leurs préfixes et c'est pourquoi la création de dégradés avec des images est plus facile. Si toutes les entreprises qui conçoivent des navigateurs respectaient les normes du W3C, le CSS 3 aurait pu être le paradis des Webdesigners.