Des générateurs de styles CSS3
Le W3C, les CCS3 et les navigateurs
Les CSS3 sont toujours en chantier au W3C. Ce dernier publie régulièrement des mises à jour, des working drafts et des candidate releases. Pour suivre cette intense activité, allez sur la page Current work des CSS3, vous pourrez suivre ces évolution.
L'état actuel des recommendations W3C fait que les navigateurs utilisent des préfixes propriétaires pour bien interpréter les nouvelles propriétés CSS3.
Voici les préfixes propriétaires (nommés préfixes vendeurs) :
-moz- : pour le moteur de rendu Gecko utilisé par Mozilla Firefox,
-webkit- : pour le moteur de rendu WebKit utilisé par Safari et Chrome,
-o- : pour le moteur de rendu d'Opera,
-ms- : pour le moteur de rendu de Microsoft Internet Explorer,
-khtml- : pour le moteur de rendu KHTML utiliser par plusieurs navigateurs sous Linux.
Prenons un exemple précis. Nous voulons utiliser la propriétés border-radius qui permet de créer des angles arrondis dans les boîtes <div>.
Voilà la syntaxe utilisée pour être reconnue par «tous» les navigateurs :
header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
Les premières lignes sont respectivement faites pour chaque moteur de rendu listé précédemment. La dernière ligne est l'utilisation de la propriété standard pour tous les navigateurs qui reconnaîtront «plus tard» cette propriété, dès qu'elle sera finalisée par le W3C.
L'ordre des lignes est important. En plaçant la propriété «standard» en dernière position, vous êtes sûr qu'elle prendra le pas sur les lignes précédentes. Donc indiquez d'abord les propriétés avec préfixes, susceptibles d'évoluer, puis terminez par la propriété « officielle ».
Cette syntaxe peut sembler effectivement « lourde », mais elle offre la meilleure évolution, la meilleure portabilité des propriétés en attente d'officialisation.
Pour vous aider à générer du code CSS3 valide pour les différents navigateurs, le Web "regorge" de générateurs CSS3. Je vais vous proposer quelques outils « tout en un », dans les quels vous trouverez « presque » toutes les propriétés CSS3 applicables aux boîtes et au texte.
WestCIV
Ce site WestCIV propose en une seule interface de travailler :- les dégradés linéaire et radial,
- le texte (ombre portée et colonnes),
- les boites (couleur d'arrière-plan, coins arrondis, colonnes et ombre portée),
- les transformations.
CSS 3.0 Maker
Ce site CSS 3.0 Maker vous propose dans une interface hélas très sombre, de travailler :- les coins arrondis,
- les dégradés,
- les transformations, les animations et les transitions,
- la couleur d'arrière-plan en rgba(),
- l'ombrage du texte,
- l'ombrage des boîtes,
- la rotation du texte,
- la gestion des font avec @font-face.
CSS3 Generator
Ce site CSS3 Generator à l'interface bien faite (CSS3), permet de travailler :- les bordures,
- l'ombre de la boîte,
- les dégradés,
- l'opacité.
CSS3 Playground
Ce site CSS3 Playground à l'interface simpliste, permet de travailler :- les coins arrondis,
- les ombres portées des boîtes,
- les ombres portées du texte,
- les transformations,
- les colonnes des boîtes,
- les dégradés
- les bordures et le surlignage (outline),
- la couleur et la l'opacité de l'arrière-plan,
- le texte (fonte, taille, alignement...)
CSS3 Generator
Ce site CSS3 Generator permet de travailler :- Les coins arrondis,
- L'ombre portée des boîtes,
- L'ombre portée du texte,
- La couleur d'arrière-plan en rgba(),
- Les polices avec la règle @font-face,
- Les colonnes de la boîte,
- Le redimensionnement des boîtes (resize),
- Le mode de calcul de la taille des boîtes (box-sizing),
- Le surlignage (outline),
- Les transitions et les transformations
Layer Style
Ce site Layer Style propose dans une interface sobre, mais impressionnante d'interactivité (on se croirait dans Photoshop pour Mac), de travailler :- l'ombre portée de la boîte, externe et interne,
- les dégradés et l'opacité,
- les bordures,
- les coins arrondis.
