---

Les feuilles de styles CSS ont été créées il y a 13 ans et CSS 2.1, la norme la plus largement adopté à ce jour, existe depuis 11 ans. En observant l'écart entre les sites Web créés à cette époque et ceux d'aujourd'hui, on constate l'ampleur du chemin parcouru. Au fil des ans, le développement Web a vraiment évolué dans des directions toujours plus surprenantes.

Dès lors, on peut s'interroger. Pourquoi, dès qu'on parle de CSS, se retrouve-t-on embourbé dans nos habitudes, incapable d'expérimenter ? Pourquoi continuons-nous d'utiliser du code CSS spécifique à chaque navigateur et du Javascript pour gérer la présentation ? Pourquoi n'utilisons-nous pas les nouveautés de CSS 3 disponibles dans les navigateurs modernes pour améliorer la qualité graphique de nos sites ?

C'est le moment d'utiliser ces nouveautés dans nos projets. Il ne faut pas avoir peur d'exploiter progressivement les propriétés et sélecteurs CSS 3 dans nos feuilles de style. Informer nos client des avantages de CSS 3 (et contribuer au déclin des navigateurs obsolètes) est en notre pouvoir. C'est même de notre responsabilité, en particulier si cela implique de produire des sites Web plus souples pour diminuer les couts de développement et de maintenance.

Cet article va vous présenter quel sont les avantages de CSS 3 et des exemples de mises en œuvres concrètes par certains Webdesigners. L'ambition, c'est qu'à la fin de votre lecture vous sachiez quoi attendre de CSS 3 et comment l'utiliser dans vos projets.

N'hésitez pas également à lire cet autre article sur le sujet :

• Push Your Web Design Into The Future With CSS 3

L'utilisation des propriétés spécifiques des navigateurs

Aujourd'hui, la plupart des propriétés CSS 3 disponibles sont préfixées de manière spécifique par chaque navigateur. En effet, d'une part les fabricants de navigateurs n'ont implémenté qu'une toute petite partie des propriétés CSS3 et d'autre part une partie des propriétés ne seront peut être jamais normalisées par le W3C. Cela permet donc de différencier les propriétés spécifiques aux navigateurs en cour de normalisation des propriétés déjà standardisées (quitte à remplacer une version spécifique par la version standards le jour ou la norme sera stabilisé).

Cette approche à bien sur des défauts, a savoir des feuilles de style surchargé et un design inconsistant d'un navigateur à l'autre. Après tout, nous ne voulons plus gérer des feuilles de styles spécifiques pour chaque navigateur. Tout le monde se souvient des balises propriétaires de mise en forme que furent <marquee>, <blink> et bien d'autres, largement employé dans les années 90. Elles continuent de rendre certain site web inconsistant si ce n'est complètement illisible. Nous ne voulons surtout pas nous retrouver dans une tel situation, n'est-ce pas ?

Ceci étant dit, n'oublions pas que les sites web n'ont pas à être parfaitement identiques dans tous les navigateurs. Ainsi, le fait d'utiliser des propriétés spécifiques pour réaliser certains effets sur certains navigateurs peut parfois avoir du sens.

Les préfixes les plus communs sont ceux utilisés par les navigateurs utilisant Webkit (Safari par exemple), qui à la forme -webkit-, et par les navigateurs utilisant Gecko (Firefox par exemple), qui à la forme -moz-. Konqueror (-khtml-), Opera (-o-) et Internet Explorer (-ms-) ont aussi leur propre préfixe.

L'utilisation de ses propriétés spécifiques nous conduira à produire un code CSS non-standard. En temps que webdesigners professionnels, nous ne devons pas l'oublier. En effet, les puristes pourraient soutenir que l'utilisation de ces propriétés dans une feuille de style finalisée n'est pas une très bonne idée. Cependant, lorsqu'il s'agit d'expérimenter ou d'apprendre, nous pouvons envisager de les inclure dans nos feuilles de styles tout en les couplant avec les propriétés standards.

Liens utiles

• Vendor-specific extensions and W3C
• Vendor-specific extensions to CSS3
• Vendor-specific properties

1. Sélecteurs

Les sélecteurs CSS sont un outil incroyablement puissant : ils nous permettent de cibler des éléments HTML spécifiques au sein de notre balisage sans avoir à recourir à des class, des ID ou du Javascript superflue. La plus part d'entre eux ne sont pas une nouveauté de CSS 3 bien qu'ils ne soient pas utilisés autant qu'ils le devraient. L'utilisation adéquate des sélecteurs peut être d'un grand secours si vous essayez de réaliser un balisage à la fois propre et léger afin de mieux séparer le fond de la forme de votre site. Ils peuvent permettre de réduire le nombre de classes et d'ID dans le balisage et rendre les feuilles de style plus simple à maintenir par les designers.

