La syntaxe CSS

Comme nous l'avons vu dans un article précédent, le but premier du langage CSS est de permettre à un navigateur d'afficher (on parle parfois de peindre ou de rendre) les éléments d'une page avec des couleurs, positions, décorations spécifiques. La syntaxe de ce langage illustre comment fonctionne le langage pour parvenir à ce but. Dans cet article nous allons analyser cette syntaxe afin d'aller plus loin.

CSS est un langage déclaratif dont la syntaxe est plutôt simple et directe. Grâce à cette simplicité, CSS est également tolérant envers les erreurs de syntaxe : une erreur dans un fichier n'empêchera pas le reste de fonctionner. En revanche, cela peut rendre les erreurs plus difficiles à diagnostiquer.

Un peu de vocabulaire

CSS est basé sur deux briques fondamentales :

• La propriété, d'une part, qui est un identifiant : un nom lisible et compréhensible qui définit la fonctionnalité utilisée.
• La valeur, d'autre part, qui décrit comment la fonctionnalité doit être utilisée par le moteur du navigateur. Chaque propriété peut être utilisée avec un ensemble de valeurs valides, définies par une grammaire formelle et qui ont une signification sémantique, implémentée par le moteur du navigateur.

Lorsqu'on associe une propriété avec une valeur, on obtient ce qu'on appelle une déclaration CSS. Les déclarations CSS sont placées dans des blocs de déclarations. Enfin, les blocs sont associés à des sélecteurs afin de créer des règles CSS.

Avant de continuer avec une explication soporifique, prenons un exemple concret qui utilise le code HTML suivant :

<h1>Un exemple simple</h1>

<p id="id">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nulla eget sapien volutpat, blandit tortor sit amet, consequat
   sem. Mauris suscipit nunc eu mi lobortis, in porttitor nulla
   tempor. Suspendisse ante erat, eleifend auctor dictum in,
   viverra eu elit.</p>

<div>
  <p>Nullam sit amet augue consequat, tristique enim non, varius
     orci. Vivamus bibendum elit turpis, sit amet fringilla neque
     mollis sed. Donec semper, nibh molestie maximus pretium, tellus
     nibh molestie leo, vitae vulputate ante turpis a eros.</p>

  <p>Vestibulum pharetra metus id quam dignissim, ac maximus libero
     efficitur. Nullam hendrerit diam nisl. Nullam feugiat semper
     ipsum a pharetra. Ut posuere varius consectetur. Sed purus nunc,
     fringilla laoreet risus vitae, laoreet dapibus diam.</p>
</div>

Si, pour ce contenu, on applique la feuille de style suivante :

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

On pourra obtenir ce résultat :

Analysons cette feuille de style en détails.

Les déclarations CSS

Définir des valeurs spécifiques, utilisées par des propriétés est un aspect clé du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chacun des éléments d'une page afin de pouvoir les placer et les mettre en forme correctement. Il est important de préciser ici, qu'en CSS, la casse (majuscule/minuscule) est importante (background ne sera pas équivalent à BACKGROUND). La paire formée dans une déclaration est scindée par deux points (:), les blancs qui sont situés avant, entre ou après les valeurs ou les propriétés sont ignorés.

Il existe plus de 300 propriétés CSS différentes et quasiment une infinité de valeurs. Toutes les combinaisons propriété/valeur ne sont pas permise : chaque propriété définit un ensemble de valeurs qui peut lui être associé.

Dans l'exemple précédent, avez-vous pu identifier les onze déclarations CSS ? Avez-vous trouvé la déclaration invalide et pourquoi est-elle invalide ? Astuce : vérifiez chaque propriété dans la référence CSS.

Les blocs CSS

Les déclarations sont regroupées en blocs : une structure délimitée par deux accolades : une accolade ouvrante ( { ) au début et une accolade fermante ( } ) en fin de bloc.

Un bloc contient donc zéro, une ou plusieurs déclarations, séparées par des points-virgules ( ; ). Un bloc peut être vide. Les blancs autour des déclarations sont ignorés. La dernière déclaration d'un bloc peut ne pas être suivie d'un point-virgule. Cela dit, il est considéré comme une bonne pratique d'ajouter un point virgule pour toutes les déclarations afin d'éviter un oubli lorsqu'on ajoute une nouvelle déclaration à un bloc.

Dans l'exemple précédent, avez-vous pu identifier les six blocs CSS ? Quel est le septième bloc ?

Les règles CSS

Si les feuilles de style ne permettaient que d'appliquer une seule déclaration pour chaque élément d'une page web, elles seraient plutôt inutilisables. Le but est d'appliquer différentes déclarations à différentes parties du document. CSS permet cela en associant des conditions aux blocs de déclarations. Chaque bloc (valide) est précédé par un sélecteur qui décrit une condition pour choisir certains éléments de la page. La paire formée par le sélecteur et un le bloc est appelée un ensemble de règles ou, plus simplement et plus généralement, une règle.

