blog

Vestiges d’un CSS Guru

Billet

5 bonnes pratiques CSS

En attendant le prochain bdbx (déjà prêt), je vous propose 5 bonnes pratiques en CSS. A force de bosser des feuilles de style, il m’arrive de ne plus faire quelques erreurs même si je n’arrive pas encore à toujours trouver la solution optimale directement. Ici, je ne parlerai pas de pratiques basiques plutôt évidentes (comme par exemple d’utiliser un maximum les notations raccourcies), mais d’autres plus subtiles auxquelles je ne pensais pas auparavant.

  1. Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur
  2. Bien notifier qu’un lien est en display:block
  3. Ajouter un background-color avec le background-image
  4. Utiliser le position:relative en dernier recours
  5. Mettre un id au body

Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur

Le positionnement absolu est une propriété à utiliser avec précision et précaution, notamment parce qu’il sort l’élément du flux courant. Les blocs suivants en font les frais, ainsi que le bloc contenant. On peut donc l’utiliser dans un contexte bien défini, qui ne fluctue pas dans le temps. Par exemple, dans un header à hauteur fixe, c’est tout à fait envisageable.
Un bloc aura une hauteur nulle si il ne contient que des éléments en position:absolute et si bien sûr cette hauteur n’est pas définie. Ca rappelle bien évidemment le positionnement flottant (qui sort aussi les élements du flux courant). Mais il y a une différence notable : on peut annuler le flottement avec un clear, alors qu’un positionnement absolu, il n’y a pas de roue de secours.

Bien notifier qu’un lien est en display:block

Les liens, c’est super important. Pour naviguer, pour afficher d’autre blocs, pour actionner un élément… Bref : pour interagir. A la base, c’est une balise en ligne. Mais rien n’empêche de la transformer avec display:block. On pourra ainsi utiliser les propriétés d’un lien (et notamment la pseudo-classe :hover qui ne fonctionne que sur les liens sous IE6) sur une balise de type bloc.

Ok, on a un lien en bloc, mais il faut le notifier. Pourquoi ? Et bien, étant donné qu’il permet l’intéraction, il faut avertir l’utilisateur qu’en cliquant sur telle zone, il déclenchera telle action. Lorsque la “main” s’affiche, il faut savoir ce qu’elle va occasionner si l’on clique.

Comment notifier alors ? Déjà, changer le background est une bonne pratique. En effet, sur un bloc, le fond est souvent bien visible, et changer sa couleur est facile et visible. Aussi, souligner le texte (qui souvent n’occupe qu’une petite zone du bloc en question) permet de savoir qu’en cliquant par exemple 20px à droite du texte, et bien ça correspond au même lien.

Ajouter un background-color avec le background-image

Les images de fond, c’est joli et c’est pratique. C’est sans doute l’élément de web design le plus utilisé, et qui a une grande utilité. Mais lorsqu’on définit une image de fond, il ne faut surtout pas oublier d’ajouter une couleur de fond, même si elle ne sera au final pas visible.

En théorie, si une background-image occupe tout le fond, on voit pas le background-color. Mais si les images ne s’affichent pas pour x raison (problème côté serveur, option côté client…) , que verra l’utilisateur ? Ok, ce n’est pas très courant de ne pas pouvoir charger les images. Ce qui est très courant par contre, c’est qu’elles mettent du temps à se charger. Ca m’est souvent arrivé de voir du texte blanc sur fond blanc pendant que l’image de fond violette se charge. En attendant, on aurait pu m’afficher une couleur de fond violette, histoire de voir qu’il y avait du texte à cet endroit là.

Utiliser le position:relative en dernier recours

Le positionnement relatif, c’est vraiment le truc à éviter. Lorsqu’on l’utilise, l’élément garde sa “place” dans le flux courant, mais on le positionne où l’on veut par rapport à son positionnement normal. Donc, tous les autres blocs ne savent pas que le bloc a changé de place. Et surtout, a vue d’oeil, on ne remarque pas forcément la différence.

Ca pose problème parce qu’en travaillant sur les autres blocs, on peut rencontrer des problèmes d’espacement assez incongrus dont on ne connaît pas l’origine. “Mais pourtant ce bloc devrait être là !”. Oui mais cet autre bloc positionné en relatif n’est en réalité pas “ici” mais “là”. Donc le bloc suivant n’est pas “là” mais “ici”. Bref, à éviter autant que possible.

Mettre un id au body

Le body, c’est la balise parent de toute, l’ancêtre, le doyen (la balise html, ça compte pas) ! Elle est unique dans la page, alors pourquoi mettre un id ? Pour différencier chaque page, et ainsi avoir une structure page par page. Ici la page d’accueil (id=”home”), les archives (id=”archives”), le portfolio (id=”portfolio”)…

Un exemple d’utilisation : imaginez une navigation horizontale avec des sous-menus qui changent selon les pages (par exemple sur allocine.fr ou fredcavazza.net ). Lorsqu’on va cliquer sur “DVD” par exemple sur Allocine, l’onglet est actif et le sous-menu apparaît. Souvent, on utilise une classe de type class=”on” sur l’onglet actif. Il faut donc modifier le code HTML du menu à chaque fois qu’on change de rubrique.

Une solution serait de mettre un id=”dvd” sur le body et d’utiliser l’arboresence pour modifier la navigation selon la page qu’on visite. On peut ainsi garder exactement le même code HTML pour le menu, quelle que soit la page que l’on visite. Pratique non ?