Les sélecteurs d'attributs

3 nouveaux sélecteurs d'attributs font partie de la spécification CSS3 :

• [att^="valeur"]
  Cible les éléments ayant un attribut "att" dont le contenu commence par "valeur"
• [att$="valeur"]
  Cible les éléments ayant un attribut "att" dont le contenu se termine par "valeur"
• [att*="valeur"]
  Cible les éléments ayant un attribut "att" dont le contenu contient la chaine "valeur"

tweetCC utilise un sélecteur d'attribut pour cibler les liens dont l'attribut title se termine par le mot "tweetCC" :

a[title$="tweetCC"] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
}

Implémentation dans les navigateurs : Le seul navigateur qui ne supporte pas les sélecteurs d'attribut est IE6. Que ce soit IE7 ou IE8, Opera et les navigateurs basés sur Webkit ou sur Gecko, ils les supportent tous. De fait, utiliser ces sélecteurs dans vos feuilles de style est parfaitement sûr.

Les sélecteurs combinatoires

Le seul nouveau sélecteur combinatoire introduit dans CSS 3 est le sélecteur globale d'éléments voisins (sibling). Il permet de cibler tous les voisins d'un élément qui ont le même élément parent.

Par exemple, pour ajouter une bordure grise à toutes les images qui sont voisines d'une div particulière (la div et les images ayant le même parent), utilisez simplement la règle de style suivante :

div~img{
    border: 1px solid #ccc;
}

Implémentation dans les navigateurs : Le seul navigateur qui ne supporte pas le sélecteur d'élément voisin est notre petit chouchou : Internet Explorer 6.

Les pseudo-classes

L'ajout le plus important de CSS 3 à la norme CSS est probablement l'ensemble des nouvelles pseudo-classes. Celles qui suivent sont sans doute les plus intéressantes et les plus utiles

• :nth-child(n)
  Permet de cibler des éléments en se basant sur leur position dans la liste des enfants de leur élément parent. La valeur "n" peut être un nombre, une expression numérique ou les mots clé odd (paire) ou even (impaire) (idéal pour créer des lignes de tableau avec des alternances de couleurs). Par exemple, si vous voulez cibler un groupe de trois éléments après le quatrième élément vous n'avez qu'à écrire :
  

  :nth-child(3n+4){background-color: #ccc;}

• :nth-last-child(n)
  Sur la même logique que la pseudo-class précédente, mais uniquement pour cibler les derniers éléments enfant d'un parent. Par exemple, pour cibler les deux derniers paragraphes d'une DIV, nous n'avons qu'à utiliser la règle suivante :
  

  div p:nth-last-child(-n+2)

• :last-child
  Cible le dernier enfant d'un élément parent. C'est équivalent à :
  

  :nth-last-child(1)

• :checked
  Cible des éléments cochés, par exemple des cases à cocher activées.
• :empty
  Cible des éléments ne contenant ni texte ni éléments enfant.
• :not(s)
  Cible les éléments qui ne satisfont pas la déclaration "s". Par exemple, si nous voulons mettre en noir le texte de tous les paragraphes qui n'ont pas la classe "lead", nous pouvons écrire :
  

  p:not([class*="lead"]) {color: black;}

Sur son site Internet, Andrea Gandino utilise la pseudo-classe :last-child pour cibler le dernier paragraphe de chaque billet de son blog afin de lui appliquer la propriété margin avec une valeur de 0.

#primary .text p:last-child {  
    margin: 0;  
}

Implémentation dans les navigateurs : Opera et les navigateurs basés sur Webkit supportent toutes les nouvelles pseudo-classes de CSS 3. Firefox 2 et 3 (basés sur Gecko) ne supportent que :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled et :disabled. Néanmoins, Firefox 3.5 supportera un panel bien plus large de pseudo-classes et sélecteurs issus de CSS 3. A priori, aucune version de Internet Explorer ne supportent ces pseudo-classes.

Les pseudo-éléments

Le seul pseudo-élément introduit par CSS 3 est ::selection. Il permet de cibler les éléments sélectionnés par l'utilisateur.

Implémentation dans les navigateurs : Internet Explorer et Firefox ne supporte pas le pseudo-élément ::selection contrairement à Safari, Opera et Chrome.

Liens utiles

• Selectors Level 3: W3C Working Draft
• CSS3: Attribute selectors: CSS3.info
• Compatibility table: CSS3 Selectors
• CSS selectors and pseudo selectors browser compatibility
• CSS3 Attribute Selectors
• ::selection
• General Sibling Selector
• CSS3 Pseudo-classes

2. RGBA et opacity

La notation RGBA permet de spécifier non seulement une couleur, mais aussi l'opacité de celle-ci. Certains navigateurs ne supportent toujours pas cette notation, en conséquence, il est recommandé de spécifier une couleur opaque classique compréhensible par les anciens navigateurs avant de spécifier une couleur RGBA.

Tim Van Damme utilis des couleurs RGBA au survol de ses lien

Sur son site Internet, Tim Van Damme utilise des couleurs RGBA au survol de certains éléments ; par exemple sur les liens "network" de sa page d'accueil :

#networks li a:hover,  
#networks li a:focus {
    background: rgba(164, 173, 183, .15);  
}

Pour définir une couleur RGBA, nous devons spécifier les composantes rouge, bleu et vert à l'aide d'un entier compris entre 0 et 255 ou à l'aide d'un pourcentage. La valeur du canal alpha doit être comprise entre 0.0 et 1.0 ; par exemple, 0.5 pour une opacité de 50%.

Il y a une grande différence entre les couleurs RGBA et la propriété opacity. La notation RGBA définie une couleur qui ne s'applique qu'à une propriété de l'élément ciblé. La propriété opacity définie l'opacité globale qui s'applique à l'intégralité de l'élément et à tous ses enfants.

Voici un exemple de la façon d'appliquer une opacité de 80% a une DIV :

div{
    opacity: 0.8;
}

Implémentation dans les navigateurs : La notation RGBA est supportée par les navigateurs basés sur Webkit. Aucune version d'Internet Explorer ne la supporte. Firefox la supporte à partir de sa version 3 et Opera à partir de sa version 9.5. La propriété opacity est disponible dans Opera et dans tous les navigateurs basés sur Webkit et Gecko. Aucune version de IE ne la supporte à ce jour.

Liens utiles

• CSS Color Module Level 3: W3C Working Draft
• RGBA colors: CSS3.info
• RGBa Browser Support
• RGBA color space
• Is CSS3 RGBa ready to rock?
• Super-Awesome Buttons with CSS3 and RGBA

3. Colones multiples

CSS 3 offre un ensemble de propriétés permettant de réaliser du multi-colonage sans avoir à faire appel à une foultitude de div. Les navigateurs interprètent les propriétés et créés automatiquement les colonnes, donnant au texte un look de journal.

tweetCC utilise les propriétés de multi-colonage sur sa page d'accueil.

tweetCC affiche son texte d'introduction sur 4 colonnes sur sa page d'accueil. Ces 4 colonnes ne sont pas des div flottantes ; En fait, le webdesigner utilise les propriétés de colonage de CSS3 de la manière suivante :

.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
}

Les propriétés de multi-colonage définissent au moins trois choses : le nombre de colonnes (column-count), la largeur de chaque colonne (column-width, pas utilisé dans ce cas) et la taille de la gouttière entre les colonnes (column-gap). Si column-count n'est pas définie, le navigateur va faire au mieux selon l'espace dont il dispose.

Pour ajouter un séparateur vertical entre les colonnes,  nous pouvons utiliser la propriété column-rule. Cette propriété ressemble beaucoup à la propriété border :

div{
    column-rule: 1px solid #000000;
}

Les navigateurs qui ne supportent pas ses propriétés affichent le texte comme s'il n'y avait pas de colonnes.

Propriétés connexes : column-break-after, column-break-before, column-span, column-fill.

Implémentation dans les navigateurs : Les propriétés de multi-colonage sont disponibles dans Safari 3 et 4 et dans Firefox depuis sa version 1.5.

Liens utiles

• CSS3 module: Multi-column layout: W3C Working Draft
• Columns
• CSS3 - Multi-Column Layout Demonstration
• CSS3 Columns
• Designing tweetCC
• Introduction to CSS3 - Part 5: Multiple Columns

4. Arrière-plans multiples

CSS 3 permet d'appliquer plusieurs couches d'arrière-plan sur un élément en utilisant les propriétés classiques d'arrière-plan : background-image, background-repeat, background-size, background-position, background-origin et background-clip.

