web-dev-qa-db-fra.com

Comment cibler IE7 et IE8 avec CSS valide?

Je veux cibler IE7 et IE8 avec CSS compatible W3C. Parfois, corriger CSS pour une version ne corrige pas pour l’autre. Comment puis-je atteindre cet objectif?

cssinternet-explorerinternet-explorer-8web-standards
65
Wasim Shaikh

Cible explicite IE versions sans piratage utilisant HTML et CSS

Utilisez cette approche si vous ne voulez pas de hacks dans vos CSS. Ajouter une classe unique au navigateur au <html> élément afin que vous puissiez sélectionner en fonction du navigateur ultérieurement.

Exemple

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

Ensuite, dans votre CSS, vous pouvez accéder très strictement à votre navigateur cible.

Exemple

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

Pour plus d'informations, consultez http://html5boilerplate.com/

Cible IE versions avec CSS "Hacks"

Plus précisément, voici les hacks qui vous permettent de cibler les versions IE.

Utilisez "\ 9" pour cibler IE8 et les versions antérieures.
Utilisez "*" pour cibler IE7 et les versions antérieures.
Utilisez "_" pour cibler IE6.

Exemple:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

Mise à jour: Cible IE10

IE10 ne reconnaît pas les instructions conditionnelles, vous pouvez donc l'utiliser pour appliquer une classe "ie10" à la classe <html> élément

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>
164
potench

Je recommanderais d'examiner les commentaires conditionnels et de créer une feuille séparée pour les EI avec lesquels vous rencontrez des problèmes.

 <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css" />
 <![endif]-->
21
scragar

La réponse à votre question

Une méthode tout à fait valide pour sélectionner tous les navigateurs, à l'exception de IE8 et des versions antérieures, consiste à utiliser la pseudo-classe :not(). Depuis IE les versions 8 et antérieures ne prennent pas en charge :not()], les sélecteurs qui en contiennent sont ignorés. Cela signifie que vous pouvez effectuer les opérations suivantes:

p {color:red;}
p:not([ie8min]) {color:blue;}

Ceci est encore complètement valide CSS, mais IE8 et les versions antérieures rendent différents styles (et aussi Opera <9.5 et Safari <3.2).

Autres astuces

Voici une liste de tous les sélecteurs spécifiques au navigateur CSS complètement valides que j'ai pu trouver, , à l'exception de pour certains qui semblent assez redondants, comme ceux qui ne sont sélectionnés que pour 1 type de navigateur ancien ( 1 , 2 ):

