outline

Syntaxe

Paramètres

Description

Cette propriété permet de fixer la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres.

Remarque

• Si vous utilisez le navigateur Web «Google Chrome» et que vous souhaitez enlever les contours dorés dans une balise INPUT du HTML, vous devrez utiliser la propriété suivante : «outline: none;».
• Résumé de l'outline : La propriété outline est une manière simplifiée d'ajouter des bordures autour d'un élément, mais sans affecter son modèle de mise en page. Contrairement à la propriété border, pouvant influencer la disposition des éléments, outline n'occupe pas d'espace et n'affecte pas le flux du document. Elle sert principalement à ajouter des effets visuels tels que des surbrillances ou des indicateurs de focus.
• Utilisation pour l'accessibilité : L'outline est souvent utilisée pour améliorer l'accessibilité d'un site Web. Par exemple, la mise en surbrillance d'un élément au focus (par exemple, un champ de formulaire ou un bouton) à l'aide de outline permet aux utilisateurs de navigation au clavier de savoir quel élément est actuellement actif. Cela est particulièrement utile pour les personnes utilisant des lecteurs d'écran ou des claviers.
• Composantes de l'outline : La propriété outline est un raccourci permettant de définir plusieurs sous-propriétés en une seule ligne. Elle accepte trois valeurs : outline-color, outline-style et outline-width. Par exemple, outline: 2px solid red; définit une bordure rouge de 2 pixels autour de l'élément.
• La différence avec border : Bien que outline et border semblent similaires, elles présentent une différence importante : outline ne prend pas en compte l'espacement de l'élément, ce qui signifie qu'elle ne modifie pas la taille ou la mise en page de l'élément. En revanche, border influence la taille de l'élément et peut créer des espaces supplémentaires autour de celui-ci.
• Aucun effet sur la mise en page : Contrairement aux bordures définies par border, l'outline n'influence pas l'agencement des éléments dans le flux du document. L'outline est tracée autour de l'élément, mais n'ajoute pas d'espace supplémentaire comme le ferait une bordure classique. Cela permet d'éviter des changements inattendus dans la disposition des autres éléments.
• Astuces d'utilisation avec le focus : L'outline est couramment utilisée pour indiquer l'état de focus d'un élément interactif, comme un champ de texte ou un bouton. En définissant un outline visuellement distinct, vous permettez à l'utilisateur de mieux naviguer à travers le contenu. Par exemple, un outline: 3px dashed blue; peut être appliqué à un bouton lorsqu'il reçoit le focus, le rendant ainsi plus visible.
• Personnalisation avec outline-offset : En plus de la propriété outline, il est possible de personnaliser l'espace entre l'élément et l'outline grâce à la propriété outline-offset. Cette propriété permet de déplacer l'outline vers l'extérieur ou l'intérieur de l'élément, créant ainsi des effets visuels intéressants, comme l'espacement des contours pour un design plus épuré.
• Support des styles d'outline : Bien que outline-style accepte plusieurs valeurs comme solid, dotted, dashed, et double, il est important de noter que certaines valeurs peuvent ne pas être supportées sur toutes les plateformes ou navigateurs. Par conséquent, il est recommandé de tester les effets visuels sur plusieurs navigateurs pour garantir que l'outline s'affiche correctement, notamment pour des styles comme les lignes pointillées ou les doubles bordures.