La façon la plus simple d'appliquer des arrière-plans multiples, consiste à utiliser la propriété raccourcis background. Grace à ça, Vous pouvez spécifier l'ensemble des propriétés ci-dessus en une seule fois. Néanmoins, les propriétés les plus utilisé sont la définition de la source de l'image, sa position et sa répétition :

div {
    background: url(example.jpg) top left no-repeat,
        url(example2.jpg) bottom left no-repeat,
        url(example3.jpg) center center repeat-y;
}

L'ordre de définition des images définie l'ordre d'empilement ce celles-ci, la première étant "la plus proche" de l'utilisateur.

Une version plus complexe des mêmes propriétés pourrait être :

div {
    background: url(example.jpg) top left (100% 2em) no-repeat,
        url(example2.jpg) bottom left (100% 2em) no-repeat,
        url(example3.jpg) center center (10em 10em) repeat-y;
}

Dans ce cas, là, (100% 2em) équivaux à la valeur de la propriété background-size ; l'image de fond dans le coin haut/gauche sera étiré en largeur aux dimensions de la div et fera 2em de haut.

Actuellement,  cette fonctionnalité est très peu implémentée dans les navigateurs. Or, si cette fonctionnalité n'est pas supporté, les navigateurs n'afficherons aucun arrière-plan ce qui peut avoir un impact significatif sur le design d'un site Web. En conséquence, cette fonctionnalité de CSS 3 est franchement peu utilisée. Ceci dit, à terme, cette propriété peut avoir d'importantes conséquences sur le travail des Webdesigner et permettre de réduire considérablement le balisage nécessaire à la réalisation de ce type d'effet.

Implémentation dans les navigateurs : Seul Safari et Konqueror supportent les arrière-plans multiples.

Liens utiles

• Layering multiple background images
• Multiple backgrounds with CSS3 and CSS3.info
• Introduction to CSS3, Part 6: Backgrounds

5. Césure

