[CSS] :before sur éléments de type block dans Safari

  • Créateur du sujet Créateur du sujet p4bl0
  • Date de début Date de début
Bonjour !

Je voulais savoir si quelqu'un à réussi à faire fonctionner le pseudo élément :before sur des éléments de type block (qui devrait normalement les accepter, d'ailleurs ça fonctionne sur Opéra et Firefox) dans Safari, parce que ça ne marche pas et ça m'énerve ! :rateau:


Merci :)

Pourtant c'est censé marcher... Tu peux en dire plus ?
 
Pourtant c'est censé marcher... Tu peux en dire plus ?
Ouais :p

Voilà un extrait du css :
Bloc de code:
#container {
	counter-reset: blockcode;
}
#container .blockcode:before {
	margin: -10px 0px 5px -10px;
	padding: 3px 0px 1px 10px;
	color: #666;
	display: block;
	width: 6em;
	background-color: #eaeaea;
	counter-increment: blockcode;
	content: "Code n°" counter(blockcode);
}

Voilà un extrait du html :
Bloc de code:
<pre class="blockcode">&lt;?php
  $my_functions = array('diaporama', 'recherche_live', 'show_post');
  echo pAjax_gen_js($my_functions, './includes/fonctions.php', 'path/to/pAjax/');
?&gt;
</pre>

Voil&#224; le rendu sous firefox et Op&#233;ra :
beforecssbonrendu.png


Voil&#224; le rendu sous Safari :
beforecssrendusafari.png



En fait je suis en train de faire un site pour pAjax, il y a eu quelque changement depuis que j'ai post&#233; &#231;a, donc le post n'est plus trop &#224; prendre en compte mais sur le site que je suis en train de faire il y aura une documentation :)

Je sais que je pourrais r&#233;soudre ce probl&#232;me simplement en tapant &#224; chaque fois &#224; la main le "Code n&#176;x" dans un span par exemple et en rempla&#231;ant "#container .blockcode:before" par "#container .blockcode span", mais &#231;a m'&#233;nerve, je veux que &#231;a marche :p
 
le jour o&#249; il n'y aura plus de verbes irr&#233;guliers en anglais, le jour o&#249; amours ne sera plus f&#233;minin&#8230;

ce sera triste :siffle:
 
le jour o&#249; il n'y aura plus de verbes irr&#233;guliers en anglais, le jour o&#249; amours ne sera plus f&#233;minin&#8230;

ce sera triste :siffle:
:) c'est jolie ce que tu racontes, et pour le coup des verbes irr&#233;guliers, je trouve que les verbes irr&#233;guliers anglais sont plus r&#233;guliers que notre troisi&#232;me groupe ;)
 
Salut,

