par
Victor BRITO » 17 nov. 2008, 14:07
À noter que le fait d'oublier d'indiquer une couleur d'arrière-plan quand on déclare une couleur de texte (ou qu'on indique la valeur transparent à background-color)
n'invalide pas la feuille de style : le validateur des CSS se contentera d'émettre un
avertissement, comme quoi aucune couleur d'arrière-plan n'est définie.
Autrement dit, il n'est pas toujours nécessaire d'indiquer
explicitement et systématiquement une couleur d'arrière-plan, à partir du moment où la première couleur d'arrière-plan rencontrée (en partant de la « surface ») a suffisamment de contraste avec la couleur de texte déclarée. Par exemple :
Code : Tout sélectionner
<div>
<span>Un morceau de texte blanc sur une image d'arrière-plan</span>
</div>Code : Tout sélectionner
div {
color: silver;
background: black;
}
span {
display: block;
width: 100px;
min-height: 120px;
color: white;
background: transparent url(un-degrade-de-rouge-et-de-bordeaux.png) repeat-x;
}
Le texte de l'élément span est en blanc et s'affiche sur une image d'arrière-plan présentant un dégradé de couleurs (du rouge au bordeaux, par exemple). Aucune couleur d'arrière-plan n'est déclarée pour l'élément span (si ce n'est une couleur « transparente »). Mais, si on désactive les images, le texte sera néanmoins visible, grâce à la première couleur d'arrière-plan rencontrée (celle de l'élément parent div), qui est le noir ; et comme blanc sur noir donne un contraste parfait en matière d'accessibilité, ça passe comme une lettre à la poste.
À noter que le fait d'oublier d'indiquer une couleur d'arrière-plan quand on déclare une couleur de texte (ou qu'on indique la valeur transparent à background-color) [b]n'invalide pas la feuille de style[/b] : le validateur des CSS se contentera d'émettre un [i]avertissement[/i], comme quoi aucune couleur d'arrière-plan n'est définie.
Autrement dit, il n'est pas toujours nécessaire d'indiquer [i]explicitement et systématiquement[/i] une couleur d'arrière-plan, à partir du moment où la première couleur d'arrière-plan rencontrée (en partant de la « surface ») a suffisamment de contraste avec la couleur de texte déclarée. Par exemple :
[code]<div>
<span>Un morceau de texte blanc sur une image d'arrière-plan</span>
</div>[/code]
[code]div {
color: silver;
background: black;
}
span {
display: block;
width: 100px;
min-height: 120px;
color: white;
background: transparent url(un-degrade-de-rouge-et-de-bordeaux.png) repeat-x;
}[/code]
Le texte de l'élément span est en blanc et s'affiche sur une image d'arrière-plan présentant un dégradé de couleurs (du rouge au bordeaux, par exemple). Aucune couleur d'arrière-plan n'est déclarée pour l'élément span (si ce n'est une couleur « transparente »). Mais, si on désactive les images, le texte sera néanmoins visible, grâce à la première couleur d'arrière-plan rencontrée (celle de l'élément parent div), qui est le noir ; et comme blanc sur noir donne un contraste parfait en matière d'accessibilité, ça passe comme une lettre à la poste. ;)
