[Résolu] Compatibilité content

Merci pour l'outil que je ne connaissais pas.

Du coup je comprends encore moins pourquoi ça fonctionne avec FF et pas Chrome.

Gili a écrit :

En fait FF est dans le faux pour le coup.

Un peu mais pas totalement.

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.
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 !

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!

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)