Outline

3

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;

Pour en savoir plus, voir cet article MDN à propos de 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:

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de outline-offset.

Différences notables avec border

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Combinaison avec Border-radius

Puisque border fait partie de l'élément, cette propriété épouse la forme son élément et donc respecte ses coins arrondis. Contrairement à outline qui vit à l'extérieur de l'élément et donc garde une forme rectangulaire.

Voir le CodePen de Simon Arnold (@smnarnold).

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme