Outline

La propriété outline est surtout connue comme étant la propriété utilisée par les navigateurs afin de faire ressortir l'élément ayant le focus dans une page. Cette utilisation permet de naviguer via son clavier ⌨️ plutôt que la souris 🖱️.

Par exemple, appuyez sur la touche tab de votre clavier et remarquerez le cadre s'affichant autour de l'élément recevant le focus.

Si vous enlever le outline par défaut des navigateurs, par exemple: * { outline: 0; } pensez à le remplacer par un autre style permettant d’identifier quel élément dans la page à le focus.

outline partage les mêmes sous-propriétés que border, soit:

  • outline-width
  • outline-style
  • outline-color

Et la même syntaxe courte. Par exemple:

outline: 2px solid green; outline outline Outline-offset

Il est aussi possible de créer un espace entre le cadrage et son élément en utilisant la propriété outline-offset.

Par exemple:

outline-offset outline-offset Différences avec border

Impact sur la dimension des éléments

La propriété border fait partie de l'élément. Elle génère donc un cadre à l'intérieur de celui-ci, affectant sa dimension et donc potentiellement son positionnement. Contrairement à outline, qui ne fait pas partie de l'élément et donc vit à l'extérieur de celui-ci.

Par exemple, les deux carrés verts 🟩 si dessous ont la même dimension et un cadre d'une même taille. Le premier utilise border et le deuxième outline. On remarque que le premier réduit la dimension à l'intérieur du carré, tandis que le deuxième la laisse indemne.

À gauche, border.
À droite, outline.

Le fait qu'outline n'affecte pas la dimension et le positionnement des éléments rend cette propriété particulièrement utile pour déboguer ou comprendre une mise en page.

Par exemple, dans l'inspecteur, dans le panneau des styles, cliquez sur le bouton ➕ afin de définir une nouvelle règle de styles et inscrivez * { outline: 2px solid red; } pour afficher un cadre rouge autour de tous les éléments de la page.

EXERCICE Outline - Skittles Pour cet exercice vous devez attribuer aux différents Skittles un outline lorsqu’ils reçoivent le focus.