28106 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai une question, pour vous cette propriété est-elle compatible avec tous les navigateurs?

div#ID select option:nth-child(2)::after{
      content:"Accueil";
}

Le but étant d'écrire "Accueil" dans un menu passé en responsive. En taille normale, le menu affiche une icône de petite maison qui est remplacé par un vide lors du passage sous forme de liste déroulante en responsive.
J'ai donc mis cette propriété dans une media querie. J'ai bien "Accueil" qui s'affiche sur Firefox mais pas sur Chrome.
J'ai cherché les compatibilités de nth-child() et :after avec les différents navigateurs et je n'ai rien vu de spécial...

Voici un jsfiddle pour illustrer. D'ailleurs ça ne fonctionne pas dessus non plus. Smiley rolleyes

Une idée?

Merci Smiley smile
Modifié par nef1912 (26 May 2015 - 14:32)
Merci pour l'outil que je ne connaissais pas.

Du coup je comprends encore moins pourquoi ça fonctionne avec FF et pas Chrome.
Modérateur
Salut,

Je pense que ça vient du même "problème" que les pseudo-éléments qui ne fonctionnent pas sur les images. Cf cette réponse : http://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements/6949190#6949190

Possible que FF ait une petite longueur d'avance sur chrome sur l'acceptation d'un pseudo élément dans le "option" d'un sélect...

Mais je pense que ca reste globalement une mauvaise idée d'afficher un contenu qui a l'air pertinent via un pseudo élément... mais bon, on sort du périmètre du post ! Smiley ravi

Bonne journée !
Modifié par _laurent (26 May 2015 - 14:52)
Merci pour vos réponses. Smiley smile

En fait ça fait surtout office de test, je pense le générer dynamiquement avec JS. Mais je me demandais d'où vient cette différence d'interprétation.
Modifié par nef1912 (26 May 2015 - 15:16)
Gili a écrit :

En fait FF est dans le faux pour le coup.


Un peu mais pas totalement. Smiley langue

Ce qu'il s'est passé c'est qu'à la base le comportement de ::before et ::after sur les éléments remplacés n'était pas défini dans la spec. Firefox l'a implémenté comme ça à l'époque. Donc il n'avait pas vraiment tort ou raison vu que c'était flou.

Source http://www.w3.org/TR/CSS21/generate.html#x2

"w3c" 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.


Ensuite la spec a définie que les éléments remplacés ne devait pas avoir de ::before et ::after et que la propriété content appliquée à ces éléments devait remplacer le contenu de l'élément lui même :


option {
  content: "on remplace le contenu de l'option"
}


Et on aurait du avoir la possibilité d'utiliser ::outside combiné à ::before ou ::after pour placer du contenu avant ou après un élément remplacé.


option::outside(1)::after {
  content: "on affiche un après le pseudo élément englobant l'option"
}


Source et exemples :

http://www.w3.org/TR/css3-content/#replacedContent

Et puis au final... on n'a rien eu parce que tout est passé à la poubelle avant que les navigateurs l'implémentent et que c'est actuellement en cours de réécriture. Smiley lol
Modifié par lamext (26 May 2015 - 19:03)
on se sert surtout de la propriété content pour afficher des icones fontawesome ou autres.
selecteur::before {
content: "\60"
}

Pour ton soucis, tu devrais plutot definir une autre image via une requete media.
Merci pour les bonnes explications ! Smiley smile

lefabdu51 a écrit :
on se sert surtout de la propriété content pour afficher des icones fontawesome ou autres.
selecteur::before {
content: "\60"
}

Pour ton soucis, tu devrais plutot definir une autre image via une requete media.


J'affiche une image au départ. Et en fait c'était surtout pour tester, je me sers d'un script JS pour générer un menu déroulant en responsive du coup j'ai glissé le cas où l'option est vide pour résoudre le problème. Mais je me demandais simplement si je pouvais faire l'équivalent en CSS (d'où la propriété pondue et la question qui en découle).

Mais avec toutes ces explications, le sujet est résolu. Merci à tous!
Administrateur
Bonjour,

je décortique un peu :
nef1912 a écrit :

div#ID select option:nth-child(2)::after{
      content:"Accueil";
}


div#ID : supprime l'élément du sélecteur, ça ne sert à rien de savoir si un id est sur un div ou main ou nav ou section ou ul... L'usage de l'ID est de plus en plus mal vu (par les confrères, la pression sociale toussa) mais là dans le cas d'une navigation forcément unique oui pourquoi pas.

select : un option est forcément dans un select, inutile tu peux supprimer

:nth-child(an+b) : compatibilité IE9+

::after : compatibilité IE9+ alors que :after c'est IE8+ Quirksmode est mieux que caniuse pour les vieux trucs CSS2. Les navigateurs récents doivent (MUST) être rétrocompatibles avec la notation :after, cf. ma réponse sur StackOverlfow donc autant utiliser :after à moins que beaucoup d'autres codes ne soient de toutes façons pas non plus compatibles avec IE8

content : comme :after, c'est compatible IE8+ (ça aurait été un peu idiot de supporter l'un sans l'autre, huhu)

Et pour les option : stylable dans Firefox mais pas dans Chrome. J'ai pas lu vos réponses en détail sur les éléments remplacés mais il me semble que c'est surtout que pour les éléments de formulaire les vendors font ce qu'ils veulent... Les bugzilla de Firefox et WebKit sont remplis de rapports de bugs fermés à coup de WONTFIX parce que le bug rapporté n'en est pas un ; nulle part dans une spec il n'est dit ce qui doit être stylable dans le détail.
Ah ce bon vieux Safari 2 aqua edition dans lequel aucun élément de formulaire n'était stylable... Au moins la réponse au client était rapide : on ne peut rien styler. http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/
Modifié par Felipe (27 May 2015 - 10:43)