• Flux RSS
• Twitter

• Accueil
• Prestations
• Compétences
• Réalisations
• Blog
• À propos
• Contact

Vous êtes ici : Accueil > Blog > CSS > Utilisation de CSS3

Utilisation de CSS3

Dans cet article, le site « Accesbilis » va servir de base pour illustrer les nouveautés apportées par CSS3 et utilisables dès maintenant.

L’usage de CSS

Les feuilles de style CSS permettent de définir la mise en forme des éléments d’un document (X)HTML ainsi que leur mise en page. Un fichier CSS contient plusieurs règles, chacune d’elles respectant la syntaxe suivante :

sélecteur {
propriété1:valeur1; /* une déclaration */
...
propriétéN:valeurN;
}

Le sélecteur fait référence à un élément du document auquel s’appliquent les déclarations de la règle.

Une propriété décrit un aspect de la présentation de l’élément ou son placement.

Les CSS proposent des fonctions typographiques de base. Elles permettent de styler un texte, en précisant sa police de caractères, sa taille, sa graisse, sa couleur, son alignement ou encore l’espacement entre les lignes. Elles offrent également la possibilité d’ajouter une image et une couleur d’arrière-plan à chaque élément. Un effet visuel peut être associé à une action utilisateur telle que le survol d’un lien à la souris ou l’accès du lien lors d’une navigation au clavier.

Outre leur utilisation pour mettre en forme les éléments d’un document (X)HTML, les CSS servent également à leur mise en page, contrôlent leur positionnement ainsi que l’espacement qui les sépare.

La version 2.1 des CSS est en phase finale de standardisation. Elle est supportée par les navigateurs du marché. Les sélecteurs d’attributs et d’éléments voisins ne fonctionnent pas tous avec Internet Explorer.

La disponibilité de CSS3

Le W3C travaille actuellement sur la future version CSS3 qui offre de nouvelles possibilités de mise en forme des éléments (X)HTML mais aussi de mise en page plus sophistiquée que le positionnement flottant parfois difficile à mettre au point. Les navigateurs les plus récents n’ont pas attendu la sortie officielle de la spécification de CSS3 par le W3C pour expérimenter de nouvelles propriétés.

Selon les versions plus ou moins récentes des navigateurs, il peut être nécessaire de rajouter un préfixe devant le nom d’une propriété CSS3 :

• -webkit- pour les navigateurs utilisant WebKit (le moteur de Safari, Safari mobile, Chrome),
• -moz- pour les navigateurs utilisant Gecko (moteur de Firefox),
• -o- pour Opera.

Certains navigateurs supportent déjà les propriétés sans préfixe. Chaque navigateur parcourt la liste des déclarations, retient celle qu’il intègre et ignore les autres.

Pour éviter les erreurs, l’utilisation de l’outil en ligne CCSPrefixer permet de générer les déclarations CSS3 avec les bons préfixes.

Les apports de CSS3

Effets visuels

Les CSS3 permettent de créer des coins arrondis, de gérer la transparence d’un élément, d’introduire des images de fond multiples, d’appliquer une ombre portée à un texte ou à un bloc, d’afficher un dégradé de couleurs, d’utiliser des polices externes, de définir une bordure avec une image. Sans CSS3, la réalisation de ces effets passe par la création d’images supplémentaires.

Animations

Sans utiliser de code JavaScript, CSS3 permet de réaliser des transformations 2D et 3D (rotation, agrandissement, déplacement…), de gérer le changement de la valeur d’une propriété en spécifiant la durée de la transition, sa courbe de vitesse, le début de son déclenchement. Ces animations sont activées au survol d’un élément à la souris ou lors de la prise du focus.

Mise en page

CSS3 offre la possibilité d’afficher un texte sur plusieurs colonnes sans utiliser le positionnement flottant.

Une dégradation élégante sans CSS3

Utiliser CSS3 dès maintenant consiste à profiter de nouvelles possibilités tout en s’assurant que l’interface utilisateur s’affiche correctement dans les navigateurs plus anciens. L’affichage n’est pas identique partout mais l’interface reste utilisable, perceptible, navigable et robuste avec ou sans CSS3.

Pour garantir cela, le site « Accesbilis » intègre certains effets visuels et animations 2D mais laisse de côté les nouvelles possibilités de mise en page. Si un navigateur ne supporte pas les coins arrondis ou les transformations 2D, l’interface reste utilisable, ses fonctionnalités n’étant pas altérées, ni sa mise en page.

Pour garantir cette dégradation élégante, il est nécessaire de tester l’interface sur les navigateurs les plus fréquemment utilisés.

Les coins arrondis

Supporté par : IE 9, Firefox 1+, Safari 3+, Chrome 3+, Opera 10.5+

Propriété : border-radius

Elle permet d’arrondir les coins d’un élément sans avoir recours à des images de fond.

Coins arrondis

Les items du menu principal de navigation du site « Accesbilis » ont leurs coins supérieurs gauche et droit arrondis. Ce qui se traduit par la règle suivante :

#navigation a {
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}

Opera et IE 9 supportent la propriété border-radius sans préfixe.

Les coins sont arrondis selon un rayon de 5 pixels.

Dans l’ordre :

• 5px pour le rayon du coin supérieur gauche,
• 5px pour le coin supérieur droit,
• 0 pour le coin inférieur droit.
• 0 pour le coin inférieur gauche.

Les ombres