La propriété word-wrap est utilisée afin de définir le mode de césure des mots. Elle peut prendre deux valeurs : normal et break-word. La valeur par défaut (normal) coupe les mots seulement là ou cela et requis par les règles typographiques du navigateur (au niveau du trait d'union par exemple). Si la valeur break-word est utilisée, le mot peut être coupé au niveau de n'importe quel caractère afin d'éviter que celui-ci ne déborde de la zone de texte maximal définie par l'élément conteneur.

L'interface d'administration de WordPress utilise word-wrap sur ses tableaux de données

Dans l'interface d'administration de WordPress, la propriété word-wrap est utilisée dans les cellules de certains tableaux ; par exemple sur la liste des billets et des pages :

.widefat * {  
    word-wrap: break-word;  
}

Implémentation dans les navigateurs : word-wrap est disponible dans Internet Explorer et Safari. Firefox l'intégrera à partir de sa version 3.5.

Liens Utiles

• Force Wrapping: the ‘word-wrap' property — CSS Text Level 3: W3C Working Draft
• word-wrap: CSS3.info
• CSS word-wrap
• word-wrap: Mozilla Developer Center

6. Texte ombré

la propriété text-shadow a été introduite dès CSS 2, mais reste fort peu utilisée. Cependant il y a de forte chance que cela change avec CSS 3. Cette propriété offre aux webdesigners un outil multi-navigateur permettant de rehausser leurs designs et de faire ressortir le texte.

Bien évidement, dans l'éventualité ou le navigateur de l'utilisateur n'interprèterait pas cette propriété, vous devez vous assurer que votre texte reste lisible. Pour cela, pensez à contraster suffisamment les couleurs du texte et de l'arrière-plan.

BeakApp utilise la propriété text-shadow sur la zone de contenu de son site.

BeakApp.com utilise la propriété text-shadow dans sa zone de contenu pour donner du relief et de la profondeur au texte sans avoir à recourir à une solution de substitution à base d'image. Cet effet n'est visible que dans Safari et Google Chrome.

La feuille de style du site utilise la règle suivante :

.signup_area p {  
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Nous avons dans l'ordre : la couleur de l'ombre (définie en RGBA, voir ci-avant), le décalage vers la droite, le décalage vers le bas et enfin, le rayon de dispersion.

Il est possible d'appliquer plusieurs ombres en les séparant par une virgule :

p {  
    text-shadow: red 4px 4px 2px,
        yellow -4px -4px 2px,
        green -4px 4px 2px;
}

Implémentation dans les navigateurs : Opera 9.5 et les navigateurs basés sur Webkit supportent text-shadow. Cette propriété ne sera disponible dans Firefox qu'à partir de la version 3.5 et Internet Explorer ne l'implémente pas.

Liens Utiles

• Text Shadows: the ‘text-shadow' property — W3C Working Draft
• Text shadows: Web Style Sheets CSS tips and tricks
• Text-shadow, Photoshop like effects using CSS — CSS3.info
• Make Cool And Clever Text Effects With CSS Text-Shadow
• Safari's Text-Shadow Anti-Aliasing CSS Hack
• text-shadow
• text-shadow: Mozilla Developer Center

7. La règle @font-face

Bien que cette fonctionnalité soit une des plus attendu de CSS 3 (et bien qu'elle fasse déjà partie de CSS 2), @font-face est loin d'être aussi bien implémentée que les autres fonctionnalités de CSS 3 qui sont déjà disponibles. C'est principalement dû à des questions de droits d'auteurs liés aux Polices typographiques : Les polices embarquées dans un site web sont facilement téléchargeables, ce qui représente un problème majeur pour les principaux fabriquant de polices typographiques.

Cependant, une solution à cette question de droits semble voir le jour. TypeKit propose de fournir une solution de gestion des droits capable de simplifier la vie des designers et des fabriquant. Cela permettrait d'enrichir significativement l'usage des Polices Typographiques sur Internet et de rendre la règle @font-face utilisable en pratique.

Le site du projet JetPack sur le Mozilla Labs utilise la règle @font-face pour afficher la Police DroidSans

Un des rares sites web à utiliser cette règle est celui du projet JepPack sur le Mozilla Labs.

@font-face{  
    font-family: 'DroidSans';  
    src: url('../fonts/DroidSans.ttf') format('truetype');  
}

Pour pouvoir utiliser des polices typographiques embarquées sur votre site Web, vous devez déclarer chaque déclinaison séparément (par exemple, normal, bold et italic). Assurez-vous d'utiliser uniquement des polices autorisant leur usage sur le Web et n'oubliez pas de citez les créateurs à chaque fois que cela est requis.

Après avoir déclaré une police typographique à l'aide de la règle @font-face, vous pouvez faire appelle à cette police en utilisant la propriété font-family dans votre feuille de style.

p {  
    font-family: "DroidSans";  
}

Si un navigateur ne supporte pas @font-face, il suivra le comportement normal de la propriété font-family et utilisera la première police typographique disponible parmi celles qui ont été déclarées avec cette propriété. Ce comportement peut suffire si l'utilisation de la règle @font-face est un luxe réservé aux navigateurs qui la supporte. Cependant, si la police typographique joue un rôle majeur dans le design ou si elle fait partie de l'identité visuelle d'une entreprise, il vous faudra sans doute recourir à une autre solution comme sIFR ou Cufón. N'oubliez pas que ces outils alternatifs sont plutôt adaptés à la titraille ou à de courte citations car copier/coller du texte traité de cette manière est difficile et peu convivial.

Ça ne serait pas génial d'avoir des polices typographiques comme ça sur le Web ? Une expérience de Dave Shea avec Cufón et Museo Sans. Magnifique !

Implémentation dans les navigateurs : La règle @font-face est supportée par Safari 3.1+. Internet Explorer la supporte uniquement avec des polices au format EOT. Opera 10 et Firefox 3.5 devraient la supporter.

Liens utiles

• Font Descriptions and @font-face — W3C Working Draft
• Web fonts with @font-face
• @font-face — Sitepoint
• Fonts available for @font-face embedding
• @font-face
• beautiful fonts with @font-face
• Introducing Typekit

8. Angles arrondis

La propriété border-radius permet de créer des angles arrondis sur les éléments HTML sans avoir à utiliser d'images de fond. A l'heure actuelle, il s'agit probablement de la propriété CSS 3 la plus utilisé car c'est sympa d'avoir des coins arrondis sans que cela soit critique du point du vue du design ou de l'utilisabilité s'il ne sont pas affichés.

Plutôt que d'ajouter des scripts incompréhensibles ou de surcharger votre balisage HTML, ajoutez quelques propriétés CSS dans votre feuille de style et croisez les doigts. Cette solution, qui a le mérite d'être plus propre et plus efficace, vous évitera de vous battre avec des techniques à base de Javascript et CSS mélangées pour garantir une gestion multi-navigateurs.

Le blog de Sam Brown utilise border-radius sur les en-têtes, les catégories et les liens.

Sur son site Internet, Sam Brown utilise massivement la propriété border-radius sur les en-têtes, les liens et certains blocs. Réaliser cet effet avec des images aurait pris beaucoup de temps. C'est une des raisons qui nous permet de réaliser l'avancé qu'est CSS 3 pour nos projets en termes d'efficacité des développements Web.

Pour ajouter des coins arrondis à ses catégories d'article, Sam utilise le code CSS suivant :

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

Il est possible d'aller un peu plus loin en rajoutant la propriété standard CSS 3 et la propriété avec le préfixe de Konqueror, ce qui donne :

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

Si nous voulions appliquer la propriété à certains angles spécifiques de notre élément, nous pourrions cibler chaque coin séparément :

div {
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

Implémentation dans les navigateurs : la propriété border-radius est supportée par tous les navigateurs basés sur Webkit et Gecko. Par contre, aucune version de Internet Explorer ni d'Opera ne la supporte.

Liens utiles

• border-radius: W3C Working Draft
• Border-radius: create rounded corners with CSS! — CSS3.info
• Introduction to CSS3, Part 2: Borders
• An Ode to border-radius
• CSS3 Border-Radius and Rounded Corners

9. Bordures illustrées

La propriété border-image vous permet d'utiliser une image pour définir la bordure d'un élément, vous permettant de vous libérer des styles de bordures traditionnels tel que solid, dotted, etc. Cette propriété offre aux designers un excellent outil pour travailler graphiquement les bords d'un élément sans avoir recourt à la propriété background-image (pour les design recherché) ou pour se détacher de la rigidité des styles de bordures traditionnels. Avec cette propriété, nous pouvons également définir explicitement la façon dont une bordure doit être étirée ou répliquée.

Le blog SpoonGraphics utilise la propriété border-image pour gérer la bordure autour de ses images.

Le blog SpoonGraphics utilise la propriété border-image de la manière suivante :

#content .post img {  
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
}

Pour définir la propriété border-image, nous devons spécifier l'emplacement de l'image à utiliser, quelle partie de l'image doit être utilisée pour chacun des bords de l'élément et comment l'image sera étirée et répliquée.

Pour créer une div avec une bordure utilisant l'image ci-après, il nous faudra utiliser le code suivant (nous ajouterons les propriétés avec les préfixes pour Opera et Konqueror dans cet exemple) :

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
}

La dernière valeur de cette propriété, peut être stretch (default), round (seul un nombre entier d'image remplira l'espace disponible) ou repeat. Dans notre exemple, les bordures de chacun des coté, seront étirées (stretch). Si nous voulions seulement étirer les images des bordures du haut et du bas , nous utiliserions la règle CSS suivante :

div { 
    (...) 
    border-image: url(example.png) 18 25 25 18 stretch repeat; 
}

Il est également possible de cibler chaque coin et chaque bord indépendamment si l'on veut utiliser une image différente pour chacun d'eux :

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
}

Si un navigateur ne supporte pas la propriété border-image, il  l'ignorera tout simplement et appliquera les autres propriétés des bordures comme par exemple border-width et border-color.

Implémentation dans les navigateurs : Actuellement, seul les navigateurs basés sur Webkit supporte border-image. Firefox l'intégrera à partir de sa version 3.5.

Liens utiles

• The ‘border-image' property: W3C Working Draft
• Border-image: using images for your border — CSS3.info
• border-image in Firefox
• border-image demonstration page
• Replicating iPhone Buttons the “webkit” way!

10. Les boites ombrées

La propriété box-shadow permet d'ajouter une ombre à un élément HTML sans avoir à recourir à du balisage supplémentaire ou à une image de fond. De la même façon que la propriété text-shadow, elle enrichie les possibilités graphiques offertes aux designers. Dans la mesure où cela n'affecte pas vraiment la lisibilité du contenu rien n'empèche d'ajouter cette petite touche supplémentaire.

10to1 utilise la propriété box-shadow sur l'arrière plan de sa barre de navigation et pour ses états au survol de la souris.

10to1 rajoute un simple effet d'ombre à sa zone de navigation et l'utilise pour rajouter un effet au survol des liens :

#navigation {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
}

