Steve Frécinaux

CSS: "Où en étais-je ?" et marques-pages précis

En lisant un document sur le RDF, document plutôt long et fastidieux, qu’il est impossible de lire d’une traite, je me suis dit qu’il serait pratique de connaitre en toute occasion le lien direct vers le dernier titre lu, et ce sans avoir à regarder le code-source de la page, pour débusquer les id. Cette idée n’est pas neuve, Karl l’applique déjà sur son site, et Laurent Denis appliquait (et expliquait) déjà exactement le même principe que celui que je vais expliquer ici.

L’idée, donc, consiste à afficher l’id du titre juste après celui-ci, en utilisant le pseudo-élément CSS :after, afin de toujours savoir nous nous trouvons sur la page. Il suffit alors d’ajouter ledit id à l’URL pour avoir le lien direct vers l’endroit où nous avons interrompu la lecture.

Ici, je vais parler d’un bout de code que j’ai ajouté au fichier userContent.css de mon navigateur (Firefox 0.8). Donc, pour ne pas modifier trop conséquament le layout des sites sur lesquels vont s’appliquer la règle, je décide d’afficher notre petite “infobulle” lors du passage de la souris, ou autrement dit sur la pseudo-classe :hover.

Le premier jet, grossier, ressemble à cela. Ce bout de feuille de style fait ce qu’on lui demande, sans plus : afficher le contenu de l’attribut id après l’élément, lors du passage de la souris, et ce pour tout élément ayant un attribut id.

*[id]:hover:after {
   content:"#" attr(id);
}

Rien n’empêche évidemment d’ajouter un peu de mise-en-forme. Par exemple, pour que le résultat ressemble davantage à une info-bulle, il est possible de lui donner une bordure, une couleur de fond, etc. Par exemple :

*[id]:hover:after {
  content:"#" attr(id);
  padding:0 4px;
  margin:0 4px;              
  font:italic 1em/1em sans-serif;
  color:black;
  background:yellow;
  border:solid 1px black;
}

Voilà, notre règle fonctionne. Elle fonctionne même assez bien, sauf que le fait que la bulle s’affiche pour n’importe quel élément (et donc déforme l’interface) est assez embêtant, en particulier pour l’élément <div> qui est utilisé pour la mise en forme. On va donc restreindre l’application de la règle aux éléments de titre, ainsi qu’aux ancres dont l’attribut id ou name est défini, car c’est sur les titres que l’on risque le plus souvent de s’arrêter, et parce que l’ancre a été fournie pour pouvoir faire un lien direct vers son emplacement dans la page… Remplaçons donc la première ligne par ce qui suit :

h2[id]:hover:after, 
h3[id]:hover:after, 
h4[id]:hover:after, 
h5[id]:hover:after, 
h5[id]:hover:after, 
a[id]:hover:after, 
a[name]:hover:after {

Vous remarquerez l’absence de h1. La raison en est simple, c’est que cet élément tient lieu de titre de la page, et un lien vers celui-ci n’a pas beaucoup d’intérêt. De plus, avec les FIR, très fréquents sur ces éléments ça pourrait donner des résultats pour le moins étrange

Voilà, je crois que ce serait à peu près tout, si ce n’est que dans l’état, lorsque l’on passe sur un titre et que son id s’affiche, avec le moteur Gecko, le titre clignotte et les marges se modifient. J’avoue avoir cherché un peu à ce sujet, et je vous livre le secret : ce problème est dû à l’attribut CSS margin. L’astuce pour l’éviter est donc tout naturellement de mettre la marge du bas des titres à 0.

h2,h3,h4,h5,h6 {
  margin-bottom:0;
}

On pourrait remplacer cette marge par un padding-bottom, mais j’ai préféré éviter, parce que j’ai remarqué que beaucoup de pages CSS ne définissaient pas de padding pour les titres, et donc le résultat final était un peu déformé. Rien de bien grave, donc !

Une amélioration que j’aurais voulu y apporter, c’est utiliser un positionnement absolu sur la vignette ainsi générée, pour ne pas déformer du tout la page visitée. Mais j’ai l’impression que le positionnement absolu ne fonctionne pas sur :after. Par contre, on peut très facilement utiliser display:block, pour avoir quelques résultats intéressants, lors de la mise en plis d’un site.

Vous remarquerez que je n’ai pas utilisé de !important dans les codes ci- dessus. La raison est que je préfère laisser au site visité le loisir de passer par dessus ces clauses (par exemple, Karl & Cow utilise aussi hx:after.

J’espère que ceci pourra vous être utile. Je remets le code complet :

h2,h3,h4,h5,h6 {
  margin-bottom:0;
}

h2[id]:hover:after, 
h3[id]:hover:after, 
h4[id]:hover:after, 
h5[id]:hover:after, 
h5[id]:hover:after, 
a[id]:hover:after, 
a[name]:hover:after {
  content:"#" attr(id);
  padding:0 4px;
  margin:0 4px;              
  font:italic 1em/1em sans-serif;
  color:black;
  background:yellow;
  border:solid 1px black;
}

a[name]:hover:after {
  content:"#" attr(name);
}