Une marge sur le "scroll" des ancres HTML

17 December 2017

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.

/**
 * Appliquer une marge sur les ancres HTML c'est plus
 * ergonomique.
 */
:target {
    border-top: 75px solid transparent;
    margin: -75px 0 0;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    outline: none; /* Supprimer la outline disgracieuse de Chrome */
}

: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.