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

p4bl0 · 24 Mars 2007

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

Amok · 24 Mars 2007

p4bl0 a dit:
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 ?

p4bl0 · 24 Mars 2007

Amok a dit:
Pourtant c'est censé marcher... Tu peux en dire plus ?

Ouais

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&#176;" 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à le rendu sous firefox et Opéra :

Voilà le rendu sous Safari :

En fait je suis en train de faire un site pour pAjax, il y a eu quelque changement depuis que j'ai posté ça, donc le post n'est plus trop à 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ésoudre ce problème simplement en tapant à chaque fois à la main le "Code n°x" dans un span par exemple et en remplaçant "#container .blockcode:before" par "#container .blockcode span", mais ça m'énerve, je veux que ça marche

da capo · 24 Mars 2007

visiblement (lecture rapide) Safari attend un paramètre value :

http://developer.apple.com/document...ariCSSRef/Articles/StandardCSSProperties.html

p4bl0 · 24 Mars 2007

starmac a dit:
visiblement (lecture rapide) Safari attend un paramètre value :

http://developer.apple.com/document...ariCSSRef/Articles/StandardCSSProperties.html

J'ai essayé ça change rien du tout... j'ai l'impression que Safari n'accepte le pseudo-element :before que pour les éléments inline... bizarre

Safari est pas censé respecter les normes CSS 2.1... ? :mouais:

da capo · 24 Mars 2007

p4bl0 a dit:
Safari est pas censé respecter les normes CSS 2.1... ? :mouais:

A vérifier… je n'en sais fichtre rien. On aurait tort de penser que la réussite du test Acid valide de fait l'ensemble des spécifications de la norme.

D'ailleurs sur cette page, on voit que counter-increment n'est pas pris en compte :

http://developer.apple.com/internet/safari/safari_css.html

p4bl0 · 24 Mars 2007

wouarf... bon ben j'utilise la solution avec les span...

Pitaing le jour ou tout les navigateurs afficheront la même chose pour le même code ça sera coule !!

En attendant c'est plutôt :hein:

da capo · 24 Mars 2007

le jour où il n'y aura plus de verbes irréguliers en anglais, le jour où amours ne sera plus féminin…

ce sera triste :siffle:

p4bl0 · 24 Mars 2007

starmac a dit:
le jour où il n'y aura plus de verbes irréguliers en anglais, le jour où amours ne sera plus féminin…

ce sera triste :siffle:

c'est jolie ce que tu racontes, et pour le coup des verbes irréguliers, je trouve que les verbes irréguliers anglais sont plus réguliers que notre troisième groupe

Benjamin D.C. · 25 Mars 2007

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:

p4bl0 a dit:
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).

p4bl0 · 25 Mars 2007

dcz_ a dit:
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, ça marche si j'enlève le compteur... forcément Safari ne le supporte pas.

Je sais que c'est pas un vrai problème, je l'ai dit moi même il y a une solution trè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

Benjamin D.C. · 25 Mars 2007

p4bl0 a dit:
j'avais envi de jouer avec les compteur en CSS c'est tout

C'est tout en ton honneur! :zen:
Malheureusement, tu surestimes le support des normes css des navigateurs actuels...

Ceci dit, pour défendre un ptit peu ce cher Safari, je dirais que c'est excessivement rare de se plaindre de ses compétances... ce qui n'est pas vraiment le cas d'Internet Explorer... (sur celui-là par contre, vous pouvez crasher de bon coeur :o )

p4bl0 · 25 Mars 2007

dcz_ a dit:
C'est tout en ton honneur! :zen:
Malheureusement, tu surestimes le support des normes css des navigateurs actuels...
Ceci dit, pour défendre un ptit peu ce cher Safari, je dirais que c'est excessivement rare de se plaindre de ses compétances... ce qui n'est pas vraiment le cas d'Internet Explorer... (sur celui-là par contre, vous pouvez crasher de bon coeur :o )

Ben en fait le problème aurait eu lieu sur IE, je me serais même pas poser de question, mais là j'avais pas encore tester sur IE (je ne m'attendais à rien...)

Mais là quand ça n'a pas marcher sur Safari j'étais tellement étonné que j'ai posté ici pour voir si ça venait pas de moi

IE sucks !

fredmac75 · 25 Mars 2007

salut
j'ai trouvé ça.
A première vue la structure que tu utilises est en cause ; tu appliques à un même bloc (#container) le counter-reset et le counter-increment.
Dans l'exemple de laurent, ces attributs sont spécifiés dans deux blocs distincts (body et Hn). Peut-être que l'erreur provient de là ?

p4bl0 · 25 Mars 2007

fredmac75 a dit:
salut
j'ai trouvé ça.
A première vue la structure que tu utilises est en cause ; tu appliques à un même bloc (#container) le counter-reset et le counter-increment.
Dans l'exemple de laurent, ces attributs sont spécifiés dans deux blocs distincts (body et Hn). Peut-être que l'erreur provient de là ?

Ben ce que j'ai fait marche très bien sur Firefox et Opéra.

Et je n'applique pas le counter-reset et le counter-increment
le counter-reset s'applique à #container et le counter-increment s'applique au élément de classe "blockcode" qui sont dans #container

EDIT : d'ailleurs je viens de tester et l'exemple sur le lien que tu donne ça marche pas dans Safari

fredmac75 · 25 Mars 2007

p4bl0 a dit:
EDIT : d'ailleurs je viens de tester et l'exemple sur le lien que tu donne ça marche pas dans Safari

bizarre, chez moi ça fonctionnesur Safari et pas sur FF

p4bl0 · 25 Mars 2007

fredmac75 a dit:
bizarre, chez moi ça fonctionnesur Safari et pas sur FF

Que que quoi ? :heu: j'me suis fait avoir là...
Je me sens vraiment rouler... kesskifoumonsafari ? :mouais:

J'ai ça sous Safari : (j'ai changer la couleur pour que ce soit plus facilemen t distingué de l'image)

Et ça sous Firefox et Opera :

fredmac75 · 25 Mars 2007

et ben vl'à ti pas qu'ça fonctionne sur FF maintenant

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

p4bl0 · 25 Mars 2007

fredmac75 a dit:
et ben vl'à ti pas qu'ça fonctionne sur FF maintenant

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

L'image est là pour que les navigateurs avec lesquels ça ne marche pas pour que le visiteur puisse avoir une idée du rendu "normal"

En tout cas je suis rassuré de pas avoir un Safari unique qui marche pas komifo :rateau:

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

p4bl0

Membre expert

Amok

Membre vénérable

p4bl0

Membre expert

da capo

abonné absent

p4bl0

Membre expert

da capo

abonné absent

p4bl0

Membre expert

da capo

abonné absent

p4bl0

Membre expert

Benjamin D.C.

Membre expert

p4bl0

Membre expert

Benjamin D.C.

Membre expert

p4bl0

Membre expert

fredmac75

Membre expert

p4bl0

Membre expert

fredmac75

Membre expert

p4bl0

Membre expert

fredmac75

Membre expert

p4bl0

Membre expert

Sujets similaires