Un élément de la page peut correspondre à plusieurs sélecteurs et plusieurs règles peuvent donc s'appliquer au même élément. On peut même avoir plusieurs règles qui contiennent une même propriété avec des valeurs différentes qui s'appliquent à un même élément. Dans ce cas, pour déterminer la valeur qui sera utilisée parmi celles-ci, CSS utilise un algorithme appelé algorithme de cascade.

Dans l'exemple utilisé avant, avez-vous pu identifier la règle qui s'applique à deux sélecteurs différents ?

Les instructions CSS

Les règles CSS sont le matériau de base d'une feuille de style et souvent, une feuille de style n'est qu'une longue liste de règles. Il arrive aussi qu'un auteur web veuille exprimer d'autres informations dans une feuille de style : le jeu de caratère utilisé, d'autres feuilles de style externe à importer, des polices, des compteurs, etc. Pour cela, il existe des types d'instructions spécifiques.

Une instruction est un bloc de construction qui commence par un caractère qui n'est pas un blanc et qui finit à la première accolade fermante ou au premier point-virgule (en dehors d'une chaîne de caractères, non échappée, et qui n'est pas déjà inclus dans une autre paire  {}, () ou []).

Il existe différentes sortes d'instructions :

• Les règles que nous avons vu précédemment : on associe un ensemble de déclarations CSS à une condition décrite par un sélecteur.
• Les règles @ (at-rules en anglais) commençant par le symbole @ suivi d'un identifiant et qui courent jusqu'à la fin de l'instruction (c'est-à-dire le prochain point-virgule en dehors d'un bloc ou la fin du prochain bloc). Chaque type de règles @, défini par l'identifiant utilisé, peut avoir sa propre syntaxe et sa propre sémantique. Ces règles sont utilisées afin d'utiliser des méta-données (par exemple @charset ou @import), des informations conditionnelles (par exemple @media ou @document) ou des informations descriptives (par exemple @font-face).
• Les instructions imbriquées sont des instructions qui peuvent être utilisées au sein de règles @ spécifiques : les règles conditionnelles. Une règle conditionnelle peut être composée de plusieurs règles CSS et aussi de certaines règles @. Ces instructions ne s'appliqueront que si une condition donnée est vérifiée :
  • Le contenu d'une règle @media est uniquement appliqué si l'appareil sur lequel fonctionne le navigateur respecte la condition exprimée
  • Le contenu d'une règle @supports est uniquement appliqué si le navigateur supporte la fonctionnalité testée
  • Le contenu d'une règle @document est uniqument appliqué si la page courante respecte les conditions exprimées.

Dans l'exemple vu avant, avez-vous pu identifier les règles @ et les instructions imbriquées associées ?

Au-delà de la syntaxe : écrire du CSS lisible

Comme vous avez pu le voir, la syntaxe CSS n'est pas si complexe. Il s'agit simplement d'écrire des règles et si celles-ci sont incorrectes, elles seront ignorées. Cependant, même quand tout fonctionne correctement, il peut être judicieux de respecter certaines bonnes pratiques qui vous aideront à lire, utiliser et maintenir votre code CSS.

Les blancs

Les caractères blancs sont les espaces, les tabulations et les sauts de lignes. Vous pouvez ajouter des blancs dans votre feuille de style afin que celle-ci soit plus lisible.

Dans notre exemple, nous avons une règle par ligne et presque le minimum de blancs. Dans une feuille de style complexe, cette disposition pourrait être difficilement lisible. Voici quelques méthodes pour ajuster le contenu de la feuille de style (sans changer le comportement final obtenu sur le document web) :

Alignement des blocs

body
  {
  font      : 1em/150% Helvetica, Arial, sans-serif;
  padding   : 1em;
  margin    : 0 auto;
  max-width : 33em;
  }

@media (min-width: 70em)
  {
  body
    {
    font-size: 130%;
    }
  }

h1 
  {
  font-size: 1.5em;
  }

div p,
#id:first-line
  {
  background-color: red;
  background-style: none
  }

div p
  {
  margin : 0;
  padding: 1em;
  }

div p + p
  {
  padding-top: 0;
  }

Compacter les règles

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

Utilisez la disposition qui vous convient le mieux mais dans des projets partagés, respectez la convention de style qui a été définie afin que les feuilles de style soient cohérentes.

Les commentaires

En CSS, les commentaires commencent avec /* et se terminent avec */.

Vous pouvez utiliser les commentaires pour anoter les règles de votre feuille de style. Vous pouvez aussi commenter une partie des règles pour que celles-ci soient inactives (ce qui peut être utile lors des tests).

/* On gère ici la mise en forme des éléments basiques */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /*  Utilisons une plus grand taille de police pour des
     plus grands écrans, afin d'améliorer la lisibilité */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* On gère ici les éléments spécifiques, imbriqués dans le DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

Les prochaines étapes

Vous connaissez désormais tout ce qu'il y a à savoir pour écrire une feuille de style fonctionnelle et qui puisse être maintenue facilement. Il est temps d'approfondir les différents concepts clés en commençant par les sélecteurs CSS qui permettent de créer des effets subtiles grâce à la feuille de style.