18041 sujets

Questions générales et questions de débutants

Question sur html5shiv

bonjour à tous!
je veux savoir si le script html5shiv fonctionne réellement, car je l'ai essayé sur mon site
pour savoir si je pouvais l'adapter et rendre mon site compatible avec d' anciennes version IE mais bon rien ne se passe.les nouvelles balise nav footer et section ne sont visiblement pas reconnues.
.voici le code que je mets dans mes pages.

<head>
	<meta charset="utf-8" />
	
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css"/>
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	 
	 <!--[if lte IE 7]>
	 <link rel="stylesheet" href="style-ie.css" />
	 <![endif]-->
	 <title>mon site</title>
 </head>

ai-je raté une étape ?
merci pour votre aide !
Hello,

J'utilise HTML5shim sur le même serveur (googlecode) sans rencontrer de problème. Essaye avec celui-ci…
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->


Naturellement, ça suppose que aussi de passer les éléments HTML5 en display: block dans ta feuille de styles, hein Smiley ravi
Modifié par audrasjb (26 Mar 2012 - 16:14)
Bonjour bonjour,

HTML5Shiv permet de créer les éléments qui n'existe pas dans le DOM. Pour que ça ce passe (visuellement) bien sur IE il manque cependant une étape. En effet, alors que les éléments non reconnu pour les autres navigateurs ont un rendu de type bloc, ce n'est pas le cas pour IE.

Donc en plus de shiv il faudra déclarer ces éléments en CSS et leurs appliquer un:
display:block
En espérant avoir pus d'éclairer (merci à Geoffrey pour ces précisions ^^)

Edit : grillé par Jb ^^
Modifié par Gili (26 Mar 2012 - 16:18)
ok merci pour vos réponses . Mais du coup la déclaration des display: bloc je le fais pour les balise section, nav, footer c'est ça ? et est ce que je fais ça dans un fichier css à part ou je met ça dans le css principal ?
Tu peux la mettre dans la feuille de style principal, et il n'y a pas que section nav et footer auxquel il faut appliquer cette déclaration. Si tu fais de l'HTML5 le canvas de Boilerplate est tout approprié et contient les déclarations nécessaires.

En somme ça ressemble à ceci :
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
ok merci gili pour cette précision .je vais voir ça demain pas le temps ce soir . donc si j'ai compris IE lira cette déclaration puisqu'il ne comprend pas les nouvelle balise c'est ça ? mais pour les navigateurs récents si je déclare par ex
nav, footer
{
display: block;
}

alors que j'ai déjà déclaré nav comme ceci
nav
{display: inline-block;}

pour les besoins de mes styles comment ça ce passe pour ces navigateurs qui respecte HTML5 il va pas y avoir une contradiction ?
En fait c'est ce qu'on appel un reset CSS. On applique des propriétés à certains éléments afin que le rendu de ceux-ci soit homogène sur tout les navigateurs. Ici, en l'occurrence pour que les éléments non reconnus par IE ai un comportement de type bloc comme sur les autres navigateurs. En gros, le reset sert à mettre tout le monde sur le même pied d'égalité.

Il se place en premier dans le fichier CSS, comme ça si tu veux modifier le comportement par défaut de certains éléments tu le fais après en écrasant la propriété. Donc pour ta question tout les navigateurs liront bien :
nav, footer
{
display: block;
}
mais après ils tomberont sur 
nav
{display: inline-block;}
Qui viendra écraser la propriété précédente. Enfin je t'invite à lire l'article que je t'ai link en début de poste si ça ne te semble pas clair (et même si ça l'est d'ailleurs ^^).
Modifié par Gili (26 Mar 2012 - 19:16)
Bonjour ! Smiley smile
bon j'ai repris mon problème d'hier. j'ai fait des essais en mettant les display : bloc en début de css pour mes éléments HTML5 comme gili me l'a indiqué mais ça change rien . c'est comme si le lien qui récupère le script n'existait pas mais ça je peux pas le vérifier. j'ai regardé si javascript était bien activé sous IE au cas ou et tout est coché en plus j'ai déjà un autre script js qui fonctionne donc c'est pas ça je pense après je sais pas je suis en panne d'idée.y a peut être un truc que j'ai oublié ?
Iop ^^

