Masquer du contenu dans IE7 (et inférieur) uniquement

downlevel-revealed-conditional-comments.md

Masquer du contenu dans IE version 7 et inférieures uniquement

Tentative de découvrir quelle est la meilleure méthode pour masquer du contenu dans Internet Explorer versions 7 et inférieures en utilisant les downlevel-revealed conditional comments

La syntaxe proposée par Microsoft

Source : http://msdn.microsoft.com/en-us/library/ms537512.aspx

<![if gte IE 8]>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<![endif]>

Inconvénient :

• non valide en XHTML

Une syntaxe proposée par Yan Hixon le 12 avril 2004

Sources :

• Le billet en cache sur Internet Archive : http://web.archive.org/web/20111103030105/http://ln.hixie.ch/?start=1081798064&count=1
• La démo pour affichage conditionnel d'une animation flash, toujours en ligne : http://www.damowmow.com/playground/demos/flash/001.html
• Cette syntaxe a aussi été reprise par Laurent Denis sur son défunt blog, en cache aussi sur Internet Archive : http://web.archive.org/web/20111104002925/http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

<!--[if gte IE 8]> <-->
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!----> <![endif]-->

Inconvénient :

• laisse apparaître <--> dans la page sur les IE >= 8

Une autre syntaxe proposée par Lachlan Hunt le 8 avril 2005 sur la mailing-list du WHATWG

Sources :

• http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/
• http://web.archive.org/web/20070211195746/http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2005-April/003489.html

<!--[if gte IE 8]>-->
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--<![endif]-->

Inconvénient :

• laisse apparaître --> sur les IE >= 8

Une syntaxe documentée par css4design.com le 18 juillet 2006

Source : http://www.css4design.com/blog/commentaires-conditionnels-d-internet-explorer-vs-hacks-css

<!--[if gte IE 8]> <!-->
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--> <![endif]-->

Inconvénient :

• Non valide, comme indiqué par Jeff Starr dans ce commentaire

Syntaxe proposée par Jeff Starr le 18 juillet 2007

Source : http://perishablepress.com/press/2007/07/18/wrapping-your-head-around-downlevel-conditional-comments/

pour HTML

<!--[if gte IE 8]><![IGNORE[--><!--[IGNORE[]]-->
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--<![endif]-->

Inconvénient :

• lourd

pour XHTML

<!--[if gte IE 7]>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<![endif]-->
<!--[if !IE]><!-->
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--<![endif]-->

Inconvénient

• encore plus lourd, code doublé

Syntaxe proposée par Nicolas Hoizey le 18 mars 2009

Source :

• http://perishablepress.com/how-to-deal-with-ie-6-after-dropping-support/comment-page-4/#comment-70771
• syntaxe d'abord indiquée comme non valide par Jeff Starr, puis finalement validée

<!--[if gte IE 8]><!-->
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--<![endif]-->

[Bonus] Sans utilisation de commentaires conditionnels, une astuce par PPK

Source : http://www.quirksmode.org/css/condcom.html

<p>This is <comment>not</comment> Internet Explorer.</p>

Valable uniquement pour IE8 et moins.

À tester

cf http://blog.nursit.net/Adaptive-Images-Responsive-Web.html

<!--[if gte IE 8]-->
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--[endif]-->