Validateur CSS3 : border-color et RGBa ?

Bonsoir !

Je suis en train de tester quelques nouveautés CSS3, et j'ai un petit problème de validation sur cette déclaration :

button.bouton  {
  border: 1px solid;
  border-color: rgba(0,0,0,0.25);
}

(j'ai séparé le border-color pour avoir un message d'erreur plus clair)

Voici ce que me dit le validateur :

"css-validator" a écrit :

Value Error : border-color rgba(0,0,0,0.25) is not a border-color value : rgba(0,0,0,0.25)

Le code de la page HTML est valide, voici la déclaration du bouton :

<button type="submit" class="bouton">Envoyer</button>

Le tout fonctionne très bien, en tout cas sous Firefox.

Si je met exactement la même chose pour le background, le validateur ne dit rien :

button.bouton {background-color: rgba(0,0,0,0.25);}

Je m'interroge sur cette erreur du validateur ? Je pensais que RGBa pouvait être utilisé partout là où on peut spécifier une couleur ?
Modifié par mistike (19 Dec 2009 - 18:32)

Hello Mistike,

Bien que je n'ai pas vraiment de réponse à ta question principale, je me permets de t'indiquer que ton sélecteur de départ est légèrement erroné suivant mon impression.

Tu pointes un bouton avec la classe bouton. Autant appeler directement la classe bouton :

.bouton{/* instructions */ }

. Ce qui revient à dire que tu peux utiliser cette même classe autre part. Donc, puisque là, c'est factorisé cela pourrait prendre un nom plus généraliste. ex : bordure_noire_alpha_25.

Bonne soirée.

mistike a écrit :
Je m'interroge sur cette erreur du validateur ? Je pensais que RGBa pouvait être utilisé partout là où on peut spécifier une couleur ?

Le module arrière-plans et bordures de CSS 3 indique que les propriétés background-color et border-color ont pour valeur <color> et renvoie, pour la définition de <color>, au module couleur, qui, dans la section sur les valeurs RVBA, définit la syntaxe de la fonction rgba() exactement comme tu l'as employée.

Je penche donc pour un bug du validateur, qui mérite d'être rapporté, sauf si quelqu'un d'autre l'a déjà fait.

Salut,

Nolem a écrit :
Tu pointes un bouton avec la classe bouton. Autant appeler directement la classe bouton

Sauf que ça peut avoir du sens pour des raisons de priorité du sélecteur.

Victor BRITO a écrit :
Je penche donc pour un bug du validateur, qui mérite d'être rapporté, sauf si quelqu'un d'autre l'a déjà fait.

En même temps la spécification Backgrounds and Borders n'est en Candidate Recommendation que depuis 2 jours.

Nolem a écrit :

Tu pointes un bouton avec la classe bouton. Autant appeler directement la classe bouton :

.bouton{/* instructions */ }

. Ce qui revient à dire que tu peux utiliser cette même classe autre part.

Comme l'a dit Heyoan, ça dépend des cas. En l'occurrence j'aurais effectivement pu faire comme ça, oui, mais ce n'est pas toujours le cas.

Nolem a écrit :

Donc, puisque là, c'est factorisé cela pourrait prendre un nom plus généraliste. ex : bordure_noire_alpha_25.

Là en revanche je ne suis pas trop d'accord. Certes dans cet exemple, l'appeler "bouton" est peut-être trop restrictif, mais j'évite de donner à mes classes et id des noms qui représentent leur design. Simplement parce que si je décide que ma bordure noire est finalement mieux en rouge à pois verts (ça c'est du CSS7 ou 8 ), alors le nom de ma classe ne correspondra plus.
Je préfère dans la mesure du possible leur donner des noms qui représentent plus leur fonction que leur apparence.
Modifié par mistike (20 Dec 2009 - 00:06)

Victor BRITO a écrit :
Je penche donc pour un bug du validateur, qui mérite d'être rapporté, sauf si quelqu'un d'autre l'a déjà fait.

Heyoan a écrit :

En même temps la spécification Backgrounds and Borders n'est en Candidate Recommendation que depuis 2 jours.

Je vais donc attendre un peu que la peinture soit sèche

Merci de vos réponses en tout cas, ça me rassure
Modifié par mistike (20 Dec 2009 - 00:08)

Hello,

Heyoan a écrit :
Salut,
Sauf que ça peut avoir du sens pour des raisons de priorité du sélecteur.

