Dans cette partie, je vais vous donner quelques astuces sur le groupement de sélecteurs, l'arrêt des flottements, le centrage horizontal, l'importation de feuilles de styles et quelques autres sur la résolution de problèmes. Si vous pensez que quelque chose manque, consultez la première partie où il en est peut-être question.

Groupement de sélecteurs

Lorsque plusieurs types d'éléments, de class et de id partagent les mêmes propritétés, vous pouvez grouper les sélecteurs pour éviter de
spécifier les mêmes propriétés plusieurs fois. Ceci fera économiser de l'espace — potentiellement beaucoup. Mettre alors chaque sélecteur sur la même ligne ou sur des lignes séparées par un retour de chariot est affaire de goût personnel.

Ainsi, pour spécifier la famille de police, la couleur et les marges de tous les éléments d'en-tête, vous pouvez faire ceci :

   1.             h1,h2,h3,h4,h5,h6 {

   2.             font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

   3.             color:#333;

   4.             margin:1em 0;

   5.             }
       

Ceci est beaucoup plus court que de définir ces propriétés individuellement pour chaque type d'élément. Plus les propriétés similaires sont nombreuses, plus l'économie est évidente.
       

Vous pouvez alors spécifier séparément les propriétés qui ne sont pas les mêmes pour l'un ou l'autre de ces éléments. Par exemple la taille de police :   

   1.             h1 { font-size:2em; }

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

   
Spécifier les styles relatifs aux liens dans le bon ordre

Lorsqu'il s'agit d'appliquer des styles aux différents états d'un lien, vous devez penser à l'ordre des règles. Dans la plupart des cas, vous voudrez les spécifier dans l'ordre :link :visited :hover
:active. Prenez la lettre initiale de chaque état et vous obtenez « LVHA », avec quoi vous pouvez former les mots « LoVe » et « HAte » ou toute autre expression facile à mémoriser. L'ordre est affecté par la spécificité, comme l'explique bien
Eric Meyer dans Link Specificity.

Peut-être voudrez-vous ajouter aussi l'état :focus pour aider ceux qui naviguent au clavier à mieux percevoir le lien sélectionné. L'endroit où mettre la règle pour :focus dépend de ce que vous voulez faire. Si vous voulez que les éléments qui reçoivent l'attention se comportent comme sur un :hover, placez :focus avant :hover. Si vous voulez produire un autre effet, placez-le après.
   
Arrêter les flottements

       
Un problème CSS très commun consiste à savoir quoi faire pour empêcher qu'un objet en flottement dans un conteneur déborde la limite inférieure de ce conteneur. Une grande image en flottement dans la partie centrale du texte est un exemple typique. S'il n'y a pas assez de texte pour longer toute la hauteur de l'image, cette dernière va déborder de la boîte dans laquelle elle se trouve. Il s'agit parfois de ce que vous voulez faire, parfois non.
       

La manière traditionnelle de contrôler la situation consistait à ajouter un élément de plus, soit un div ou un br, à la suite de l'élément en flottement et de le styler avec clear:both. Ajouter des éléments de plus n'est pas très propre. Heureusement, il existe une méthode plus économique : Comment arrêter des flottements sans ajouter de balises.

       
Ces deux méthodes fonctionnent très bien, à moins que vous n'ayez une mise en page qui nécessite des flottements antérieurs à l'élément dont vous voulez arrêter le flottement. C'est ici qu'arrive une astuce jusqu'à tout récemment méconnue pour contrôler les flottements multiples à l'intérieur du contenu d'une page : l'usage de la propriété overflow, originellement décrite dans Simple Clearing of Floats. Cette méthode est également analysée et discutée dans Clearance et Super simple clearing floats, entre autres.

Laquelle de ces méthodes utiliser dépend des circonstances. Lisez sur le sujet, expérimentez et décidez.
   

Je n'entrerai pas dans le détail des flottements CSS ici. Voici quelques excellents articles qui en expliquent le fonctionnement : Floatutorial, Containing Floats et Float Layouts.
   
Centrage

