Quelles règles syntaxiques adopter en CSS ?
Le langage CSS a été initialement conçu pour demeurer simple et intuitif : des propriétés facilement compréhensibles associées à des valeurs tout aussi explicites devraient résumer le travail quotidien d'un intégrateur CSS.
Il n'est pourtant pas rare de rencontrer, au détour d'un clavier, un jeune webdesigner s'arracher les cheveux non pas parce qu'il ne dispose que d'Internet Explorer 6, mais parce qu'il s'embrouille dans la syntaxe employée.
Et si nous reprenions tranquillement les différentes conventions typographiques CSS, en énonçant les règles générales à adopter ainsi que leurs éventuels pièges ?
Accolades, point-virgule ou double-point ?
Commençons en douceur. le principe général d'une règle CSS est d'associer plusieurs éléments : le sélecteur (l'élément HTML sur lequel vont s'appliquer les styles), une propriété, et une valeur associée à la propriété.
Les règles typographiques sont les suivantes :
La propriété est séparée de sa valeur par un double-point,
Les déclarations (couple propriété-valeur) sont séparées par un point-virgule. Celui-ci est optionnel sur la dernière déclaration d'un bloc,
Un bloc de déclaration (ensemble des couples propriété-valeur) est entouré d'accolades.
Quelques exemples :
color: red /* un double-point entre la propriété et la valeur */
color: red; background: beige; /* déclarations séparées par point-virgule */
p {color: red; background: beige;} /* accolades autour du bloc de déclarations */
Selon les langages, le séparateur entre la propriété et sa valeur diffère
Signe égal ou double-point ?
Selon les langages, le séparateur entre la propriété et sa valeur diffère. En HTML il s'agit du signe égal, en CSS c'est le double-point.
La règle est la suivante : dans tous les cas, le double-point sépare une propriété de sa valeur, sauf au sein du sélecteur d'attribut où la séparation s'opère à l'aide du signe égal.
Quelques exemples :
color: red /* un double-point entre la propriété et la valeur */
input[type="text"] {color: red;} /* exception: un signe égal au sein du sélecteur d'attribut */
Traits d'union ou collé ?
Lorsque les noms des propriétés ou des valeurs sont complexes ou s'expriment en plusieurs termes accolés, elles s'écrivent généralement à l'aide de traits d'union.
Les règles sont les suivantes :
Sauf exception, une propriété s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
Sauf exception, une valeur s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
Il y a certaines exceptions (ex: lightblue, nowrap...).
Quelques exemples :
font-size, margin-top /* propriétés en plusieurs termes, donc trait d'union */ inline-block, no-repeat /* valeurs en plusieurs termes, donc trait d'union */ lightblue, nowrap /* exceptions : pas de trait d'union dans certaines propriétés ou valeurs */
Espaces ou virgules ?
Dans certains cas, les propriétés CSS acceptent plusieurs valeurs. C'est par exemple le cas lorsque l'on emploie la version raccourcie de la propriété (background, font, margin, padding, border...). Cependant, il arrive que le séparateur de valeurs soit une virgule.
Les règles sont les suivantes :
Les valeurs sont séparées par des espaces lorsqu'elles doivent toutes être prises en compte à importance égale,
Les valeurs sont séparées par des virgules lorsque certaines sont optionnelles ou secondaires,
Exception : dans la plupart des fonctions CSS, le séparateur est une virgule.
border-radius: 6px 6px 0 0 /* tout est pris en compte, donc espace entre valeurs */
padding: 0 10px 6px 1em /* tout est pris en compte, donc espace entre valeurs */
background: #000 url("img/concombre.jpg") left top no-repeat /* tout est pris en compte, donc espace entre valeurs */
font-family: Arial, Verdana, serif; /* certaines valeurs optionnelles, donc virgules */
rgba(255, 255, 255, .2) /* exception : virgule séparatrice au sein de fonctions */
Dans certains cas, les valeurs CSS s'écrivent à l'aide de parenthèses
Guillemets ? Simples ? Ou pas ?
Il est de notoriété publique qu'une chaîne de caractère s'écrit entre quotes simples ou doubles. Le langage CSS ne déroge pas à la règle, bien qu'il y ait certaines subtilités.
Les règles sont les suivantes :
Pas de guillemets en règle générale pour les valeurs CSS, sauf les chaînes de caractères,
Dans le cas des chaînes de caractères, les spécifications CSS2 et CSS3 indiquent que dès lors qu'une valeur contient des caractères non alphanumériques simples (A-Z, 0-9, tiret, underscore), elle doit être entourée de quotes simples ou doubles,
Exception : les chaînes de caractères générées avec la propriété content nécessitent toujours des guillemets.
Quelques exemples :
input[type=text], input[type="text"] /* deux syntaxes possibles car caractères simples */
font-family: Arial /* pas de guillemets car caractères simples */
font-family: "Times New Roman" /* guillemets car caractère espace */
background-image: url("concombre.png") /* guillemets car caractère point */
content: "kiwi"; /* la valeur de la chaîne de la propriété content s'écrit toujours avec des guillemets */
Parenthèses ?
Dans certains cas, les valeurs CSS s'écrivent à l'aide de parenthèses.
Les règles sont les suivantes :
Toutes les valeurs indiquant un chemin ont une syntaxe fondée sur url()
Les fonctions CSS nécessitent des parenthèses,
C'est également le cas de certains sélecteurs,
C'est le cas des mediaqueries.
Quelques exemples :
background: url(), @import: url(), content: url() /* chemin basé sur fonction url() */
url(), rgb(), rgba(), attr(), calc(), min(), max(), any() /* fonctions avec parenthèses */
:nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :not() /* sélecteurs CSS3 avec parenthèses */
@media (max-width: 800px) {...} /* mediaqueries */
Préfixes ?
Depuis CSS2.1 le W3C invite les constructeurs à préfixer leurs propriétés (-webkit, -moz-, -ms-, -o-, etc.).
Les règles sont les suivantes :
Un préfixe est nécessaire devant la propriété lorsqu'elle n'est pas finalisée ou si elle est propriétaire,
Dans certains cas, le préfixe se place devant la valeur (lorsque la propriété est finalisée mais pas la valeur). Par exemple : display:-moz-box (et non -moz-display: box).
Quelques exemples :
border-radius /* propriété CSS3 finalisée, donc pas de préfixe */
-moz-linear-gradient,
-webkit-mask
/* propriété CSS3 non finalisée, donc préfixe */
-ms-zoom, -webkit-text-stroke /* propriété propriétaire, donc préfixe */
display:-moz-box /* propriété finalisée mais valeur non finalisée, donc préfixe sur valeur */
Article réalisé par Raphael (Alsacreations) sous licence Creative Commons