Merci à toi pour ce lien et merci Laurent Denis si tu passes par là. Article très intéressant. ^^. Cependant il ne résout pas le problème. (cf. ci-après) et j'ai eu un peu de mal a assimilé le

Laurent Denis a écrit :

[...]
Ce degré de priorité est calculé sous forme d'un nombre à 4 chiffres ABCD
[...]

.

mistike a écrit :
En l'occurrence j'aurais effectivement pu faire comme ça, oui, mais ce n'est pas toujours le cas.

J'ai eu un doute et c'est bien ce que je pensais à propos du button .bouton (la syntaxe). Par contre, je me suis dit que le rgba était surement juste. Comme dans beaucoup de langage, il ne faut pas oublier que le bogue peut être en amont. Or là nous sommes dans une classe pas un identifiant ou pseudo-classe. Donc l'écriture juste de toute manière est :

<style type="text/css">
.ok{
	background-color:#F00; 
}
button .ok{
	background-color:#00F;
}
</style>
</head>

<body>
	<form action="#" method="post">
		<input type="button" class="ok" name="ok" value="ok" />
	</form>
</body>

;)
Au passage, as tu vraiment besoin de la transparence sur 1 px ?

Heyoan a écrit :

En même temps la spécification Backgrounds and Borders n'est en Candidate Recommendation que depuis 2 jours.

Merci pour cette info

mistike a écrit :

Là en revanche je ne suis pas trop d'accord. Certes dans cet exemple, l'appeler "bouton" est peut-être trop restrictif, mais j'évite de donner à mes classes et id des noms qui représentent leur design. Simplement parce que si je décide que ma bordure noire est finalement mieux en rouge à pois verts (ça c'est du CSS7 ou 8 langue ), alors le nom de ma classe ne correspondra plus.

Ah oui oups et tu as tout à fait raison. Autant pour moi et je dis même +1 sur ce que tu dis.

Bonne soirée
Modifié par Nolem (20 Dec 2009 - 19:09)

Nolem a écrit :

J'ai eu un doute et c'est bien ce que je pensais à propos du button .bouton (la syntaxe). Par contre, je me suis dit que le rgba était surement juste. Comme dans beaucoup de langage, il ne faut pas oublier que le bogue peut être en amont. Or là nous sommes dans une classe pas un identifiant. Donc l'écriture juste de toute manière est :

Je ne suis pas sûre d'avoir compris ce que tu veux dire ?
(d'ailleurs le plus simple pour mon exemple aurait été de carrément styler "button")

Nolem a écrit :

Au passage, as tu vraiment besoin de la transparence sur 1 px ?

Arf, c'était un test, cet exemple est basé sur les
"Awesome Buttons" de Zurb, mais j'ai testé d'autres bordures en RGBa qui ne faisaient pas 1px (pire, ce bouton, il est sur une page en fond blanc... donc ça donne un bête gris !)

'lut,

Nolem a écrit :
Donc l'écriture juste de toute manière est...

Absolument pas !

Tout d'abord il s'agit dans ton exemple d'un INPUT et pas d'un BUTTON. Ensuite la sélection avec un espace cible un descendant et pas un élément :

button.ok cible un élément BUTTON ayant pour classe ok

button .ok cible un descendant ayant pour classe ok d'un élément BUTTON

(Re)lire Les sélecteurs.

D'ailleurs en reprenant ton exemple input .ok n'aurait aucun sens puisqu'un élément INPUT n'accepte aucun élément enfant.

Et pour chipoter encore un peu : cé mal de ne pas associer un élément LABEL à un élément INPUT.
Modifié par Heyoan (20 Dec 2009 - 19:13)

Heyoan a écrit :

[...]
Ensuite la sélection avec un espace cible un descendant et pas un élément
[...]

Je ne connaissais pas cette écriture. Je comprends mieux l'article de Laurent Denis. C'est limpide. Merci

Heyoan a écrit :

D'ailleurs en reprenant ton exemple input .ok n'aurait aucun sens puisqu'un élément INPUT n'accepte aucun élément enfant.

exact.

Heyoan a écrit :

Et pour chipoter encore un peu : cé mal de ne pas associer un élément LABEL à un élément INPUT.

Arf, ne pas oublier les attributs for et id qui vont bien pour chipoter un peu plus
Modifié par Nolem (20 Dec 2009 - 20:31)