Sections :

  1. Indiquez une unité à moins que la valeur ne soit 0 (zéro)
  2. Sensible à la casse
  3. Spécifier des couleurs
  4. Ecrire les sélecteurs 'class' et 'id' sans le nom de l'élément

Indiquez une unité à moins que la valeur ne soit 0 (zéro)

Une erreur commune chez les débutants en CSS, est de ne pas déclarer les unités de longueur pour certains éléments. En HTML, vous pouvez ne pas les déclarer, mais en CSS toutes les ces valeurs de longueur doivent avoir une unité. Il y a deux exceptions : line-height et la valeur 0 (zéro). Notez que la valeur doit être immédiatement suivie par une unité de mesure et qu'il ne faut pas d'espace entre les deux.

Il n'y a pas besoin de spécifier une unité pour la valeur 0 (zéro), car 0 pixel = 0 centimètre = 0 pour toutes autres unités de longueur. En dépit de celà, il n'est pas rare de voir quelque chose comme 

padding:0px
au lieu de 
padding:0
.

Alors que ce n'est pas faux d'indiquer une unité lorsque la valeur est 0 (zéro), c'est une perte de temps et d'espace.

Sensible à la casse

Lorsque les feuilles de styles CSS sont utilisées avec du XHTML, les noms des éléments dans les sélecteurs sont sensibles à la casse. Pour éviter de tomber dans le piège, je recommande de toujours utiliser des minuscules pour les noms d'éléments des sélecteurs CSS.

Spécifier des couleurs

En CSS, lorsque vous utilisez la notation de couleurs en hexadécimale, la couleur est définie par trois paires de chiffres hexadécimaux, vous pouvez écrire cette couleur de manière simplifiée en omettant le deuxième chiffre de chaque paire :

#000 équivaut à #000000, #369 équivaut à #336699.

N'oubliez pas le dièse (#) avant le code couleur !

Une autre astuce est que vous pouvez spécifier des couleurs web sécurisé (web safe colors) en utilisant uniquement des chiffres qui sont des multiples de 3 : 0, 3, 6, 9, C et F. Exemple #99c est une couleur sécurisée, #98c n'en est pas une.

Les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la même dans Netscape Navigator et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.

Des tests approfondis ont cependant révélé qu'en réalité seules 212 couleurs sont sécurisées pour le Web. Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0).

Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bits). L'utilité de la palette adaptée à tous les navigateurs est donc bien moindre si vous développez votre site pour les utilisateurs de systèmes informatiques modernes.

La palette de couleurs sécurisée pour le Web peut s'avérer utile si vous créez des sites pour des appareils différents, comme les organisateurs personnels et les téléphones mobiles. Un grand nombre de ces appareils sont équipés d'un écran noir et blanc (1 bit) ou 256 couleurs (8 bits).

Ecrire les sélecteurs 'class' et 'id' sans le nom de l'élément

Quand vous écrivez un sélecteur qui pointe sur un élément avec une certaine "classe" ou "id", vous pouvez omettre l'élément devant le ( . ) ou ( # ).

Donc à la place d'avoir :

div#contenu { ... }
fieldset.details { ... }

vous avez :

#contenu { ... }
.details { ... }

ainsi vous allez économiser quelques octets pour chaque sélecteur.

C'est particulièrement utile pour les sélecteurs "id" puisqu'ils sont uniques dans un document, ce qui réduit le risque de conflits avec les autres. les "class" peuvent être utilisées autant de fois que l'on veut dans un document et différents types d'éléments peuvent avoir la même "class". Pour styler différement des types d'éléments avec la même "class", vous aurez besoin de spécifier chaque type dans le sélecteur.

Mais attention que ces règles ne sont pas identiques. Si vous écrivez une règle avec un type d'élément et une sans, la règle qui utilise le type d'élément sera prioritaire.

Valeurs par défaut

Vous pouvez très souvent ne pas spécifier de valeur pour une propriété en tenant compte de la valeur par défaut de la propriété. C'est particulièrement important à prendre en compte lorsque vous utilisez des raccourcis pour les propriétés, puisque les propriétés non définies ont les valeurs par défaut correspondantes à chaque propriété.

Par défaut, certaines valeurs ont 0 (zéro) pour le padding et transparent pour le background-color

Étant donné qu'il existe des différences mineures pour les valeurs par défaut entre les navigateurs, certaines personnes initialisent les valeurs margin et padding pour tous les éléments au début de la feuille de style.

* {
margin:0
padding:0;
}

Ne pas redéclarer de valeurs héritées

De nombreuses propriétés héritent des éléments parents dont vous avez spécifié la propriété. Les propriétés de color et font sont les exemples les plus communs de cet héritage.

Attention que certaines propriétés peuvent être dépassées par les feuilles de styles de certains navigateurs. C'est pourquoi vous ne pouvez pas rendre tous les entêtes non gras avec ce type de règle :

