var Phenix = function () {
Troll du Web depuis 1996

CSS


Une marge sur le « scroll » des ancres HTML

Voici une petite astuce pour avoir une marge, entre le « haut du browser » et l’emplacement réel de l’ancres, lorsque l’on clic sur une ancre.

  1. /**
  2.  * Appliquer une marge sur les ancres HTML c'est plus
  3.  * ergonomique.
  4.  */
  5. :target {
  6.     border-top: 75px solid transparent;
  7.     margin: -75px 0 0;
  8.     -webkit-background-clip: padding-box;
  9.     -moz-background-clip: padding;
  10.     background-clip: padding-box;
  11.     outline: none; /* Supprimer la outline disgracieuse de Chrome */
  12. }

:target est une sélécteur css bien supporté qui cible toutes les ancres. Du coup on lui ajouter une fausse marge.
L’avantage ce code, c’est qu’il va fonctionner même si l’ancre est dans un texte. Ce que n’est pas le cas de la majorité des techniques à base de display: block; et de :before.

Voir en ligne : offsetting an html anchor to adjust for fixed header

Tufte CSS

Un thème CSS ultra léger et vraiment lisible. Avec une gestion des sides notes aux top !

Il serai intéressant dans faire un squelettes SPIP qui a justement un système de « notes en bas de page » similaire.

Voir en ligne : Tufte CSS