outline-color
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS outline-color définit la couleur du contour d'un élément.
Exemple interactif
outline-color: red;
outline-color: #32a1ce;
outline-color: rgb(170 50 220 / 0.6);
outline-color: hsl(60 90% 50% / 0.8);
outline-color: currentColor;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec un contour autour.
</div>
</section>
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntaxe
/* Valeurs de type <color> */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;
/* Valeurs globales */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;
La propriété outline-color est définie avec une des valeurs listées ci-après.
Valeurs
<color>-
La couleur du contour, définie comme un
<color>.
La spécification liste également une valeur supplémentaire, auto, qui n'est actuellement prise en charge par aucun navigateur. Lorsqu'elle sera implémentée, auto sera calculée comme currentColor sauf si outline-style est défini sur auto, auquel cas elle sera calculée comme la couleur d'accentuation.
Description
Un contour est une ligne tracée autour d'un élément, à l'extérieur de la bordure (border). Contrairement à la bordure de l'élément, le contour est tracé à l'extérieur du cadre de l'élément et peut chevaucher d'autres contenus. La bordure, en revanche, modifie réellement la mise en page de la page pour s'assurer qu'elle s'adapte sans chevaucher quoi que ce soit d'autre (sauf si vous la configurez explicitement pour chevaucher).
Il est souvent plus pratique d'utiliser la propriété raccourcie outline lors de la définition de l'apparence d'un contour.
Accessibilité
Les styles de sélection personnalisés impliquent souvent des ajustements de la propriété outline. Si la couleur du contour est modifiée, il est important de s'assurer que le contraste entre celle-ci et l'arrière-plan sur lequel le contour est placé est suffisamment élevé pour que les personnes ayant une vision réduite puissent le percevoir.
Le ratio de contraste des couleurs est déterminé en comparant la luminosité des valeurs de couleur du texte et de l'arrière-plan. Pour respecter les Directives pour l'accessibilité des contenus Web (WCAG) (angl.), un ratio de 4,5:1 est requis pour le contenu textuel et de 3:1 pour le texte plus grand, comme les titres. Le texte de grande taille est défini comme ayant une taille de 18.66px et gras ou plus, ou 24px ou plus.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | Pour le mot-clé auto, la valeur calculée est currentcolor. Pour la valeur de la couleur, si la valeur est transparente, la valeur calculée sera la valeur rgba() correspondante. S'il n'y en a pas, ce sera la valeur rgb() correspondante. Le mot-clé transparent correspondra à rgba(0,0,0,0). |
| Type d'animation | une couleur |
Syntaxe formelle
outline-color =
auto |
<'border-top-color'>
<border-top-color> =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Exemples
Définir un contour bleu solide
HTML
<p>Mon contour est bleu, comme vous pouvez le voir.</p>
CSS
p {
outline: 2px solid; /* Définir la largeur et le style du contour */
outline-color: blue; /* Définir la couleur du contour */
margin: 5px;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Basic User Interface Module Level 4 # outline-color |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
outline - La propriété
outline-width - La propriété
outline-style - Le type de donnée
<color> - Autres propriétés associées aux couleurs :
color,background-color,border-color,text-decoration-color,text-emphasis-color,text-shadow,caret-coloretcolumn-rule-color