body { font-weight:normal; }

Les règles prédéfinies des navigateurs sont plus spécifiques en raison de la feuille de style qui est décrite ci-dessous.

Tirez parti de la feuille de style

La feuille de style vous permet d'utiliser de nombreuses règles pour spécifier des propriétés d'un élément. Vous pouvez redéfinir la même propriété ou définir des propriétés supplémentaires. Mettons que vous avez ce code ci :

<p class="exemple">Exemple : Voici du texte servant de test</p>

Dans la feuille de style, vous pouvez séparer les règles pour spécifier des propriétés qui sont communes à tous les éléments p et celles qui sont spécifiques aux éléments p avec la classe exemple

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.exemple {
font-weight:bold;
color:#600;
}

Les deux règles seront combinées pour les éléments p avec class="exemple". Puisqu'un sélecteur de classe est plus spécifique qu'un type de sélecteur, les propriétés définies dans la deuxième règle seront utilisées quand un conflit se produira, dans ce cas se sera color.

Plus d'informations sur la spécificité d'application des règles CSS sont disponibles sur la documentation CSS

Noms multiples de classes

Vous pouvez appliquer de multiples classes à un élément. Ce qui permet d'écrire plusieurs règles qui définissent différentes propriétés et qui sont appliquées uniquement à la demande. Supposons que vous inscriviez dans une galerie photo, sur certaines images, qu'elles sont libres de droit ou non. Et mettons que sur certaines photos il y a une promotion. Voici ce que ca donnera pour les trois exemples :

<img src="image.gif" class="promotion" alt="" />
<img src="photo.gif" class="libre" alt="" />
<img src="portrait.gif" class="libre promotion" alt="" />

Pour appliquer un style à l'image qui est libre de droit, afin de la différencier des autres, vous pouvez créer une règle pour les éléments ayant comme classe libre et si vous souhaitez démarquer une image en promotion, vous pouvez utiliser la classe promotion pour en faire une règle. Ainsi vous aurez quelque chose comme ceci :