Un truc simple, mais qui vaut la peine d'être mentionné car il traite d'un problème sur lequel achoppe de nombreux débutants CSS. Pour centrer horizontalement un élément avec CSS, vous devez spécifier la largeur de l'élément, ainsi que ses marges horizontales. Si votre mise en page est comprise dans un conteneur comme ceci :

   1.             <div id="wrap">

   2.             <!-- Votre mise en page va ici -->

   3.             </div>

vous pouvez la center horizontalement avec le règle CSS suivante :

   1.             #wrap {

   2.             width:760px; /* Change this to the width of your layout */

   3.             margin:0 auto;

   4.             }

La largeur du conteneur #wrap est soustraite de la largeur de fenêtre disponible et la différence sera également répartie entre les marges de gauche et de droite. La largeur n'a pas besoin d'être fixe et vous pouvez utiliser l'unité de mesure que vous voulez.
   

IE5/Win ne comprend pas cela, mais le bogue qui lui fait appliquer la propriété text-align aux éléments de type bloc peut être mis à contribution. Si vous voulez que la mise en page soit centrée par rapport à la fenêtre du navigateur, utilisez plutôt la CSS suivante :

   1.             text-align:center;

   2.             }

   3.             #wrap {

   4.             width:760px; /* Change this to the width of your layout */

   5.             margin:0 auto;

   6.             text-align:left;

   7.             }

La première règle fera que tout le contenu de l'élément body sera centré dans IE5/Win. Les autres navigateurs ne centreront que le texte. Mais puisque la propriété text-align se transmet en héritage, tout le texte du document sera centré. Il est peu probable que ce soit ce que vous vouliez. Aussi la règle suivante va-t-elle remetre à gauche l'alignement des textes à l'intérieur du conteneur #wrap.
   

Évidemment, cette technique peut être utilisée pour center horizontalement n'importe quel élément de type bloc à l'intérieur d'un autre.

Et si le support d'IE5/Win n'est pas requis, alors vous n'avez pas besoin du conteneur #wrap pour centrer la mise en page. Vous pouvez styler l'élément body à la place. Vous serez au moins avisés que cela ne fonctionne pas dans IE5/Win.

   
Importer et cacher des CSS

La manière commune de cacher des fichiers CSS aux anciens navigateurs consiste à utiliser l'astuce du @import. Cependant, la manière dont elle est le plus souvent mise en œuvre n'a pas d'effet dans Internet Explorer 4 :

   1.             @import url("main.css");

J'ai dû me creuser la tête un moment. J'avais lu quelque part que l'usage d'@import devait cacher les CSS aux anciens navigateurs, mais lorsque j'ai vérifié dans IE4, la feuille de style était importée, avec des résultats horribles. Utilisez plutôt la syntaxe suivante :

   1.             @import "main.css";

Cela va empêcher Internet Explorer 4 d'importer le fichier. Et vous aurez économisé quelques octets en plus. Pour connaître le rapport entre la syntaxe utilisée dans la règle @import et ses effets sur tel ou tel navigateur, voir centricle's css filter chart.

Donner à Internet Explorer ce qu'il réclame

Quelquefois — pour ne pas dire la plupart du temps —, vous devez fournir une règle différente à Internet Explorer pour en contourner les bogues et les limites d'implémentation CSS.

Il y a plusieurs hacks CSS pour le faire, mais j'essaie de n'utiliser que deux d'entre eux; et encore, seulement lorsque je ne peux arriver à faire ce que je veux sans devoir y recourir. Avec la récente annonce de Microsoft d'une version beta d'IE7 pour Windows, qui comprendra ou non un meilleur support CSS, et qui changera ou non la manière dont les hacks CSS fonctionnent, je pense que la façon la plus sûre de tenir compte d'IE/Win consiste à utiliser les commentaires conditionnels, comme il sera montré plus loin.

Pour cacher une règle à IE, vous pouvez utiliser un sélecteur d'enfant :

   1.             html>body p {

   2.             /* déclarations */

   3.             }
   

À l'inverse, le hack du sélecteur universel aura pour effet de cacher une règle à tous les navigateurs, sauf IE :

Quelquefois, vous voudrez passer une règle CSS à IE/Win, mais pas à IE/Mac. Pour ce faire, vous pouvez utiliser le hack de la barre oblique inversée :

   1.             /* \*/

   2.             * html p {

   3.             déclarations

   4.             }

   5.             /* */

             
