Text-shadow sur IE9

**zooffy** · 29/10/2012, 11h05

Bonjour à tous.

Je me doute que le sujet a été abordé pas mal de fois, mais je n'ai pas trouvé de solution dans le forum ou même sur internet en général.

En fait, je ne comprends pas les différentes solutions proposé et lorsque je test les codes proposés à différentes endroits, cela n'a aucun résultat.

Mais surtout, je crois avoir les choses suivantes mais je n'en suis pas sûr. Pourriez vous me confirmer ou me corriger les choses suivantes :
- Text-shadow ne fonctionne pas naturellement sur IE sauf la version 10
- Text-shadow peut être émulé sur IE 8 et inférieur avec le filter :proxid ou le filter :dropshadow
- Text-shadow est impossible à faire sur IE9

Si vous infirmez la dernière, pourriez vous me donner une lien vers un tuto clair qui m'explique comment faire la chose ?

Je suis complètement paumé avec toutes les histoires de versions de navigateur. L'ennui c'est que je ne peux pas répondre à mon commanditaire qu'il va devoir se passer de presque 40 % de ses visiteurs à cause de ça.

Merci pour votre aide.

**MaitreKaio** · 29/10/2012, 16h33

A ma connaissance, text-shadow est supporté par IE10 et il est possible d'émuler (avec plus ou moins de bonheur) sous IE <= 9.
Pour mon site Web par exemple, je l'ai fait en utilisant Modernizr pour détecter le support, puis en faisant appel au polyfill approprié le cas échéant.
Je ne vois pas bien ce qui te fait penser que c'est impossible sous IE9

**Bovino** · 30/10/2012, 08h17

L'ennui c'est que je ne peux pas répondre à mon commanditaire qu'il va devoir se passer de presque 40 % de ses visiteurs à cause de ça.

Tu veux dire que sans text-shadow, ton site est inutilisable ?

Text-shadow est impossible à faire sur IE9

Heu... tu as entendu parler de Google ?

**zooffy** · 30/10/2012, 09h35

Envoyé par Bovino

Tu veux dire que sans text-shadow, ton site est inutilisable ?

Non, bien entendu. Mais il y tient particulièrement, du coup c'est ennuyeux. Mais il pense qu'il serait bon de notifier les visiteurs sur leur version de navigateur et de les inviter à changer.

Envoyé par Bovino

Heu... tu as entendu parler de Google ?

Envoyé par zooffy

Je me doute que le sujet a été abordé pas mal de fois, mais je n'ai pas trouvé de solution dans le forum ou même sur internet en général.

Je pense que ma phrase d'introduction indique que oui, je connais Google mais que je n'ai pas trouvé ce que je cherchais. Enfin c'est ce que je voulais exprimer, mais j'ai dû mal m'y prendre........

@MaitreKaio : merci pour ton aide, je vais aller voir Modernizr pour voir comment ça marche, mais je dois bien avouer que ce que tu me propose est un peu obscur pour moi car je en connais absolument pas ces choses là.

**Muchos** · 30/10/2012, 16h47

Envoyé par zooffy

Mais il pense qu'il serait bon de notifier les visiteurs sur leur version de navigateur et de les inviter à changer.

Perso, je ne le crois absolument pas.
D'une part, comme dit Bovino, text-shadow, c'est de la déco.
D'autre part, ce n'est jamais à l'utilisateur de changer de navigateur. Un site pro doit pouvoir se dégrader jusqu'à rester utilisable même s'il n'a plus de forme.

**zooffy** · 30/10/2012, 17h01

Donc selon toi adopteunmec.com est en "faute" ? (premier exemple qui me vient en tête)

Maintenant mon commanditaire, donc celui qui me paie et donc qu'il ne JAMAIS contredire, tient beaucoup au design. J'en chie avec lui pour des pixels de travers mais pas un regard sur les procédures stockées de folie que je lui fais en SQL !!!!!

Bon, je vais tenter de lui faire avaler cette pilule en lui disant qu'une fois IE 10 bien déployé, les ombrages seront sur les trois navigateurs, suffit d'attendre.

Merci pour les conseils.

Et pour reprendre ce que dit Bovino : ce n'est pas MON site, mais celui d'un commanditaire. Si c'était le mien il serait en noir sur fond blanc !!!!!
C'est pour ça que je rame comme un fou, j'ai pas l'habitude de faire du beau.

Bonne journée à tous.

**NoSmoking** · 30/10/2012, 18h24

Bonjour,
tu peux également utiliser http://www.hintzmann.dk/testcenter/j...ry/textshadow/, qui donne de bons résultats, jQuery inside.

**zooffy** · 31/10/2012, 09h53

Merci pour ce lien.
J'avais trouvé ça en me baladant sur le net, mais il ne fonctionne pas sur IE9 ou alors j'ai pas réussi à la mettre en place.
Dans la description du tuto il parle de IE 8 et inférieur mais pas du 9.

Bonne journée.

**Torgar** · 31/10/2012, 10h14

Le plus simple pour te rendre compte si tu as mal implémenté le bazar c'est d'ouvrir le site du plugin avec IE9 et voir si ça fonctionne. Ce qui est le cas chez moi.

**zooffy** · 31/10/2012, 11h02

Ok, visiblement j'ai mal implémenté la chose puisque je vois bien les ombres sur le site.

Alors peut-être que vous allez pouvoir m'aider à trouver le bug parce que j'ai copié le code source du site en question et j'ai toujours pas d'ombre sur mon texte.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<script type="text/javascript" src="/style/jquery.textshadow.js"></script>
	<script type="text/javascript">
	    $(document).ready(function() {
	        $('h1, h2, .example p').textShadow();
	    });
	</script>
 