#navigation li a:hover,
#navigation li a:focus {
    -webkit-box-shadow: 0 0 5px #111;
    -moz-box-shadow: 0 0 5px #111;
}

La propriété box-shadow prend plusieurs valeurs : le décalage horizontal, le décalage vertical, le rayon de flou, le rayon de propagation et la couleur de l'ombre. Les décalages horizontaux et verticaux, ainsi que la couleur de l'ombre sont les plus utilisés.

Pour appliquer à une div une ombre rouge décalée de 4 pixels vers le bas et la droite sans effet de flou, nous avons besoin du code suivant :

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
}

Implémentation dans les navigateurs : Actuellement, la propriété box-shadow n'est supportée que par les navigateurs basés sur Webkit. Néanmoins, elle sera également supportée par le prochain Firefox 3.5.

Liens utiles

• The "box-shadow" property — W3C Working Draft
• Box-shadow, one of CSS3's best new features — CSS3.info
• Apple's Navigation bar using only CSS
• Box Shadow — Surfin' Safari blog

11. Model de boite

Conformément à la norme CSS 2.1, lorsque l'on calcul la taille complète d'une boite, la taille des bordures et des marges intérieur (padding) doivent être ajoutées aux largeurs et hauteurs déclaré dans la feuille de style. Mais les navigateurs vieillissant, voir obsolètes, sont connus pour leur interprétation fantaisiste de cette partie de la spécification. La propriété box-sizing vous permet donc de spécifier explicitement la façon dont un navigateur doit calculer la largeur et la hauteur d'un élément donné.

