11548 sujets

JavaScript, DOM et API Web HTML5

Pages :
Modérateur
Bonjour,
J'ai passé mon site perso en HTML5 (si vous avez envie de faire un commentaire, merci de vous rendre au sujet que j'ai ouvert [1]) et j'utilise html5 shiv [2] (je rappelle que c'est pareil que shim) pour la prise en charge des nouvelles balises par ie 6 à 8 . Or le JS actuel, ne fonctionne pas pour moi sur IETester (probablement pas non plus pour les navigateurs originaux).
J'ai laissé un signalement de bogue sur github : https://github.com/aFarkas/html5shiv/issues/67
Quelqu'un peut-il confirmer cet état de fait ? Sinon, que fais-je faux ?

Merci d'avance Smiley smile

[1] http://forum.alsacreations.com/topic-18-61919-1-perso-passage-XHTML-10--HTML5.html#p421353
[2] http://code.google.com/p/html5shiv/
Modifié par jojaba (19 May 2012 - 14:22)
Bonjour,
Je ne vois aucun souci d'affichage avec IE7 chez moi. Essaye avec un navigateur original plutôt qu'avec IE Tester…
Salut,

je viens de tester sous IE Tester et ca fonctionne correctement pour moi. Est-ce que tu as toujours ce probleme?
Modérateur
martint a écrit :
Salut,

je viens de tester sous IE Tester et ca fonctionne correctement pour moi. Est-ce que tu as toujours ce probleme?

Oui, je joins une copie d'écran de l'erreur JS qui s'affiche...
upload/3069-erreur-shiv.png
ctalkington me conseille d'utiliser plutôt ça :
http://cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.js