/******  First the hacks that target certain specific browsers  ******/
* html p                        {color:red;} /* IE 6- */
*+html p                        {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    p                           {color:red;}
}                                            /* Chrome, Safari 3+ */
p, body:-moz-any-link           {color:red;} /* Firefox 1+ */
:-webkit-any(html) p            {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p               {color:red;} /* Firefox 4+ */

/****** And then the hacks that target all but certain browsers ******/
html> body p                  {color:green;} /* not: IE<7 */
head~body p                   {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p            {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p               {color:green;} /* not: IE<8 */
body:first-of-type p          {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p                       {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p      {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */

Crédits & sources:

9
Joeytje50

Pour une liste plus complète à partir de 2015:

IE 6

* html .ie6 {property:value;}

ou

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

ou

*:first-child+html .ie7 {property:value;}

IE 6 et 7

@media screen\9 {
    .ie67 {property:value;}
}

ou

.ie67 { *property:value;}

ou

.ie67 { #property:value;}

IE 6, 7 et 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

ou

@media \0screen {
    .ie8 {property:value;}
}

IE 8 en mode standard uniquement

.ie8 { property /*\**/: value\9 }

IE 8,9 et 10

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9 seulement

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 et plus

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 et 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

IE 10 seulement

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 et plus

_:-ms-lang(x), .ie10up { property:value; }

ou

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (et plus ..)

_:-ms-fullscreen, :root .ie11up { property:value; }

Alternatives javascript

Modernisation

Modernizr s'exécute rapidement au chargement de la page pour détecter les fonctionnalités; il crée ensuite un objet JavaScript avec les résultats et ajoute des classes à l'élément html

Sélection de l'agent utilisateur

Le Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Ajoute (par exemple) l'élément ci-dessous à l'élément html:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Autoriser des sélecteurs CSS très ciblés, par exemple:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Note de bas de page

Si possible, évitez le ciblage par navigateur. Identifiez et résolvez tout problème que vous identifiez. Soutien amélioration progressive et dégradation progressive . En gardant cela à l'esprit, il s'agit d'un scénario de "monde idéal" qui ne peut pas toujours être obtenu dans un environnement de production. En tant que tel, ce qui précède devrait permettre de fournir quelques bonnes options.

Attribution/Lecture essentielle

7
SW4

Eh bien, vous n'avez pas vraiment à vous soucier du code IE7 qui ne fonctionne pas dans IE8 car IE8 possède un mode de compatibilité (il peut rendre les pages de la même manière que IE7). Mais si vous voulez toujours cibler différentes versions d’IE, vous pouvez utiliser commentaires conditionnels ou commencez votre règle css par un * pour cibler IE7 et ci-dessous . Vous pouvez également faire attention à l'agent utilisateur sur les serveurs et créer un fichier CSS différent en fonction de ces informations.

4
Bjorn Tipling

Le problème réel n’est pas IE8, mais les hacks que vous utilisez pour les versions antérieures d’IE.

IE8 est assez proche de la conformité aux normes, vous ne devriez donc avoir besoin d'aucun piratage, peut-être seulement de quelques ajustements. Le problème est que vous utilisez des hacks pour IE6 et IE7; vous devrez vous assurer qu'elles s'appliquent uniquement à ces versions et non à IE8.

J'ai rendu le site Web de notre société compatible avec IE8 il y a quelque temps. La seule chose que j'ai réellement modifiée a été l'ajout de la balise meta qui indique à IE que les pages sont conformes à IE8 ...

4
Guffa

Je l'ai fait en utilisant Javascript. J'ajoute trois classes css à l'élément html:

ie<version>
lte-ie<version>
lt-ie<version + 1>

Donc pour IE7, il ajoute ie7, lte-ie7 ..., lt-ie8 ...

Voici le code javascript:

(function () {
    function getIEVersion() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf('MSIE ');
        var trident = ua.indexOf('Trident/');

        if (msie > 0) {
            // IE 10 or older => return version number
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
        } else if (trident > 0) {
            // IE 11 (or newer) => return version number
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
        } else {
            return NaN;
        }
    };

    var ieVersion = getIEVersion();

    if (!isNaN(ieVersion)) { // if it is IE
        var minVersion = 6;
        var maxVersion = 13; // adjust this appropriately

        if (ieVersion >= minVersion && ieVersion <= maxVersion) {
            var htmlElem = document.getElementsByTagName('html').item(0);

            var addHtmlClass = function (className) { // define function to add class to 'html' element
                htmlElem.className += ' ' + className;
            };

            addHtmlClass('ie' + ieVersion); // add current version
            addHtmlClass('lte-ie' + ieVersion);

            if (ieVersion < maxVersion) {
                for (var i = ieVersion + 1; i <= maxVersion; ++i) {
                    addHtmlClass('lte-ie' + i);
                    addHtmlClass('lt-ie' + i);
                }
            }
        }
    }
})();

Ensuite, vous utilisez le .ie<version> classe css dans votre feuille de style, comme décrit par potench.

(Utilise la fonction detectIE de Mario dans vérifie si l'utilisateur utilise IE avec jQuery )

L'avantage d'avoir lte-ie8 et lt-ie8, etc., c'est que vous pouvez cibler tous les navigateurs inférieurs ou égaux à IE9, c'est-à-dire IE7 - IE9.

1
Tahir Hassan