WordPress utilise la propriété box-sizing pour tout les champs et zones de textes de son espace d'administration.

La zone d'administration de WordPress utilise cette propriété pour toutes les balises input avec un attribut type ayant la valeur text et pour toutes les balises textarea (entre autre choses)

input[type="text"],
textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

La troisième propriété (-ms-box-sizing) ne fonctionne qu'avec Internet Explorer 8. Sur d'autres éléments, le style de WordPress fait également appel à la version de la propriété pour konqueror : -khtml-box-sizing.

La propriété box-sizing peut prendre deux valeurs : border-box et content-box. La valeur content-box indique que les largeurs et auteurs doivent être calculé tel que définis dans le standard CSS 2.1. La valeur border-box indique au navigateur qu'il doit soustraire les valeurs des propriétés padding et border des valeurs spécifiées dans les propriétés width et height pour calculer la taille réel de l'intérieur d'une boite (comme ce que font les vieux navigateurs)

Implémentation dans les navigateurs : box-sizing est supporté par IE8, Opera et tous les navigateurs basés sur Webkit et sur Gecko.

Liens utiles

• "box-sizing" property: W3C Candidate Recommendation
• Box-sizing, box-model fixes for the simple people: CSS3.info
• CSS3 box-sizing attribute

12. Media Queries

Les "Media Queries" vous permettent de définir des styles différents selon les capacités du terminal qui les affichent. Par exemple, vous pourriez souhaiter voir la colonne de droite de votre site web se positionner sous la zone de contenu principale si celui si est affiché sur un terminal ayant une zone d'affichage inférieur à 480px :

#sidebar {
    float: right;
    display: inline; /* IE Double-Margin Bugfix */
}

@media all and (max-width:480px) {
    #sidebar {
        float: none;
        clear: both;
    }
}

Il est également possible de cibler les terminaux avec un écran couleur :

a {
    color: grey;
}

@media screen and (color) {
    a {
        color: red;
    }
}

Les possibilités sont infinies. Cette fonctionnalité est utile dans la mesure où vous n'avez plus à écrire des feuilles de styles différentes en fonction des terminaux, ni à utiliser du Javascript pour connaitre les capacités d'affichage de chaque navigateur. Une solution plus populaire, basée sur Javascript, pour produire des gabarits plus souples, consisterait à utiliser un gabarit fluide adaptatif, ce qui rendrait le gabarit plus sensible à la résolution des navigateurs.

Implémentation dans les navigateurs : Les "Media Queries" sont supportées par les navigateurs basés sur Webkit et par Opera. Firefox les supportera dans sa version 3.5. Internet Explorer ne les supporte pas et ne prévois pas de les supporter dans les prochaines versions de IE.

Liens utiles

• Media Queries: W3C Candidate Recommendation
• Extensions to CSS 3 Media Queries
• Media Queries: CSS3.info
• The bleeding edge of web: media queries
• Safe media queries
• Media types

13. Restitution vocal

Le module de restitution vocal (speech) de CSS 3 vous permet de styliser le rendu vocal d'un lecteur d'écran. Vous pouvez contrôler divers aspect de la restitution tel que :

• voice-volume
  Permet de définir le volume en utilisant un nombre compris entre 0 et 100, un pourcentage ou un mot clé (silent, x-soft, soft, medium, loud et x-loud).