J'ai testé ce lien et il n'y a plus d'erreur JS affichée mais les éléments <article>, <head>, etc... ne sont pas considérés comme étant des éléments blocs et s'affichent en inline (alors qu'en principe, shiv se charge de les définir en tant que blocs).
Des avis là-dessus ?
Modifié par jojaba (21 May 2012 - 15:05)
Si tu pointes vers un repo github tu en dependras forcement, c'est a dire s'il est modifie ou supprime tu seras bien embete.

Le telecharger et pointer vers une copie, locale ou vers un CDN (pour de meilleures perf) est une meilleure solution.

Apres le lien que ctalkington t'a donne pointe vers une version specifique (pas la derniere apparement) du html5shiv je ne sais pas si ca te conviens ou non.

Je viens de re-tester et aucune erreur de script chez moi quand je vais sur ton site. C'est bien sur http://jojaba.free.fr/ que tu as des erreurs?
Il n'y a pas d'intérêt à utiliser un CDN avec html5shiv (le fichier est tellement léger), le mieux c'est de le copier sur ton serveur et de faire un lien dessus.

Certains incorpore même le code du script dans la page. Smiley smile
Modifié par Patidou (21 May 2012 - 16:00)
Modérateur
martint a écrit :

Je viens de re-tester et aucune erreur de script chez moi quand je vais sur ton site. C'est bien sur http://jojaba.free.fr/ que tu as des erreurs?

Non martin, là je pointe sur le fichier (modifié par mes soins) que j'ai uploadé sur mon serveur. Le problème vient de la version originale sur github.
patidou a écrit :

Il n'y a pas d'intérêt à utiliser un CDN avec html5shiv (le fichier est tellement léger), le mieux c'est de le copier sur ton serveur et de faire un lien dessus.

C'est ce que j'ai fait et je pense m'en tenir là.
Patidou a écrit :
Il n'y a pas d'intérêt à utiliser un CDN avec html5shiv (le fichier est tellement léger), le mieux c'est de le copier sur ton serveur et de faire un lien dessus.


Oui c'est vrai dans ce cas la.

Sinon j'ai cree un fiddle pour tester sous IE avec la version original et je ne peux toujours pas reproduire l'erreur que tu obtiens. http://jsfiddle.net/tanguy/2yeDs/

Sans le code exact que ta page genere c'est un peu dur!
Modérateur
martint a écrit :


Oui c'est vrai dans ce cas la.

Sinon j'ai cree un fiddle pour tester sous IE avec la version original et je ne peux toujours pas reproduire l'erreur que tu obtiens. http://jsfiddle.net/tanguy/2yeDs/

Sans le code exact que ta page genere c'est un peu dur!


J'ai copié/coller le code de ma page d'accueil que je modifie en local dans ton fiddle. J'ai un drôle de résultat avec ieTester. La copie :
upload/3069-fiddle-joja.png
C'est peut-être ieTester qui bogue chez moi ? J'utilise la dernière version de ce nagvigateur sur Windows 7 64bits.
Modifié par jojaba (21 May 2012 - 18:15)
oui j'ai cette meme erreur mais sous ieTester seulement, ca ne vient pas du shiv car ca le fait meme sans l'inclure. Sous IE ca fonctionne correctement. Tu ne peux pas tester avec IE et les modes de compatibilite en fait?
Modérateur
martint a écrit :
oui j'ai cette meme erreur mais sous ieTester seulement, ca ne vient pas du shiv car ca le fait meme sans l'inclure. Sous IE ca fonctionne correctement. Tu ne peux pas tester avec IE et les modes de compatibilite en fait?

Je viens de tester en mode de compatibilité ie 7 et ie 8 dans ie9. Ce qui se passe, c'est que la feuille de style semble ne pas être chargée, j'obtiens la page brute.
Modérateur
martint a écrit :
oui j'ai cette meme erreur mais sous ieTester seulement, ca ne vient pas du shiv car ca le fait meme sans l'inclure. Sous IE ca fonctionne correctement. Tu ne peux pas tester avec IE et les modes de compatibilite en fait?

Je viens de tester en mode de compatibilité ie 7 et ie 8 dans ie9. Ce qui se passe, c'est que la feuille de style semble ne pas être chargée, j'obtiens la page brute. J'ai placé l'appel à la feuille de style avant la déclaration shiv, mais rien n'y fait.
Modérateur
jojaba a écrit :

Je viens de tester en mode de compatibilité ie 7 et ie 8 dans ie9. Ce qui se passe, c'est que la feuille de style semble ne pas être chargée, j'obtiens la page brute. J'ai placé l'appel à la feuille de style avant la déclaration shiv, mais rien n'y fait.

Je suis en train d'adapter mon site à aprtir des remarques faites dans la discussion sur la migration vers HTML5 dans ce forum, ce qui fait que j'ai modifié l'appel à la css (en utilisant des media-queries) et ce qui expliquait pourquoi la feuille de style n'était pas chargée...
Cependant, il subsiste un souci. J'ia fait deux copies d'écran, la première avec le JS en local et la seconde avec le script distant sur github.

Script en local :
upload/3069-shiv-local.jpg
La section head pour cette copie d'écran :
<head>
    <meta charset="utf-8" />
    <title>JoJaBa</title>
    <meta name="description" content="Traduction d'extensions Mozilla, développement et utilisation de Plume CMS" />
    <meta name="keywords" content="page d'accueil, index, défaut" />
    <link rel="icon" type="image/png" href="/jojaba2010/xmedia/theme/airjojaba/img/favicon.png" />
    <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/jojaba2010/xmedia/theme/airjojaba/img/favicon.ico" /><![endif]-->
    <!--[if lt IE 9]>
    <script src="/jojaba2010/xmedia/theme/airjojaba/html5shiv.js"></script>
    <![endif]-->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/jojaba2010/rss.php" />
    <link rel="stylesheet" type="text/css" href="/jojaba2010/xmedia/theme/airjojaba/style.css" media="screen" />
    <script src="/jojaba2010/xmedia/theme/airjojaba/jojaba.js"></script>
    <!-- Google analytics -->
    <script type="text/javascript">
     var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-22412685-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
      </script>
</head>


Script distant
upload/3069-jojaba-shiv.jpg
L'entête pour cette copie :
<head>
    <meta charset="utf-8" />
    <title>JoJaBa</title>
    <meta name="description" content="Traduction d'extensions Mozilla, développement et utilisation de Plume CMS" />
    <meta name="keywords" content="page d'accueil, index, défaut" />
    <link rel="icon" type="image/png" href="/jojaba2010/xmedia/theme/airjojaba/img/favicon.png" />
    <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/jojaba2010/xmedia/theme/airjojaba/img/favicon.ico" /><![endif]-->
    <!--[if lt IE 9]>
    <script src="https://github.com/aFarkas/html5shiv/master/dist/html5shiv.js"></script>
    <![endif]-->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/jojaba2010/rss.php" />
    <link rel="stylesheet" type="text/css" href="/jojaba2010/xmedia/theme/airjojaba/style.css" media="screen" />
    <script src="/jojaba2010/xmedia/theme/airjojaba/jojaba.js"></script>
    <!-- Google analytics -->
    <script type="text/javascript">
     var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-22412685-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
      </script>
</head> 

Modifié par jojaba (22 May 2012 - 09:24)
Modérateur
martint a écrit :
Je ne vois aucune difference!

Ouvre les images dans une nouvelle fenêtre...
J'ai fait, j'ai meme vide le cache de mon navigateur.
Ces deux images sont les memes ou bien je deviens fou.
Modifié par martint (22 May 2012 - 11:59)
Modérateur
martint a écrit :
J'ai fait, j'ai meme vide le cache de mon navigateur.
Ces deux images sont les memes ou bien je deviens fou.

C'est moi qui n'avait pas vidé mon cache. Il semblerait qu'on ne puisse pas placer 2 images un même message (on dirait que la deuxième image uploadé remplace la première. Je vais donc créer 2 messages pour ajouter chaque image dans chacun d'eux...
Pages :