Définition de la CSS outline-color.
La propriété CSS outline-color permet de spécifier la couleur des quatre contours de l'outline d'un élément lors de sa prise de focus.
Les contours CSS d'outline ne réagissent pas comme les bordures, ces contours viennent au-dessus de l'élément et n'interviennent pas dans la taille de l'élément.
outline-color :outline-color : invert;
outline-color : currentColor;
outline-color : fuchsia;
outline-color : hsl(55,67%,80%);
outline-color : rgb(138,43,226);
outline-color : #66CDAA;La propriété de feuille de style outline-color CSS peut prendre la valeur de :
-
invert: couleur inverse de la couleur d'arrière plan sur lequel va apparaitre l'outline. -
currentColor: valeur decolorsur lequel va apparaitre l'outline(CSS3). - de type hexadécimal : couleur hexadécimale, ex:#4682B4.
- en la nommant : couleur prédéfinie, ex:maroon.
-
rgb(r,g,b): couleur en RGB. r, g et b sont compris entre 0 et 255, s'ils sont en pourcentage alors spécifier l'unité "%". Ex:rgb(128,0,0). -
rgba(r,g,b,alpha): couleur en RGB avec transparence (CSS3). "alpha" est compris entre 0 et 1. Ex:rgba(128,0,0,0.3). -
hsl(h,s%,l%): couleur en HSL (CSS3), ex: hsl(0,100%,25%). -
hsla(h,s%,l%,alpha): couleur en HSL avec transparence (CSS3). "alpha" est compris entre 0 et 1. Ex:hsla(19,56%,40%,0.6). -
inherit, hérite de la propriété CSSoutline-colorde son parent (CSS2).
Il existe aussi en CSS 2, la possibilité de récupérer des couleurs de l'interface navigateur (net4.7 gère cela très mal).
La valeur par défaut est la valeur de la propriété
color de l'élément.
Exemple de code outline-color CSS
Conditions d'application de la CSS outline-color.
La propriété CSS outline-color est applicable sur toutes les balises HTML ou XHTML.
Les contours d'outline sont utilisés dans la cadre de l'accessibilité pour les utilisateurs de clavier. Les contours d'outline permettre de visualiser l'élément qui a le focus.
Si vous devez modifier la propriété Css outline-color à la prise de focus, utilisez la pseudo-classe :focus.
La valeur de la CSS outline-color peut être mise directement dans la propriété de raccourci CSS outline.
Problème d'interprétation de outline-color en Css.
La propriété de feuille de style outline-color CSS pose des problèmes d'interprétation.
La valeur "invert" n'est reconnue que par Internet Explorer > 8+.
La propriété CSS outline-color n'est pas reconnue par Internet Explorer < 8, Firefox 1.5, Opera < 7 et Safari < 1.2.
Conditions d'animation de outline-color en CSS3.
La CSS outline-color est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.
Règles de syntaxes CSS pour outline-color.
Valeur invert et currentColor d'outline-color
Quand la valeur invert ou currentColor de outline-color n'est pas reconnue par le navigateur, la valeur de la couleur du contour est la valeur de la propriété color de l'élément sur lequel est assigné l'outline.
Règles d'accessibilité Web d'outline-color
Si un outline est défini par défaut, vous ne devez pas mettre une couleur transparente l'outline-color si vous ne proposez pas un autre mécanisme de mise en évidence lors de la prise de focus.
Toujours dans le cadre de l'accessibilité Web, vous devez faire en sorte que le contraste entre la couleur de la bordure d'outline et la couleur de son l'arrière plan soit suffisamment grand pour que les deux soient correctement vus.
Pour cela, le mieux est de faire l'équivalent de invert soit choisir la couleur complémentaire et ne pas mettre de couleur avec transparence.
Compatibilités navigateurs de la propriété outline-color
- Détails des versions de la CSS outline-color
- Propriété
outline-colorest compatible avec CSS2 et plus.
Exemples et astuces CSS pour utiliser outline-color
outline-color et safari
Sous Safari, les champs de formulaires(SELECT, INPUT et TEXTAREA) ont un contour de couleur bleu lorsque le champ prend le focus.
.
Vous pouvez modifier la couleur en utilisant la propriété outline-color CSS.
Firefox version inférieure à 1.5
La propriété CSS outline-color n'est pas reconnue par les version de Firefox < 1.5.
Vous devez utiliser la propriété CSS -moz-outline-color.identifiant{
-moz-outline-color : red;
}
Votre avis sur la définition outline-color en CSS
Votez pour la définition CSS outline-color
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 4.6 / 5 - 10
votes
Cliquez sur une étoile pour voter.