• voice-balance
  Permet de contrôler la balance de la sortie son (si le système de l'utilisateur supporte la stéréo).
• speak
  Signal au lecteur d'écran s'il doit épeler un mot, un nombre ou dire la ponctuation. Les mots clés disponibles sont none, normal, spell-out, digits, literal-punctuation, no-punctuation et inherit.
• pauses et rests
  Permet de définir une pause ou une respiration avant ou après la vocalisation du contenu d'un élément. Vous pouvez utiliser soit une valeur de temps (par exemple, "2s" pour 2 secondes) soit un mot clé (none, x-weak, weak, medium, strong et x-strong).
• cues
  Permet d'utiliser des sons personnalisés pour délimiter des éléments particuliers et contrôler le volume de ces sons supplémentaires.
• voice-family
  Permet de spécifier les types de voix et combinaison de voix à utiliser (comme pour les polices typographiques).
• voice-rate
  Permet de contrôler la vitesse de diction des éléments. Cela peut être défini à l'aide d'un pourcentage ou d'un mot clé : x-slow, slow, medium, fast et x-fast.
• voice-stress
  Permet de spécifier une emphase à appliquer à l'élément en utilisant un de ces mots clés : none, moderate, strong et reduced.

Par exemple, pour demander à un lecteur d'écran de lire toutes les balises h2 avec une voie féminine, avec une sortie dans l'enceinte de gauche, sur un ton doux et suivi d'un son spécifique, utilisez la feuille de style suivante :

h2 {
    voice-family: female;
    voice-balance: left;
    voice-volume: soft;
    cue-after: url(sound.au);
}

Malheureusement, ces propriétés sont très peu supportées. Néanmoins, il est indispensable de les avoir en tête car elles pourront nous permettre d'améliorer l'accessibilité de nos sites Web à l'avenir.

Implémentation dans les navigateurs : Actuellement, seul Opera pour Windows XP et 2000 supporte une partie du module speech. Pour l'utiliser, il faut se servir du préfix -xv- ; par exemple : -xv-voice-balance: right.

Liens utiles

• CSS3 Speech Module — W3C Working Draft
• CSS3 Speech — CSS3.info
• Aural CSS: Support for CSS 2 Aural Style Sheets / CSS 3 Speech Module

Conclusion

Les propriétés CSS3 peuvent grandement contribuer à votre confort de travail, en simplifiant certaines des taches les plus consommatrice de temps tout en vous permettant d'utiliser un meilleur balisage, plus claire et plus léger. Certes, certaines propriétés sont encore assez peu supportées, même par les navigateurs les plus récents. Cela ne signifie pas pour autant que nous ne devrions pas les utiliser et offrir aux visiteurs ayant des navigateurs de dernière génération une expérience graphique enrichie.

Dans cette optique, gardez à l'esprit que l'éduquation de nos client est à la fois utile et nécessaires : les sites n'ont pas besoin d'être identiques d'un navigateur à l'autre, en particulier si la différence n'impacte pas négativement l'esthétique et l'utilisabilité du site. Si l'on continue à perdre du temps et de l'argent à gérer chaque détail au pixel près (au lieu d'adopter des solutions plus souples et porteuses d'avenir), les utilisateurs n'auront aucune raison de mettre leurs navigateurs à jours. Dans un tel cas de figure, nous aurions longtemps à attendre avant de voir disparaitre les navigateurs obsolètes au profit de navigateurs robustes et modernes.

Plus vite nous commenceront à expérimenter l'usage des propriétés CSS 3, plus vite elles seront implémentées dans les navigateurs les plus populaire, plus vite nous seront capable de les utiliser à grande échelle.

Références et lectures supplémentaires

• CSS3 Previews: CSS3.info
• CSS 3: Exciting Function and Features: 30 Useful Tutorials
• 5 CSS3 Techniques For Major Browsers using the Power of jQuery
• Introduction to CSS3 - Part 1: What is it?
• Comparison of layout engines (Cascading Style Sheets) and Wikipedia
• Progressive enhancement
• Five CSS design browser differences I can live with
• Progressive Enhancement with CSS
• CSS support in Opera 9.5

A propos de l'auteur original

Inayaili de León est une Web Designer portugaise. Elle a une vraie passion pour le webdesign et le codage de site Web ; elle adore les sites web propres et esthétiques. Elle vit à Londres (et blogue à ce propos) et adore les pizza (elle fait aussi des trucs avec ses chats, mais je n'ai pas compris ce que c'est). Vous pouvez lire d'autre de ses articles sur Web Designer Notebook et suivre ses aventures quotidiennes sur Twitter.