L'autre option — et je tends de plus en plus à y recourir puisqu'elle semble plus durable à long terme que les hacks CSS — consiste à faire usage des commentaires conditionnels propriétaires de Microsoft. Vous pouvez y recourir pour fournir à IE/Win une feuille de sytle qui lui est destinée en propre. Je pense qu'il s'agit d'une bonne façon de recourir aux hacks tout en laissant la CSS principale propre. Du coup, vous évitez que votre « véritable » feuille de styles ne soit invalidée en raison des extensions CSS propres à IE qu'il est parfois nécessaire d'utiliser.

   1.             <!--[if IE]>

   2.             <link rel="stylesheet" type="text/css" href="ie.css" />

   3.             <![endif]-->

Ceci aura pour effet secondaire de prévenir le scintillement de la page qui peut se produire dans IE/Win lorsqu'il n'y a aucun élément link ou script dans l'en-tête du document.

   
Quelle est la grosseur de cette boîte?

Lorsque quelque chose ne va pas, commencez par valider votre CSS. Personne n'est à l'abri d'une faute de frappe.

S'il n'y a aucune erreur dans la CSS, analysez ce qui se passe. J'aime appliquer des couleurs d'arrière-plan aux éléments avec lesquels j'ai des problèmes pour mieux voir l'espace qu'ils occupent. Quelques-uns suggèrent l'usage des bordures, qui peuvent être utiles dans certains cas. Le problème avec cette approche vient de que les bordures auront pour effet d'augmenter les dimensions de l'élément, et que les bordures du haut et du bas empêcheront la fusion des marges verticales. Les couleurs d'arrière-plan sont généralement plus sûres.

La propriété outline peut également servir à la résolution de problèmes. Les contours (outlines) sont semblables aux bordures, mais n'affectent pas les dimensions ou le positionnement de l'élément auquel on les applique ou de n'importe quel autre élément. En revanche, très peu de navigateurs supportent la propriété outline. Autant que je sache, Safari, OmniWeb et Opera sont les seuls à le faire.

   
Style d'écriture CSS

Il y a plusieurs manières d'utiliser l'indentation, les retours à la ligne et les espacements lorsqu'on rédige une feuille CSS. J'ai fait un peu de va-et-vient avant d'adopter le style suivant (pour le moment, du moins) :

   1.             sélecteur1,

   2.             sélecteur2 {

   3.             propriété:valeur;

   4.             }
   

Lorsque je combine des sélecteurs, je les mets normalement sur des lignes distinctes. Je trouve qu'il est ainsi plus facile de s'y retrouver dans un fichier CSS. Ensuite, je laisse une espace entre la fin du dernier sélecteur et l'accolade ouvrante. Je mets chaque déclaration sur une ligne séparée, sans indentation et sans espaces autour du deux-points séparant les propriétés des valeurs.

Je termine toujours chaque déclaration avec un point-virgule. Cette façon de faire n'est pas nécessaire pour la dernière déclaration d'une règle, mais il est trop facile d'oublier un point-virgule avant d'ajouter une nouvelle déclaration et il peut être difficile ensuite de localiser le problème.

Finalement, l'accolade fermante va sur une ligne qui lui est propre.

Oui, les espacements peuvent aider à la lisibilité, mais j'aime en mettre le moins possible tout en m'efforçant de ne pas trop nuire à la lisibilité.

Bien sûr, il y a des exceptions à ces règles et je ne suis pas toujours pleinement cohérent avec mon propre style d'écriture CSS. J'y travaille. Et d'ailleurs, nous avons tous droit à l'erreur, n'est-ce pas?

   
Il y en aurait encore à dire

Dans ces deux articles, j'ai exposé certaines des astuces que j'utilise lorsque je rédige ou que je mets au point une feuille de style. Il y en a d'autres, comme on sait, et peut-être qu'un jour il y aura une troisième partie. Ai-je omis quelque chose d'important tel votre astuce ou votre truc préféré? Laissez-le-moi savoir.

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

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

# Original anglais : CSS tips and tricks, Part 2

Auteur : Roger Johansson

#Date de parution : 21 mars 2005

Traduction : Normand Lamoureux

Date de traduction : 2 juillet 2005