Nouvelle vogue dans les sources : le code <!--[if IE 7 ]> [Résolu]

okoweb · 08/08/2011, 13h18

Bonjour,
Dans mes surfs actuels, dans les codes sources, je rencontre des choses de ce genre

Code :

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

1
2
3
4
5
6
7
 
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
 
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

Quel est l’intérêt de cette nouvelle vogue?

Merci d'avance...

12monkeys · 08/08/2011, 22h16

Bonsoir

Ce sont des commentaires conditionnels, ils permettent d'appliquer du code spécifique pour Internet Explorer. Pour chaque version de IE il y a une balise <body> spécifique, la dernière ligne s'applique aux autres navigateurs...

okoweb · 09/08/2011, 11h19

Citation:

Envoyé par 12monkeys

Bonsoir
Ce sont des commentaires conditionnels, ils permettent d'appliquer du code spécifique pour Internet Explorer. Pour chaque version de IE il y a une balise <body> spécifique, la dernière ligne s'applique aux autres navigateurs...

Merci

Et ?

Code html :

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

1
2
3
4
5
6
 
<!--[if lt IE 7 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js"> <!--<![endif]-->

Une attribut class appliqué à une balise <html>, quel peut être l'interet de ce code?

Merci d'avance...

12monkeys · 09/08/2011, 11h32

Difficile de te dire sans voir le code CSS derrière, mais c'est vrai que c'est peu commun de mettre un classe sur la balise html...

Bisûnûrs · 09/08/2011, 12h09

En fait, ça permet de n'avoir qu'un seul fichier CSS, même pour les versions antérieures de IE. Il ne te reste plus qu'à cibler dans ton CSS .ie6 #tonid {} pour avoir un style spécifique à IE6.

kdmbella · 09/08/2011, 13h20

Tout ça part du principe que le rendu des propriétés CSS n'est pas le même suivant les navigateurs et suivant les versions d'un même navigateur (particulièrement pour Internet Explorer). C'est pourquoi pour avoir un site web uniforme( présentation plus ou moins la même quelque soit le navigateur du client ), on spécifie des propriétés CSS à appliquer a chacun d'eux.
Et ce n'est pas une vogue c'est plutôt une exigence technique

okoweb · 09/08/2011, 16h31

Citation:

Envoyé par Bisûnûrs

En fait, ça permet de n'avoir qu'un seul fichier CSS, même pour les versions antérieures de IE. Il ne te reste plus qu'à cibler dans ton CSS .ie6 #tonid {} pour avoir un style spécifique à IE6.

Dans ce cas d'un seul et unique fichier css, comment faire pour gérer les media? Et dans le cas particulier pour le print?

Merci d'avance...

okoweb · 10/08/2011, 14h17

les avantages de ce truc :

Pas besoin de feuilles par navigateur :
Mieux vaut utiliser les classes conditionnelles pour Internet Explorer (« .ie », « .ie6 », « .ie7 », etc.) sans hack. » — plus précisément appliquées sur la balise <html>, plutôt que <body>, si si, comme dans HTML5 Boilerplate.
Code :

Sélectionner tout - Visualiser dans une fenêtre à part
```
1
2
3
 
    div.foo { color: inherit;}
    .ie6 div.foo { color: #ff8000; }
```
Pas besoin de feuilles par média :
Sauf cas particulier, les surcharges pour l’impression et autres medias s’effectuent au fil de l’eau, dans la même feuille, grâce à la règle CSS @media suivie directement du type. De cette façon, on conserve groupées toutes les déclarations qui concernent un même élément, ce qui améliore la modularité fonctionnelle et facilite la maintenance.
Code :

Sélectionner tout - Visualiser dans une fenêtre à part
```
1
2
3
4
5
6
7
8
9
 
/* Gabarit d'impression */
@media print {
	.nav,
	.aside,
	.footer { display: none; }
	.page,
	.content { width: auto; }
}
```

Merci à vous tous...

08/08/2011, 22h16	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonsoir Ce sont des commentaires conditionnels, ils permettent d'appliquer du code spécifique pour Internet Explorer. Pour chaque version de IE il y a une balise <body> spécifique, la dernière ligne s'applique aux autres navigateurs... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

09/08/2011, 11h32	#4
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Difficile de te dire sans voir le code CSS derrière, mais c'est vrai que c'est peu commun de mettre un classe sur la balise html... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

09/08/2011, 13h20	#6
kdmbella Membre Expert Demazy Mbella Développeur Web Inscription : août 2010 Messages : 620 Détails du profil Informations personnelles : Nom : Demazy Mbella Localisation : Cameroun Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : août 2010 Messages : 620 Points : 1 470 Points : 1 470	Tout ça part du principe que le rendu des propriétés CSS n'est pas le même suivant les navigateurs et suivant les versions d'un même navigateur (particulièrement pour Internet Explorer). C'est pourquoi pour avoir un site web uniforme( présentation plus ou moins la même quelque soit le navigateur du client ), on spécifie des propriétés CSS à appliquer a chacun d'eux. Et ce n'est pas une vogue c'est plutôt une exigence technique __________________ Trois personnes peuvent garder un secret si deux d'entre elles sont mortes. :Benjamin Franklin L'humanité se divise en trois catégories : ceux qui ne peuvent pas bouger, ceux qui peuvent bouger, et ceux qui bougent : Benjamin Franklin Le hasard, c'est le déguisement que prend Dieu pour voyager incognito: Albert Einstein bon je m'arrête là au risque de me faire buter
	00

09/08/2011, 12h09	#5
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	En fait, ça permet de n'avoir qu'un seul fichier CSS, même pour les versions antérieures de IE. Il ne te reste plus qu'à cibler dans ton CSS .ie6 #tonid {} pour avoir un style spécifique à IE6.
	20

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email