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

**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

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

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...

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

CSS

Discussions similaires

Partager

Partager