Tutoriel CSS

GG le sympa · #1 28-08-2006 à 13:47

Ayant fait largement usage des CSS depuis quelques années, j'ai appris quelques astuces susceptibles de rendre les CSS plus efficaces ou encore de résoudre un problème spécifique. J'aimerais ici partager mes astuces CSS préférées et expliquer quelques-unes des erreurs de débutant les plus fréquentes. Si vous avez une certaine expérience des CSS, peut-être aurez-vous déjà vu la plupart de ces trucs et astuces, mais — qui sait — peut-être aussi en trouverez-vous un ou deux que vous n'avez jamais vu.

Initialement ceci devait constituer un seul article, mais la liste des trucs et astuces augmentant, j'ai décidé de faire deux parties afin de rendre le tout moins indigeste.

Utiliser les raccourcis d'écriture CSS

Pour économiser de l'espace et rendre vos fichiers CSS plus faciles à lire, je recommande de faire usage d'une syntaxe abrégée pour déclarer plusieurs propriétés dans une même déclaration. La manière de procéder ayant été décrite dans mon article sur les « raccourcis d'écriture CSS », je me permets de vous y référer pour plus de détails.

Spécifier l'unité de mesure, à moins que la valeur ne soit 0

Ne pas spécifier d'unité de mesure à une longueur est une erreur très commune chez les débutants. On peut s'en passer en HTML, mais en CSS toute longueur doit avoir une unité de mesure. Il y a deux exceptions: line-height et la valeur 0 (zéro). Notez que la valeur doit être immédiatement suivie de l'unité de mesure et qu'il n'y a pas d'espace entre les deux.

Il est inutile de spécifier une unité de mesure à une valeur 0 (zéro), puisque zéro pixel égal zéro centimètre égal zéro n'importe quelle autre unité de mesure. Il est néanmoins fréquent de voir des choses comme padding:0px, alors que padding:0 suffirait.

Même s'il n'y a rien d'erroné dans le fait de spécifier une unité de mesure à une valeur zéro, c'est une perte d'espace et — à mon avis — cela fait un peu brouillon.

Attention à la casse

Lorsque les CSS sont employées avec XHTML, les noms d'éléments utilisés comme sélecteur sont sensibles à la casse. Pour éviter les ennuis qui pourraient s'ensuivre, je recommande de toujours écrire les nom d'éléments dans les sélecteurs CSS en bas-de-casse.

La valeur des attributs class et id étant sensible à la casse en HTML et en XHTML, évitez les mélanges de casse dans le nom des attributs class et id. Si vous devez pour quelque raison faire un tel mélange, redoublez de prudence pour être sûr que la casse utilisée dans les CSS correspond à celle utilisée dans le fichier HTML.

Spécifier les couleurs

Cette astuce figure à l'article précité, mais je l'utilise tellement que je vais la répéter ici : dans un fichier CSS, lorsqu'une couleur spécifiée en notation hexadécimale se compose de trois doublets, vous pouvez écrire le tout d'une manière plus efficace en omettant chaque deuxième chiffre. Ainsi :

#000 est identique à #000000 et #369 est identique à #336699.

Et n'oubliez pas de mettre le signe dièse (#) devant un code de couleur.

Une autre astuce relative à la couleur vient de ce que vous pouvez définir des couleurs Web sécurisées en utilisant seulement des multiples de 3 comme valeur de rouge, de vert et de bleu soit 0, 3, 6, 9, C et F. Ainsi, #99c est une couleur Web sécurisée, alors que #98c, non.

Écrire les sélecteurs class et id sans noms d'éléments

Lorsque vous écrivez un sélecteur pointant vers un élément assorti d'une class ou d'un id, vous pouvez omettre le nom de l'élément avant le . (sélecteur de class) ou le # (sélecteur de id).

Ainsi, plutôt que d'écrire :

1. div#content { /* déclarations */ }

2. fieldset.details { /* déclarations */ }

vous pouvez écrire :

1. #content { /* déclarations */ }

2. .details { /* déclarations */ }

et économiser quelques octets sur chaque sélecteur.

Ceci est particulièrement utile pour les sélecteurs id, puisque leur emploi unique dans un même document réduit le risque de conflit entre plusieurs règles. Au contraire, les noms de class peuvent être attribués à différents types d'éléments et utilisés un nombre indéfini de fois dans un même document. Pour styler différemment plusieurs types d'éléments avec le même nom de class, vous devrez spécifier le nom de l'élément dans le sélecteur.

Veuillez noter que les précédentes règles ne sont pas identiques. Si vous écrivez une règle avec le type de l'élément dans le sélecteur et une autre sans, la règle avec un type d'élément sera de priorité plus élevée.

Les valeurs par défaut

Il est souvent possible de ne pas spécifier la valeur d'une propriété en tablant sur sa valeur par défaut. Lorsque vous faites usage des raccourcis d'écriture CSS, il est important de savoir que toute valeur non spécifiée d'une propriété aura pour effet de lui assigner sa valeur par défaut.

Parmi les valeurs par défaut fréquentes, on a 0 pour padding (bien qu'il y ait des exceptions) et transparent pour background-color.

Puisqu'il y a de légères différences entre les valeurs par défaut des navigateurs, plusieurs font une réinitialisation globale des espaces blancs en mettant à zéro les valeurs de margin et de padding de tous les éléments au début de leur feuille de styles :

1. * {

2. margin:0;

3. padding:0;

4. }

Ne pas déclarer les valeurs héritées

Les valeurs de plusieurs propriétés se transmettent aux descendants de l'élément pour lequel elles ont été spécifiées. Les valeurs de color et de font sont les exemples les plus patents d'un tel comportement.

Veuillez noter que certaines propriétés peuvent être écrasées par la feuille de styles propre à l'agent utilisateur ; autrement dit, par les valeurs par défaut du navigateur. C'est d'ailleurs pourquoi la règle suivante ne suffit pas à faire que les en-têtes n'apparaissent pas en gras :

1. body { font-weight:normal; }

Les règles prédéfinies du navigateur sont plus spécifiques en raison de la cascade, comme nous allons maintenant le voir.

Tirer avantage de la cascade

La cascade vous permet d'appliquer plusieurs règles à un même élément. Vous pouvez alors redéfinir toutes les propriétés ou seulement les propriétés additionnelles. Supposons le balisage suivant :

1. <p class="update">Update: Lorem ipsum dolor set</p>

Dans le code CSS, vous pouvez séparer les règles communes à tous les éléments p et celles qui sont spécifiques aux éléments p avec class="update" :

1. p {

2. margin:1em 0;

3. font-size:1em;

4. color:#333;

5. }

6. .update {

7. font-weight:bold;

8. color:#600;

9. }

Les deux règles seront appliquées aux éléments p avec class="update". Puisqu'un sélecteur class est plus spécifique qu'un sélecteur de type, les propriétés définies dans la deuxième règle auront priorité sur celles de la première en cas de conflit.

On trouvera plus d'information sur la manière dont se fait le calcul de la spécificité d'une règle CSS dans la spécification CSS 2.1.

Plusieurs noms de class

Vous pouvez attribuer plusieurs noms de class à un même élément. Ce qui vous permet d'écrire plusieurs règles pour définir différentes styles, et ensuite d'appliquer seulement celles dont vous avez besoin :

1. <img src="foo.gif" class="special" />

2. <img src="bar.gif" class="royaltyfree" />

3. <img src="baz.gif" class="royaltyfree special" />

Pour styler les images libres de droits différemment des autres, vous pouvez définir une règle pour les éléments ayant royaltyfree comme nom de class, et si vous voulez mettre en évidence les images tombant sous le coup d'une offre spéciale vous pouvez définir une autre règle CSS avec special comme nom de class.

Le code CSS pourra alors ressembler à ceci :

1. .royaltyfree { border:2px solid #666; }

2. .special {

3. padding:2px;

4. background:#ff0;

5. }

Toute image ayant special comme nom de class apparaîtra sur fond jaune. Celles ayant royaltyfree comme nom de class auront une bordure. Et celles ayant les deux noms de class en même temps apparaîtront à la fois avec une bordure et sur fond jaune.

Et vous pouvez pousser l'idée encore plus loin — ceci n'est qu'un exemple. Choisissez des noms de class significatifs qui décrivent ce qu'un élément est ou fait, plutôt que ce dont il a l'air.

Utiliser les sélecteurs descendants

Un des exemples les plus fréquents de CSS inefficace qu'il m'a été donné de voir chez les débutants est celui de ne pas utiliser de sélecteurs descendants. Les sélecteurs descendants peuvent vous aider à éliminer plusieurs attributs de class de votre balisage et rendre vos sélecteurs CSS plus puissants. Supposons le code HTML suivant :

1. <div id="subnav">

2. <ul>

3. <li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>

4. <li class="subnavitemselected"><a href="#" class="subnavitemselected">Item 1</a></li>

5. <li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>

6. </ul>

7. </div>

Lequel peut être joint au code CSS suivant :

1. div#subnav ul { /* Styles */ }

2. div#subnav ul li.subnavitem { /* Styles */ }

3. div#subnav ul li.subnavitem a.subnavitem { /* Styles */ }

4. div#subnav ul li.subnavitemselected { /* Styles */ }

5. div#subnav ul li.subnavitemselected a.subnavitemselected { /* Styles */ }

Vous pouvez remplacer tout ce qui précède par le balisage suivant :

1. <ul id="subnav">

2. <li><a href="#">Item 1</a></li>

3. <li class="sel"><a href="#">Item 1</a></li>

4. <li><a href="#">Item 1</a></li>

5. </ul>

et le code CSS suivant :

1. #subnav { /* Styles */ }

2. #subnav li { /* Styles */ }

3. #subnav a { /* Styles */ }

4. #subnav .sel { /* Styles */ }

5. #subnav .sel a { /* Styles */ }

Gardez vos codes HTML et CSS le plus propre possible et il n'en seront que plus efficaces et faciles à lire.

/////////////////////////////////////////////////

# Original anglais : CSS tips and tricks, Part 1

# Auteur : Roger Johansson

# Date de parution : 15 mars 2005

# Traduction : Normand Lamoureux

# Date de traduction : 15 mai 2005

L'ensemble de ce texte est placé sous license CC BY-SA

#1 28-08-2006 à 13:47

Re : Tutoriel CSS

Réponse rapide

Pied de page des forums