</head>
<body>
<h1>un texte avec de l'ombrage.</h1>
</body>
</html>

Et j'ai bien vérifié la localisation du fichier jquery.texteshadow.js fraichement téléchargé depuis le site.

Là, je sèche.

**zooffy** · 31/10/2012, 14h19

Bon, j'ai trouvé pourquoi ça amrchiat pas !! Je suis une buse....
J'ai juste oublié de déclarer la classe CSS, j'avais pas capté qu'il fallait le faire obligatoirement.

Mais du coup, je me retrouve avec un résultat qui me laisse pantois. Une fois appliqué dans le site je me retrouve avec des ombrages corrects sur une partie du texte et complètement déconnant sur une autre partie du texte. Et tout cela me semble aléatoire. Je mets une copie d'écran zoomée pour que cela se voit bien.

Sur le texte "premier commanteira" le mot "premier" est bon mais "commentaira" est décalé de manière bizarre.
Pareil pour le mot "Posté" dans le cadre rouge. Le "a" est bien mais pas le reste.

Je ne sais pas trop comment faire pour trouver le bug. Auriez vous une idée ?

**NoSmoking** · 31/10/2012, 19h10

<humour>
c'est tellement sombre qu'ajouter de l'ombre nuit à la lisibilité

</humour>

plus sérieusement il faut que ta page soit clean, avec un code pur sans extravagance que je redoute attendu un de tes derniers post.

**Muchos** · 01/11/2012, 00h22

Ton commanditaire veut des ombres sur un fond noir ?!

Attention ! Il pourrait s'en rendre compte et te demander de retirer la feature alors que tu t'es cassé à l'implémenter

**zooffy** · 01/11/2012, 11h33

Merci pour les remarques mais lui, lorsqu'il a vu cela sur FF, donc avec les ombres dans le bon ordre il a trouvé ça fantastique. Bref, c'est un graphiste à la base, donc..........

Le code de ma page doit être bon, je pense je n'ai pas eu de remarque sur mon dernier post avec le code final.
C'est tout de même bizarre comme comportement, je trouve, ça n'a pas de logique.

Invité · 01/11/2012, 15h18

Bonjour Erick,
grâce à ton post, j'ai moi aussi testé la solution jQuery...
et rencontré les mêmes problèmes de positionnement des ombres.

Étant pour ma part "multitâche" (graphiste, développeur, intégrateur,...), le moi-graphiste ne va pas se fâcher avec le moi-intégrateur si ça ne donne pas le résultat escompté.

Donc, à moins que ton graphiste ne soit complètement borné, tu devrais pouvoir lui expliquer :
- que I.E. est une bouse ;
- que les différents navigateurs, quoi qu'on fasse, ont de toute façon leurs petites différences d'affichage ;
- que, même sans les ombres, ce sera "super top" ! (à dire avec beaucoup d'enthousiasme)
- qu'il faut savoir faire des compromis (à penser mais surtout pas à dire : "compromis, chose due")

**zooffy** · 02/11/2012, 09h21

Entièrement d'accord avec toi sur tout ça sauf sur le fait que IE soit une bouze.
J'aime beaucoup ce navigateur et il représente encore plus de 40 % des visiteurs, donc je ne veux pas me passer de cette masse.

Je dois faire une petite "enquête" pour voir les habitudes précises de la population visée par le site, histoire d'affiner les optimisations.

Et en plus tu es fan de Coluche .....

Bonne journée

**Bovino** · 02/11/2012, 09h40

il représente encore plus de 40 % des visiteurs

Tu es très optimiste :

**zooffy** · 02/11/2012, 10h12

J'avoue que je n'avais pas consulté ce site depuis un bout de temps.
Mais on voit tout de même que les trois navigateurs princiapux sont a quasi égalité d'utilisation, du coup, on ne peux pas se départir d'un tiers de ses visiteur sur un site.

Mais comme j'ai dit, vu que la population visée par le site est particulière, il faut que je vois sur les sites "concurents" la répartition des navigateurs.
Avec ça, j'aurais une meilleure visibilité des choses et je saurais mieux où mettre l'accent.

Bonne journée à tous.

**Bovino** · 02/11/2012, 10h24

on ne peux pas se départir d'un tiers de ses visiteur sur un site

Euh... il y a quand même une énorme différence entre le fait que 30% d'utilisateurs n'auront pas droit aux ombrages du texte et le fait que le site soit inutilisable pour eux !

Les améliorations visuelles sont un agrément pour les visiteurs qui ont un navigateur compatible, ce n'est en rien pénalisant pour la visite du site (ou du moins, ça ne devrait pas). Si l'utilisateur n'a pas un navigateur compatible, ben tant pis pour lui (bien que rien ne t'empêche de le lui signaler, discrètement si possible).

**NoSmoking** · 02/11/2012, 14h22

Envoyé par zooffy

Le code de ma page doit être bon, je pense je n'ai pas eu de remarque sur mon dernier post avec le code final.
C'est tout de même bizarre comme comportement, je trouve, ça n'a pas de logique.

je note que la construction, vue sur un de tes post, est

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="divPoste-ctr">
  <span id="Span2" style="margin-left:-20px;">
  <span class='PseudoComment'>Ablanore à ralonge</span>
  <span class='TitreComment'>Le grand malade</span>
  <span class='posteComment'>le </span>
  <span class='posteCommentDate'>15/10/2012 </span>
  <span class='posteComment'>à </span>
  <span class='posteCommentDate'>16:54 </span>
  <span class='posteComment'>a posté</span>
  </span>
</div>

et que si l'on observe les "dérives" on trouve une corrélation avec tes différents SPAN.

Text-shadow sur IE9

CSS

Discussions similaires

Partager

Partager