28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je viens de vérifier si mes feuilles de styles étaient bien valides (d'ailleurs, le validateur a fait peau neuve je vois!) et je tombe sur deux erreurs que je ne comprends vraiment pas...

Voici le résultat qu'affiche le W3C:
a écrit :
Pseudo-élément ou pseudo-classe :last-child inconnu(e)

Qu'a-t-il contre mon pauvre dernier enfant? Smiley decu

Voici la ligne css incriminée:
#navbar li:last-child a,
#navbar li:last-child strong {

background-image:url(/assets/img/global/menu/contact.png); width:82px;

}


... et le code html correspondant, au cas où.

<ul id="navbar">
	
	<li><strong>Home</strong></li>
	<li><a href="/works">Works</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/jobs">Jobs</a></li>
	<li><a href="/blog">Blog</a></li>
	<li><a href="/contact">Contact</a></li>
	
</ul>


Cordialement,
Benjamin
Modifié par Benjamin D.C. (18 Dec 2006 - 20:07)
Je viens de remarquer qu'en choisissant dans les Options Supplémentaires le profil CSS niveau 3, la feuille de style est bien validée! C'est bizarre qu'il ne détecte pas lui-même le "niveau" de la feuille de style tout de même Smiley ohwell
Benjamin D.C. a écrit :
Je viens de remarquer qu'en choisissant dans les Options Supplémentaires le profil CSS niveau 3, la feuille de style est bien validée! C'est bizarre qu'il ne détecte pas lui-même le "niveau" de la feuille de style tout de même Smiley ohwell

Le validateur estime par défaut que la feuille de style fournie est en CSS 2.1. Il me semble logique qu'il ne cherche pas à savoir si c'est du CSS 3, étant donné que CSS 3 n'existe pas encore en tant que spécification (et c'est pas demain la veille...). Smiley rolleyes

Pour information, :last-child ne fait pas partie de CSS 2.1 :
http://www.w3.org/TR/CSS21/selector.html#q15
Mea culpa, j'ai été dupé par le support presqu'intégral de cette pseudo-classe par les navigateurs actuels.

C'est plus clair maintenant Smiley cligne
Modifié par Benjamin D.C. (18 Dec 2006 - 20:08)
Benjamin D.C. a écrit :
Mea culpa, j'ai été dupé par le support presqu'intégral de cette pseudo-classe par les navigateurs actuels.


en êtes vous sûr ? justement, je suis en train de chercher un substitut à last-child, parce qu'aucun des navigateurs que j'ai testés (hormis firefox), à savoir ie7, opera et safari, n'interprète cette pseudo classe...

Est ce que quelqu'un aurait une solution pas trop obstrusive (je ne veux pas trop modifier mon code puisque cette pseudo classe sera bien prise en compte un jour) pour émuler le last-child ?

Merci d'avance...
Benjamin D.C. a écrit :
Je viens de remarquer qu'en choisissant dans les Options Supplémentaires le profil CSS niveau 3, la feuille de style est bien validée! C'est bizarre qu'il ne détecte pas lui-même le "niveau" de la feuille de style tout de même Smiley ohwell



Tiens, en passant, bien que ce soit assez ancien: Il y a des mots qui ne sont pas neutres Smiley cligne

Fondamentalement, CSS n'est pas définie par versions, mais justement par niveaux. Et l'une des conséquences est l'impossibilité de déclarer la version CSS d'une feuille de style, et pour le validateur, l'impossibilité d'une détection automatique...

C'est intéressant, parce qu'en dehors de cette problème précis, le versionnage/niveau est encore aujourd'hui une décision parfois remise en cause.
lex a écrit :
en êtes vous sûr ? justement, je suis en train de chercher un substitut à last-child, parce qu'aucun des navigateurs que j'ai testés (hormis firefox), à savoir ie7, opera et safari, n'interprète cette pseudo classe...

:first-child est bien supporté par tous les navigateurs modernes (pas testé IE6), mais ça n'est pas le cas de :last-child, apparemment.

lex a écrit :
Est ce que quelqu'un aurait une solution pas trop obstrusive (je ne veux pas trop modifier mon code puisque cette pseudo classe sera bien prise en compte un jour) pour émuler le last-child ?

Générer une classe pour le dernier élément.
Alternativement, il y a peut-être la possibilité de faire ça en Javascript, mais je n'ai pas de référence à ce sujet sous la main.
Florent V. a écrit :

Générer une classe pour le dernier élément.


C'est la seule solution, il me semble. En attendant la prochaine (hum) sortie de CSS3 (dont on trouve des spécifications datés de 2001 !)
Merci !
lex a écrit :


en êtes vous sûr ? justement, je suis en train de chercher un substitut à last-child, parce qu'aucun des navigateurs que j'ai testés (hormis firefox), à savoir ie7, opera et safari, n'interprète cette pseudo classe...

Est ce que quelqu'un aurait une solution pas trop obstrusive (je ne veux pas trop modifier mon code puisque cette pseudo classe sera bien prise en compte un jour) pour émuler le last-child ?

Merci d'avance...
Ahem… C'est pervers de sortir du trou un sujet qui date pratiquement d'un an! Smiley biggol
J'ignore pourquoi j'ai pensé à ce moment-là que cette propriété était bien implémentée, Firefox et Camino devaient sans doute représenter à eux seuls ces fameux "navigateurs actuels"… Smiley lol
Plus sérieusement, si ta liste d'items est assez réduite, tu peux te baser sur le sélecteur de frère adjacent, qui lui, est réellement compris par l'ensemble des navigateurs récents! Smiley ravi
li+li+li+li {background:red}

Naturellement, pour IE6, c'est pas sympa…

@Laurent: merci pour cette précision sur ces termes parfois ambigus!
Florent V. a écrit :

:first-child est bien supporté par tous les navigateurs modernes (pas testé IE6)

IE6 n'implémente malheureusement pas cette pseudo-classe.
Benjamin D.C. a écrit :
IE6 n'implémente malheureusement pas cette pseudo-classe.

Ce qui colle bien avec ma déclaration: «:first-child est bien supporté par tous les navigateurs modernes». Smiley smile
Florent V. a écrit :

Ce qui colle bien avec ma déclaration: «:first-child est bien supporté par tous les navigateurs modernes». Smiley smile

Certes! Smiley lol