Quelques nouveautés incontournables de css3

Cet article est voué à devenir obsolète dans les mois ou années qui viennent avec l’implémentation de css3 dans les navigateurs contemporains. Certaines nouvelles déclaration sont prometteuses, rendant accessible par css des effets graphiques qui demandaient jusqu’il y a peu de passer par des images, des hacks, du javascript ou du surcodage.

CSS pour le futur

Le langage CSS a été mis en place au milieu des années 90’ et a connu plusieurs versions depuis. La version qui sert de base au codage actuel, la "2.1" a été officiellement adoptée en 2007 et n’est toujours pas implémentée partout.
CSS3 n’est pas encore officiellement adopté partout mais plusieurs navigateurs tirent vers l’avant cette norme de description css en reconnaissant certaines déclarations.

Voici celles qui nous paraissent rapidement utilisable.
un site web de test pour plusieurs des déclarations ci-dessous : css3 generator.

Box shadow

La déclaration "box-shadow", comme son nom le laisse entendre, permet de mettre une ombre portée à un élément de type block.
Voici un exemple rapide :

box-shadow: 0 0 40px #BDBAB2;

Plusieurs paramètres sont à donner :
1) décalage horizontal vers la droite (ici 0)
2) décalage vertical vers le bas (ici 0)
3) étendue du dégradé (ici 40px)
4) la couleur (ici #BDBAB2)

Pour rendre la déclaration compatible avec de vieilles versions de safari et firefox et quelques autres logiciels, on devra déclarer plusieurs fois le box shadow en le précédent de préfixes - moz- et -webkit-, et ce pour encore quelques années.

Donc voici un code complet

box-shadow: 0 0 40px #BDBAB2;
-moz-box-shadow: 0 0 40px #BDBAB2;
-webkit-box-shadow: 0 0 40px #BDBAB2;

Un article plus complet sur Alsacréations
Un autre sur mamouthland

Text shadow

Il est aussi possible de donner des ombres aux éléments de texte eux-mêmes.

text-shadow:1px 1px 2px #666;

De nouveau, les paramètres gèrent le décalage en x et y, puis la dose de flou et la couleur.
Note : Internet explorer ne reconnait pas la transparence de texte.
Voir le lien vers alsacréations pour plus d’info.

Transparences des blocs

On peut donner à des éléments une transparence en réglant le paramètre opacity :

opacity:0.5;

Opacity prendre une valeur entre 0 (transparent) et 1 (opaque).
Comme Microsoft veut imposer ses propres normes, il existe un bidouille pour rendre l’opacité fonctionnelle avec explorer :

opacity:0.5;
filter : alpha(opacity=50);

Transparence de couleur

On peut aussi rendre partiellement transparente une couleur en lui associant une valeur en rgba :

color:rgba(255,0,0,0.5);

les trois premiers paramètres sont les valeurs du rouge, vert et bleu entre 0 et 255, puis l’opacité de la couleur entre 0 et 1.

Fantastique, mais toujours pas reconnu en Explorer
Voir l’article sur le sujet sur alsacréations.

Box borders

Les coins d’un bloc peuvent enfin être arrondis avec css3, sans devoir utiliser des images de fond...
Les bords arrondis sont reconnus par tous les navigateurs contemporains (Explorer 9 les accepte).

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

Remarquez les deux déclarations permettant la reconnaissance par les vieux navigateurs Safari et Firefox.

Sachez qu’il est possible de préciser les arrondis de chaque coins séparément, comme ceci par exemple :

border-radius: 5px 10px 0 5px;

Polices embarquées

Les polices utilisables dans une page web sont par défaut celle qui sont présentes dans le système de l’ordinateur utilisé. Il est possible depuis longtemps de charger une police personnelle, mais c’est seulement avec css3 et les polices open source que cette solution est viable.

L’utilisation de polices personnalisées reste complexe cependant pour deux raisons :
- il est nécessaire de posséder les droits d’utilisation de ces polices. On peut utiliser aujourd’hui pas mal de polices ouvrant ces droits, mais n’importe qui d’un peu malin peut, comme pour une image, télécharger la police depuis votre site et ensuite l’utiliser sur son ordinateur, ce qui est problématique.
- Les navigateurs ou nouveau médias (tablette, smartphone) ne suivent pas les mêmes standards. Pour faire face à tous ceux-ci, il faut pas moins de 4 fichiers : TrueType pour Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+, EOT pour Internet Explorer 4+, WOFF pour Firefox 3.6+, Internet Explorer 9+, Chrome 5+ et SVG pour iPad and iPhone

Fabriquer ces fichiers et les déclarer dans la css est encore un peu compliqué donc. Conseil final : suivez la procédure sur le site web de fontSquirrel. Ils mettent à disposition un nombre élevé de "fontface kits", ou kits tout fait pour l’utilisation de ces polices.
Voir le site des fontface kits sur le site fontsquirrel

Medias queries

Les medias queries permettent d’adapter un comportement css à certaines configuration de la page. Typiquement, pour réduire les tailles de polices pour les petits écrans, ou repèrer si on est sur une tablette ou un smartphone. Impossible de couvrir le sujet dans cet article en forme d’overview, voici un exemple simple :

@media screen and (max-height:600px){
#general {
width:400px;
}
}

Voir un article à ce sujet sur le site de Mamouthland

Sélecteurs

On peut aussi sélectionner des éléments de manière plus précise qu’en css 2.1 : le premier paragraphe d’un bloc, ou le troisième, etc.
Un article au sujet des nouveaux sélecteurs sur le site de Jérôme Debray