28172 sujets

CSS et mise en forme, CSS3

: empty ??

Bonjour

question stupide peut-être pour certains mais qui à de l’intérêt pour ma part.

l'attribut :empty semble s'appliquer généralement a des a:empty, p:empty ...

mais peut ton l'appliquer sur une div ou encore une image ?

par exemple, img:empty, div:empty ??

merci pour vos lumières.
Salut Smiley smile

Je ne connaissais pas :empty, merci Smiley smile

Je viens de voir sur le site de mozilla :

https://developer.mozilla.org/fr/docs/Web/CSS/:empty

Je cite:
"La pseudo-classe :empty correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires n'ont pas d'influence sur le contenu de l'élément."

Je dirais, mais j'attends aussi une réponse Smiley cligne que oui pour le div et non pour l'image, je ne pense qu'une image peut avoir un enfant ?
Modifié par Ethos (27 Jan 2017 - 10:34)
Modérateur
Je ne sais pas comment va se comporter empty sur une <img/> étant donné que c'est une balise auto-fermente (et qu'elle n'a donc pas de contenu). Sur un <div>, sans soucis !

Edit : En faisant quelques tests simples, on voit pas mal de variation...
Modifié par Yordi (27 Jan 2017 - 10:51)
Modérateur
Bah il suffit de tester !
https://jsfiddle.net/jvhqr3oz/

Comme je le pensais et comme tu l'as bien dit <img/> est une balise auto-fermante donc pas de contenu... j'imagine qu'elle sera toujours empty... pas contre je ne vois pas l’intérêt d'utiliser ça sur une img...
Bonjour _laurent Smiley smile

_laurent a écrit :
Holy crap on peut mettre un ::before dans une img ? Depuis quand ?!! Smiley eek


Je n'ai pas compris Smiley sweatdrop
sur un div; jai fait quelque test, mais rien de conclucant

<div> un truc </div>
<div> </div>

div {
border-color: red;
}
div:empty {
border-color: blue;
}
poilozorey a écrit :
sur un div; jai fait quelque test, mais rien de conclucant

&lt;div&gt; un truc &lt;/div&gt;
&lt;div&gt; &lt;/div&gt;

div {
border-color: red;
}
div:empty {
border-color: blue;
}


Je vois sur la doc (sur mozilla ,lien au post précédent) qu'un espace peut-être considéré comme du contenu... ? Tu as essayé sans espace ?
J'ai testé sur jsfiddle comme suggéré par _laurent (merci au passage) et ...

oui effectivement ça fonctionne !

C'est bien l'espace qui créé le problème car considéré comme du contenu.

Le lien de _laurent montre également le fonctionnement du :empty sur img

Merci à vous 2 Smiley smile
Modérateur
_laurent a écrit :
Holy crap on peut mettre un ::before dans une img ? Depuis quand ?!! Smiley eek


Oui j'ai été aussi un peu étonné de voir ça !
Par contre, ce n'est pas dans tous les cas...
Yordi a écrit :
Oui j'ai été aussi un peu étonné de voir ça !
Par contre, ce n'est pas dans tous les cas...

Et ce n'est surtout pas possible sur tous les navigateurs. Normal : ce n'est pas un comportement standard...
Modérateur
Olivier C a écrit :

Et ce n'est surtout pas possible sur tous les navigateurs. Normal : ce n'est pas un comportement standard...

Oui, j'avais testé aussi plusieurs navigateurs (Safari, Edge, Firefox et Chrome) pour voir si ils le faisaient tous. Ce n'est visible que sur Chrome.

Vu que "c'est nouveau" (il ne me semble pas que c'était permis avant), il faudra voir si ça ne créé pas quelques bug visuel sur d'anciens sites.
Et je suis curieux de savoir pourquoi ils ont fait évolué ça de cette manière et aussi de savoir ce qui est prévu pour les autres navigateurs.
Administrateur
Bonjour,

il n'est pas prévu que img:before devienne cross browser : ne PAS utiliser Smiley cligne

CSS ("CSS3") fait référence à CSS 2.1 pour cette partie-là (autant que je sache) et il est spécifié :
CSS 2.1 a écrit :
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

(et c'est toujours pareil dans CSS 2.2, dès fois que)
Modifié par Felipe (01 Feb 2017 - 17:55)
Sujet clos
Aller à