Acronyme de Cascading Style Sheets. Langage destiné à la présentation de documents, Css est aujourd'hui une ressource incontournable de l'écosystème web. Reprenant à son compte la doctrine de la séparation du contenu et de la présentation d'un document, Css permet de factoriser les informations de style, et par la même occasion de réduire considérablement le poids d'une page web.
Qu'est-ce que Css ?
Les sélecteurs Css
Les sélecteurs constituent l'une des grandes forces du langage Css. En combinant ceux-ci, il est possible d'attribuer un style à n'importe quel élément.
Motif
Signification
*
Tout élément
E
Tout élément E
E F
Tout élément F qui est descendant de l'élément E
E > F
Tout élément F qui est enfant de l'élément E (descendant au premier degré de l'élément E)
E:first-child
Tout élément E qui est le premier enfant de son élément parent
E:link
Tout élément E qui est une ancre et dont le lien n'a pas été visité
E:visited
Tout élément E qui est une ancre et dont le lien a déjà été visité
E:active
Tout élément E qui reçoit une activation (ex : clic sur un bouton)
E:hover
Tout élément E qui est survolé
E:focus
Tout élément E qui reçoit un focus (ex : focus sur un champ texte)
E:lang(c)
Tout élément E qui emploie la langue c
E + F
Tout élément F qui est immédiatement précédé par E (E et F sont au même niveau)
E[attr]
Tout élément E qui possède l'attribut « attr »
E[attr = 'val']
Tout élément E dont l'attribut « attr » vaut « val »
E[attr ^= 'val']
Tout élément E dont l'attribut « attr » commence par « val »
E[attr $= 'val']
Tout élément E dont l'attribut « attr » termine par « val »
E[attr *= 'val']
Tout élément E dont l'attribut « attr » contient « val »
E[attr ~= 'val']
Tout élément E dont l'attribut « attr » est une liste de mots séparés par un espace, de sorte que l'un de ces mots vaut « val »
E[attr |= 'val']
Tout élément E dont l'attribut « attr » est une liste de mots séparés par un tiret, de sorte que l'un de ces mots vaut « val »
E.val
Tout élément E dont l'attribut « class » vaut « val ». Identique à E[class = 'val']
E#val
Tout élément E dont l'attribut « id » vaut « val ». Identique à E[id = 'val']
Les quelques exemples qui suivent ont été réalisés en vue d'une utilisation conjointe à un document XHTML qui reste à ce jour l'application principale des feuilles de style.
Le centrage d'un élément
Historiquement issus de la presse papier, les relais d'information centrent aujourd'hui la présentation numérique de leurs données, afin de donner au lecteur l'illusion qu'il se trouve devant un support papier. Cet effet, notamment remarquable sur ce site, peut être obtenu à l'aide du code suivant. En supposant que l'élément <body> contienne l'élément <div id='container'>, l'élément <div id='container'> est ainsi centré dans le navigateur :
body {
text-align:center; /* Center the content */
}
div#container {
width:748px; /* Set width for auto margin */
margin:0 auto; /* Set margin to be automatically calculated */
}
Les expressions rationnelles
Les expressions rationnelles font partie intégrante de Css. Il est ainsi possible, par le biais de trois opérateurs (^=, ~= et *=), de sélectionner des attributs dont la valeur correspond au prédicat rationnel souhaité.
Le style ci-dessus peut, par exemple, être utilisé à des fins de cataloguage visuel des liens hypertexte.
/* For each link beginning with 'http://www.denistruffaut.com' */
a[href ^= 'http://www.denistruffaut.com'] {
padding:0px 0px 0px 20px;
background:url('http://www.denistruffaut.com/images/default/mimetypes/denis.png') 0px 0px no-repeat;
}
/* For each link ending with '.pdf' */
a[href $= '.pdf'] {
padding:0px 0px 0px 20px;
background:url('http://www.denistruffaut.com/images/default/mimetypes/adobe_pdf.png') 0px 0px no-repeat;
}
/* For each link containing 'php' */
a[href *= 'php'] {
padding:0px 0px 0px 20px;
background:url('http://www.denistruffaut.com/images/default/mimetypes/php.png') 0px 0px no-repeat;
}
Les sprites
L'une des problématiques récurrentes lors de la création de feuilles de style est l'explosion du nombre d'images utilisées. Pour des raisons de commodité de maintenance, les images sont souvent fragmentées. Toutefois d'un point de vue performance, il s'agit là d'une grave erreur. En effet, chaque récupération d'image par le navigateur entraîne l'exécution d'une requête Http, laquelle est souvent trop importante en terme de cout temporel, au regard du poids de l'image demandée.
Une solution à ce dilemne est l'utilisation de sprites. Très connus dans l'univers du jeu vidéo, les sprites sont en fait un regroupement d'images proches en termes de dimension et de couleurs. Cette technique permet donc de diviser drastiquement le temps de récupération d'une image, et améliore significativement l'expérience utilisateur. Une fois l'image créée, il ne reste plus qu'à jouer sur les offsets horizontaux et verticaux afin d'obtenir la portion souhaitée.
img#french_flag {
width:30px;
height:15px;
display:block;
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') 0px 0px no-repeat; /* Top left */
}
img#french_flag:hover {
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') 0px -15px no-repeat; /* Top right */
}
img#english_flag {
width:30px;
height:15px;
display:block;
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') -30px 0px no-repeat; /* Bottom left */
}
img#english_flag:hover {
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') -30px -15px no-repeat; /* Bottom right */
}