outline-style |
Style de la ligne en dehors |
|---|---|
| CSS 2 |
Syntaxe
| outline-style: dashed|dotted|double|groove|hidden|inherit|initial|inset|none|outset|ridge|solid; |
Paramètres
| Paramètre | Exemple | Description |
|---|---|---|
| none | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer qu'il n'y a pas de bordure. |
| dashed | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style de ligne pointillé. |
| dotted | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style de point pointillé. |
| double | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer une double bordure. |
| groove | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré vers le bas. |
| hidden | Ce paramètre permet d'indiquer qu'il n'y a pas de bordure à l'exception de conflit avec des éléments d'un tableau. | |
| inherit | Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. | |
| initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | |
| inset | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré intérieur. |
| outset | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré extérieur. |
| ridge | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré vers le haut. |
| solid | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est une seule et même couleur sans aucun motif (solide). |
Description
Cette propriété permet de fixer le style de la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres.
Remarques
- Définition et fonction : La propriété outline-style permet de spécifier le style de l'outline d'un élément. L'outline est une ligne entourant un élément, généralement utilisée pour indiquer le focus ou l'état actif. Le style de l'outline peut être défini avec des valeurs comme solid, dotted, dashed, double,..., afin de personnaliser l'apparence de cette ligne.
- Interaction avec d'autres propriétés d'outline : L'outline est généralement une propriété raccourcie incluant outline-width, outline-style, et outline-color. Lorsque vous utilisez outline-style, il est nécessaire de spécifier également la largeur et la couleur de l'outline si ces valeurs ne sont pas déjà définies, car un outline-style de none annule les autres propriétés outline (telles que la couleur ou la largeur).
- Indication du focus pour l'accessibilité : La propriété outline-style est couramment utilisée pour améliorer l'accessibilité des sites web. Par exemple, lorsqu'un élément reçoit le focus, comme un champ de formulaire ou un bouton, vous pouvez utiliser outline-style pour définir une ligne visible autour de l'élément actif. Cela permet aux utilisateurs de naviguer efficacement avec un clavier ou un autre dispositif d'entrée.
- Apparence visuelle : L'outline ne modifie pas l'espacement ou la taille de l'élément, contrairement à la bordure (border). Par conséquent, l'utilisation de outline-style permet de créer des effets visuels sans perturber la disposition de la page. Il peut être utilisé pour indiquer visuellement l'activation ou la sélection d'un élément sans impacter la mise en page.
- Compatibilité avec les navigateurs : outline-style est pris en charge par la plupart des navigateurs modernes, y compris les versions récentes de Google Chrome, Firefox, Safari et Edge. Cependant, pour les anciennes versions de certains navigateurs ou des navigateurs moins courants, il est important de vérifier la compatibilité et de s'assurer que l'outline s'affiche correctement.
- Personnalisation du focus visuel : Utiliser outline-style pour personnaliser l'apparence des éléments focusables peut améliorer l'expérience utilisateur, notamment pour les personnes ayant des déficiences visuelles. Par exemple, l'outline peut être stylisé avec un style dashed ou solid pour le rendre plus distinct, permettant ainsi aux utilisateurs de mieux identifier les éléments sur lesquels ils interagissent.
- Réflexion sur l'accessibilité et l'usage de outline-style : Bien qu'il soit courant de personnaliser l'outline pour l'esthétique ou pour des effets visuels spécifiques, il est important de ne pas supprimer complètement l'outline dans des cas où il sert à signaler le focus. Par défaut, la suppression de l'outline sur des éléments focusables peut nuire à l'accessibilité, car elle empêche les utilisateurs de savoir quel élément est actuellement actif.
Dernière mise à jour : Dimanche, le 20 décembre 2015