.royaltyfree { border:2px solid #666; }
.special { padding:2px; background:#ff0; }

Toutes les images qui ont une classe promotion auront un "padding" et un fond jaune. Les images qui ont une classe libre auront une bordure et celles qui auront les deux classes, auront une bordure un "padding" et un fond jaune.

Ce n'est qu'un simple exemple, à vous d'aller plus loin. Essayez d'utiliser des noms de classe sémantiquement correct, qui décrivent l'élément et non à quoi il ressemble.

Utilisez des sélecteurs descendants

La non utilisation des sélecteurs descendants par les débutants, est l'exemple le plus courant de l'inefficacité des CSS. Les sélecteurs descendants peuvent vous aider à éliminer un bon nombre d'attributs de classe de votre code et rendre vos sélecteurs beaucoup plus efficace. Prenez le code suivant : 

<div id="subnav">
<ul>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
<li class="subnavitemselected"><a href="#" class="subnavitemselected">Item 1</a></li>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
</ul>
</div>

Avec la feuille de style correspondante :

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

Tout ceci peut-être remplacé par :

<ul id="subnav">
<li><a href="#">Item 1</a></li>
<li class="sel"><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>

et la CSS par :

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

Faites en sorte que vos feuilles de styles et vos pages soient le plus propre possible et vous verrez à quel point se sera plus efficace et facile à relire

Évitez d'entourer les URL avec des guillemets

Pour sauver quelques octets par-ci par-là, ne mettez pas de guillemets dans les images en "background". Ce n'est pas nécessaire de les entourer et surtout il arrive que celà pose même des problèmes avec certains navigateurs, comme par exemple avec IE/Mac

Groupe de sélecteurs

Quand plusieurs types d'éléments, classes, ou "id" partagent les mêmes propriétés, vous pouvez grouper ces sélecteurs, pour éviter d'avoir à spécifier la même propriété plusieurs fois. Celà économisera beaucoup d'octets. Si vous mettez chaque sélecteur sur la même ligne ou si vous les séparés par un retour à la ligne, c'est une question de goût.

Ainsi, pour indiquer la police, la couleur, et les marges pour tous les éléments de titre, vous pouvez procédez de la sorte : 

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

Si on compare le fait d'indiquer individuellement les propriétés pour chaque type d'élément, ceci nous fait gagner beaucoup d'espace.Vous pouvez alors indiquer séparément toutes les propriétés qui sont différentes pour certains de ces éléments, par exemple "font-size" : 

h1 { font-size:2em; }
h2 { font-size:1.6em; }

Indiquez les styles de liens dans le bon ordre

En appliquant une CSS aux différents états d'un lien vous devez penser à l'ordre des règles. Dans la plupart des cas vous allez les indiquer dans cet ordre :link :visited :hover :active LVHA. L'ordre est affecté spécifiquement. Chaque sélecteur a une spécificité. Si deux sélecteurs sont appliqués au même élément, celui qui a une plus grande spécificité l'emporte. 

p.toto { color:green; } /* Spécificité = 1.1 */
p { color:red, } /* Spécificité = 1 */
Tous les paragraphes qui auront une classe "toto" seront en vert et non pas en rouge. Les deux sélecteurs sont appliqués et les deux essayent de régler la couleur, donc le plus spécifique l'emporte. De même si nous avons ceci : 
p.toto { color:green; } /* Specificité = 1.1   */
p { font-family:Courier; } /* Specificité = 1   */

Tous les paragraphes seront en "Courier", mais ceux qui auront la classe "toto" seront en Courier ET en vert.

Voyons comment les pseudos-classes sont elles affectées, ils ont tous la même importance et donc les styles suivant ont tous la même spécificité : 

   a:link {color:blue;} /* specificité = 1.1 */
   a:active {color:red;} /* specificité = 1.1 */
   a:hover {color:magenta;} /* specificité = 1.1 */
   a:visited {color:purple;} /* specificité = 1.1 */

Tous peuvent s'appliquer à un hyperlien, et dans certains cas, plusieurs seront appliqués. Par exemple, un lien non visité peut être un lien de survol et actif en même temps puisque c'est un lien non visité. Puisque trois des règles ci-dessus s'appliquent à l'hyperlien, et que tous les sélecteurs ont la même spécificité, c'est le dernier sélecteur qui l'emporte. Par conséquent, le style "actif" n'apparaîtra jamais, parce qu'il sera toujours dépassé par le style de "lien de survol". Considérons maintenant un hyperlien qui a été visité. Il est toujours et pour toujours violet, parce que son style "visité" l'emporte sur tous les autres états y compris "actif" et de "survol".

Voici pourquoi l'ordre en CSS est :

a:link
a:visited
a:hover
a:active

Annuler le positionnement d'un flottant (propriété 'float')

Un problème très courant en CSS, est de trouver un moyen de régler le problème de dépassement du contenu d'une boîte en 'float' dans un conteneur. Un exemple typique de ce genre de problème, une image très haute avec la propriété 'float', dans une zone centrale de texte, si la longueur du texte n'est pas suffisante pour couvrir la hauteur de l'image, celle ci dépassera de sa boîte. Exemple

Pour résoudre ce problème, on rajoutait un élément (div, br ou hr) à la suite avec comme propriété 'clear:both'. Mais là où la feuille de style est censée alléger notre page HTML, nous l'alourdissons encore.
Voici donc une façon de régler le problème, il suffit de rajouter la propriété 'overflow:auto' à la boîte et nous obtenons ce résultat.

Il se peut que cette méthode ne convienne pas à votre design, à vous d'utiliser la méthode la plus adéquate.

Centrage horizontal

Voici une petite astuce pour centrer horizontalement un élément en CSS, vous devez spécifier la largeur et les marges horizontales de l'élément. Si votre page est contenu dans un élément de la sorte : 

<div id="wrap">
<!-- Contenu de votre page -->
</div>

vous pouvez centrer votre design comme ceci :

#wrap {
width:800px; /* Taille de votre maquette */
margin:0 auto;
}

La largeur de la boîte '#wrap' est soustraite de la largeur disponible de la fenêtre, la différence est également répartie sur les marges gauche et droite.

Malheureusement Internet Explorer 5 pour PC ne comprend pas cette déclaration mais le bug qui lui fait appliquer la propriété 'text-align' aux éléments de type bloc peut être mis à contribution. Il faudra donc utiliser la déclaration suivante :

body {
text-align:center;
}
#wrap {
width:760px; /* Taille de votre maquette */
margin:0 auto;
text-align:left;
}

La première règle fait qu'IE5/Win centre tout ce qui se trouve dans le corps de la page, les autres navigateurs centreront uniquement le texte. Etant donné que la propriété text-align est transmise en héritage, tout le texte du document sera centré, ce n'est sûrement pas ce que vous souhaitez, donc la règle suivante va remettre l'alignement des textes à gauche à l'intérieur du conteneur "#wrap"

Importer et masquer des feuilles de styles

Une manière pratique de masquer les feuilles de styles aux anciens navigateurs et d'utiliser '@import'.

@import url("general.css");

Cependant la plupart du temps la feuille de style n'est pas masqué pour Internet Explorer. Il conviendra donc d'utiliser cette syntaxe :

@import "general.css";

de cette manière Internet Explorer ne pourra pas importer la feuille de style, on sauve quelques octets par la même occasion. Pour voir la manière dont est appliqué les règles par les navigateurs, suivre ce lien