Que se passe-t-il en fait ? Le rendu visuel sur IE et les autres browsers est différent ? Si oui qu'elle est cette différence ? le document se comporte comme si les nouvelles balises étaient inline ? Quelle version d'IE utilises-tu ? shiv est bien placé dans le head et non fin du document ? As-tu un screenshot ? ou encore mieux, un site en ligne ?
Salut Gili, Smiley cligne
en fait mon site n'est pas encore en ligne pour l'instant il est en local . tout fonctionne avec chrome et firefox 11. sauf sous IE c'est la version 6 (je sais y a mieux mais je n'utilise plus IE depuis longtemps) en plus je tourne sous XP donc pour le moment autant oublié la dernière version d' IE . donc sous cette version rien ne s'affiche correctement les blocs s'affichent les uns sous les autres et les bordures que j'avais mis dans le css pour les délimiter n'apparaissent pas . à par les titres qui sont affichés avec la bonne couleur de texte et la bonne police sinon pour le reste ....
j'ai fait comme tu m'as dit . j'ai bien mis shiv dans le head et les display: block; au début du fichier css.
En revanche j'ai fait des tests sur un bout de code en html5 avec un peu de css qui doit afficher deux blocs, un section et l'autre nav avec des liens sur une page selon le même principe et ça à l'air de fonctionner quand je lance la page depuis l'éditeur de texte en choisissant IE alors que pour mon site je le lance depuis localhost de wampserver alors je me demande, y a t il pas un soucis avec php par hasard ?
Salut,

Désolé pour la réponse tardive. Peut-être as-tu mentionné certain nom d'attributs/balises/selecteur en majuscule et que tu les as mentionné en minuscule autre part (au pif comme ça) j'ai déjà eu ce genre de problème, quand je développe en local le serveur n'est pas sensible à la casse et une fois que je met en ligne c'est le cas.

Dans tout les cas un screen shot ou un petit bou de code, et on pourra mieux cerner le problème.

Quand tu dis qu'ils sont affichés les uns en dessous des autres, c'est qu'ils sont bien en display: block malgré tout et qu'une autre propriété viens fouttre la merde. Ou tu voulais plutôt dire qu'ils sont les uns sur les autres ?
Salut gili ,
ben écoute pas de soucis, c'est déjà sympa de ta part de m'aider.
ce que voulais te dire c'est qu'en fait sous IE tout s'affiche normalement les blocs les uns à la suite des autres comme si il n'y avait pas de CSS .
mais un truc m'échappe si tu peux éclairé ma lanterne au sujet du script HTMLshiv. En fait si j'ai bien compris ,dis moi si je me trompe, le script modifie les éléments HTML5 seulement en interne dans le navigateur et non pas directement sur l'écran c'est ça ?donc si je veux appliqué des styles sous IE pour ces éléments, il faut que je fasse par ex une autre feuille de style pour IE comme je l'ai indiqué dans mon ex avec ce code :

<!--[if lte IE 7]>
		<link rel="stylesheet" href="style-ie.css" />
	<![endif]-->


et dedans faire mes modifs au cas par cas . je dis ça parce qu' en fouillant sur le net
j'ai vue qu'en modifiant le layout comme ceci pour IE 

nav, section, footer				/*on modifie le layout des éléments HTML5 qui sont en inline block*/
{
	display: inline;
	zoom: 1;
}


En faisant quelque bidouilles ça avait l'air de fonctionner j'arrive à déplacer des blocs aux endroits voulus mais je l'ai pas fait sur tout les éléments en html5 et je ne sais pas si ça fonctionnera je vais donc continuer à faire des tests .
Iop ^^

Taz28 a écrit :
le script modifie les éléments HTML5 seulement en interne dans le navigateur et non pas directement sur l'écran c'est ça ?
C'est exactement ça, en fait, plus précisément il crée les éléments dans le DOM, donc non visible à l'écran effectivement.

Taz28 a écrit :
donc si je veux appliqué des styles sous IE pour ces éléments, il faut que je fasse par ex une autre feuille de style pour IE comme je l'ai indiqué dans mon ex avec ce code :
Oui tu peux faire comme ça, ou dans la feuille de style principal, quand tu définis le comportement d'une balise nav, à priori tu souhaites que se soit le même sur tous les navigateurs, et pas seulement pour IE, je serai donc tenté de le mettre dans le feuille de style de base.

Sinon pour pas t'embêter avec ça je te conseil vraiment le canvas HTML5 Boilerplate qui te prémâche le travail, tu n'as plus qu'a t'occuper des styles pour tout les navigateurs.

Bon chance pour la suite Smiley smile
Sujet clos
Aller à