Supporté par : IE 9, Firefox 3.5+, Safari 3+, Chrome 3+, Opera 10.5+

Propriété : box-shadow

Elle permet de rajouter une ombre à un élément pour renforcer le relief.

Ombre portée sur le menu secondaire

Les menus secondaires placés à droite du contenu sur le site « Accesbilis » sont mis en relief grâce à la règle suivante :

.bloc-sidebar {
-webkit-box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.5);
}

Opera et IE9 utiliseront la dernière déclaration.

Dans l’ordre :

• -4px décale l’ombre de 4px vers la gauche sur l’axe horizontal,
• 4px décale l’ombre de 4px vers le bas sur l’axe vertical,
• 10px indique l’étalement du flou,
• rgba indique la couleur noir (0,0,0) avec une opacité de 50% (0.5)

L’outil en ligne hex2rgba convertit les couleurs hexadécimales en couleurs rgb.

Pour obtenir une ombre portée tout autour d’un bloc, il suffit de remplacer les deux premières valeurs (-4px et 4px) par 0 :

.bloc-sidebar {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Les transformations 2D

Supporté par : IE 9, Firefox 1+, Safari 3+, Chrome 3+, Opera 10.5+

Propriété : transform

Elle permet d’agrandir un élément (scale), de le faire pivoter (rotation), de le déformer sur deux axes (skew), de le déplacer selon les coordonnées x, y (translate).

Item du menu secondaire agrandi

Au survol des items des menus secondaires à droite du contenu du site « Accesbilis », la taille du lien est multipliée par 1.1, ce qui se traduit par la règle suivante :

.bloc-sidebar a:hover, .bloc-sidebar a:focus, .bloc-sidebar a:active {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}

Les fontes

Supporté par : IE 6+, Firefox 1+, Safari 3+, Chrome 3+, Opera 10.5+

Sélecteur : @font-face

Ce sélecteur permet d’intégrer des nouvelles fontes sans qu’elles soient nécessairement installées sur le poste client. Elles sont récupérées à partir du serveur sur lequel elles sont installées.

Pour ces titres de sections, le site « Accesbilis » utilise la fonte Fertigo Pro Regular créée par Jos Buivenga (Exljbris) et récupérée sur le site MyFonts.

@font-face {
font-family: 'FertigoProRegular';
src:url('fonts/FertigoProRegular/fertigo_pro-webfont.eot');
src: local('FertigoProRegular'), url('fonts/FertigoProRegular/fertigo_pro-webfont.ttf') format('truetype');
}

Le site Font Squirrel propose l’outil « @font-face generator » qui génère des fontes au format TrueType pour la plupart des navigateurs et au format EOT pour Internet Explorer à partir d’un fichier .otf (Open Type Font file).

Le sélecteur font-face est supportée par tous les navigateurs y compris IE 6+.

L’opacité

Supporté par : IE 9, Firefox 1+, Safari 3+, Chrome 3+, Opera 10.5+

Propriété : opacity

Elle permet de définir le niveau de transparence d’un élément et de ses descendants. La valeur à fournir varie de 0 pour une transparence totale à 1 pour une opacité complète.

Opacité des icons de partage

Dans une version précédente du site « Accesbilis », les icons de partage vers les réseaux sociaux ont une opacité de 0.7. Ils deviennent opaques au survol de la souris ou lorsqu’ils disposent du focus clavier.

.share img {
filter: alpha(opacity = 70); /* internet explorer */
opacity:0.7;
}

.share a:hover img, .share a:focus img, .share a:active img {
filter: alpha(opacity = 100); /* internet explorer */
opacity:1.0;
}

Pour les versions antérieures d’Internet Explorer, il faut passer par la propriété filter et exprimer la valeur d’opacité en pourcentage.

Les dégradés

Supporté par : Firefox 3.6+, Safari 4+, Chrome 2+, Opera 11.1+

Propriétés : background-image, list-style-image, border-image

Il est possible de créer un dégradé entre deux couleurs sans avoir recours à une image d’arrière-plan. C’est le mot-clé gradient qui permet de définir un dégradé. Il est toujours associé au préfixe spécifique à chaque navigateur. Pour Internet Explorer, il faut passer par la propriété filter. Les couleurs sont exprimées en hexadécimal sauf pour Opéra qui utilise le modèle de couleur rgb.

Dégradé de couleurs sur un bouton

Sur le site « Accesbilis », un dégradé linéaire de haut en bas est appliqué au bouton de soumission du formulaire de la page Contact.

#formContact input#bouton {
background-image: -webkit-gradient(linear,left top, left bottom,from(#f3efe6),to(#d9d1ba));
background-image: -moz-linear-gradient(top,#f3efe6,#d9d1ba);
background-image: -o-linear-gradient(top,rgb(243,239,230),rgb(217,209,186));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff3efe6, endColorstr=#ffd9d1ba);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff3efe6, endColorstr=#ffd9d1ba)";
}

Ressources

• Compatibilité des navigateurs concernant CSS3, html5, svg
• État d’avancement de la spécification de CSS3
• Tutoriaux du W3C sur CSS3
• Le petit journal permanent de CSS3
• Tutoriaux CSS3 d’Alsacréations
• Livre : CSS3 pour les Web Designers de Dan Cederholm chez Eyrolles

rédigé par Claire Bizingre le 21 mars 2011 dans CSS - Pas de commentaires

Compléments

Outils