Avant de réagir, je voulais juste te faire remarquer que cette petite prise de tête me semble assez inutile... Bon ce n'est évidemment pas la réponse que tu attendais, mais il me semble que c'est une mauvaise idée de procéder de cette manière: tu fournis par ta feuille de style un contenu non accessible sans css (et pour tous les utilisateurs d'Internet Explorer au passage!) et pourtant relativement important. Une liste ordonnée, par exemple, me paraît plus indiquée...

Bref, pour en revenir au sujet de base:

j'ai l'impression que Safari n'accepte le pseudo-element :before que pour les éléments inline
Non non, Safari accepte bel et bien un contenu généré par :before pour tout élément, qu'il soit de type block ou inline. Dans ton problème par exemple, si tu t'en tiens à ceci:
#container .blockcode:before {content: "Code n°"}
Tu remarqueras que Safari affiche bien ce contenu généré par css; le problème apparaît donc dès lors que tu fais suivre une chaîne de caractère par ce fameux counter(blockcode).
 
  • J’aime
Réactions: p4bl0
Salut,

Avant de réagir, je voulais juste te faire remarquer que cette petite prise de tête me semble assez inutile... Bon ce n'est évidemment pas la réponse que tu attendais, mais il me semble que c'est une mauvaise idée de procéder de cette manière: tu fournis par ta feuille de style un contenu non accessible sans css (et pour tous les utilisateurs d'Internet Explorer au passage!) et pourtant relativement important. Une liste ordonnée, par exemple, me paraît plus indiquée...

Bref, pour en revenir au sujet de base:

Non non, Safari accepte bel et bien un contenu généré par :before pour tout élément, qu'il soit de type block ou inline. Dans ton problème par exemple, si tu t'en tiens à ceci:Tu remarqueras que Safari affiche bien ce contenu généré par css; le problème apparaît donc dès lors que tu fais suivre une chaîne de caractère par ce fameux counter(blockcode).
Effetivement, &#231;a marche si j'enl&#232;ve le compteur... forc&#233;ment Safari ne le supporte pas.


Je sais que c'est pas un vrai probl&#232;me, je l'ai dit moi m&#234;me il y a une solution tr&#232;s simple et qui marchera partout, c'est ce que j'ai fait finalement :)


En fait j'avais envi de jouer avec les compteur en CSS c'est tout :rose:
 
j'avais envi de jouer avec les compteur en CSS c'est tout :rose:
C'est tout en ton honneur! :zen:
Malheureusement, tu surestimes le support des normes css des navigateurs actuels...;)
Ceci dit, pour d&#233;fendre un ptit peu ce cher Safari, je dirais que c'est excessivement rare de se plaindre de ses comp&#233;tances... ce qui n'est pas vraiment le cas d'Internet Explorer... (sur celui-l&#224; par contre, vous pouvez crasher de bon coeur :o )
 
C'est tout en ton honneur! :zen:
Malheureusement, tu surestimes le support des normes css des navigateurs actuels...;)
Ceci dit, pour d&#233;fendre un ptit peu ce cher Safari, je dirais que c'est excessivement rare de se plaindre de ses comp&#233;tances... ce qui n'est pas vraiment le cas d'Internet Explorer... (sur celui-l&#224; par contre, vous pouvez crasher de bon coeur :o )
Ben en fait le probl&#232;me aurait eu lieu sur IE, je me serais m&#234;me pas poser de question, mais l&#224; j'avais pas encore tester sur IE (je ne m'attendais &#224; rien...)


Mais l&#224; quand &#231;a n'a pas marcher sur Safari j'&#233;tais tellement &#233;tonn&#233; que j'ai post&#233; ici pour voir si &#231;a venait pas de moi :p




IE sucks !
 
salut
j'ai trouv&#233; &#231;a.
A premi&#232;re vue la structure que tu utilises est en cause ; tu appliques &#224; un m&#234;me bloc (#container) le counter-reset et le counter-increment.
Dans l'exemple de laurent, ces attributs sont sp&#233;cifi&#233;s dans deux blocs distincts (body et Hn). Peut-&#234;tre que l'erreur provient de l&#224; ?
 
salut
j'ai trouv&#233; &#231;a.
A premi&#232;re vue la structure que tu utilises est en cause ; tu appliques &#224; un m&#234;me bloc (#container) le counter-reset et le counter-increment.
Dans l'exemple de laurent, ces attributs sont sp&#233;cifi&#233;s dans deux blocs distincts (body et Hn). Peut-&#234;tre que l'erreur provient de l&#224; ?
Ben ce que j'ai fait marche tr&#232;s bien sur Firefox et Op&#233;ra.

Et je n'applique pas le counter-reset et le counter-increment
le counter-reset s'applique &#224; #container et le counter-increment s'applique au &#233;l&#233;ment de classe "blockcode" qui sont dans #container :)


EDIT : d'ailleurs je viens de tester et l'exemple sur le lien que tu donne &#231;a marche pas dans Safari ;)
 
bizarre, chez moi &#231;a fonctionnesur Safari et pas sur FF :confused:
Que que quoi ? :heu: j'me suis fait avoir l&#224;...
Je me sens vraiment rouler... kesskifoumonsafari ? :mouais:

J'ai &#231;a sous Safari : (j'ai changer la couleur pour que ce soit plus facilemen t distingu&#233; de l'image)
countersafari.png



Et &#231;a sous Firefox et Opera :
counterffop.png
 
et ben vl'&#224; ti pas qu'&#231;a fonctionne sur FF maintenant :D


EDIT :En fait sur safari, c'est une image... je me suis fait avoir comme un bleu....
:D :D

L'image est l&#224; pour que les navigateurs avec lesquels &#231;a ne marche pas pour que le visiteur puisse avoir une id&#233;e du rendu "normal" ;)


En tout cas je suis rassur&#233; de pas avoir un Safari unique qui marche pas komifo :rateau: