Comment cibler IE7 et IE8 avec CSS valide?

https://stackoverflow.com/questions/814219

03-07-2019
|

Question

Je souhaite cibler IE7 et IE8 avec des CSS compatibles avec le W3C. Parfois, corriger CSS pour une version ne corrige pas pour l’autre. Comment puis-je y parvenir?

La solution

Cibler explicitement les versions d'Internet Explorer sans hacks à l'aide de HTML et de CSS

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

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/

Versions IE avec CSS & "Hacks &";

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

Utilisez " \ 9 " cibler IE8 et au-dessous.
Utilisez & Quot; * & Quot; cibler IE7 et au-dessous.
Utilisez & Quot; _ & Quot; 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: IE10 cible

IE10 ne reconnaît pas les instructions conditionnelles, vous pouvez donc l'utiliser pour appliquer un & "; ie10 &"; classe à l'é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>

Autres conseils

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

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 :not() pseudo-classe. Étant donné que les versions 8 et antérieures d'IE ne prennent pas en charge :first-child, les sélecteurs qui en contiennent sont ignorés. Cela signifie que vous pouvez faire quelque chose comme ceci:

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 (ainsi que 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, tels que ceux qui sélectionnent un seul 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 & amp; sources:

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

IE 6

* html .ie6 {property:value;}

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

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

IE 6 et 7

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

.ie67 { *property:value;}

.ie67 { #property:value;}

IE 6, 7 et 8

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

IE 8

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

@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 uniquement

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

IE 9 et supérieur

@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 uniquement

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

IE 10 et supérieur

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

@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

Modernizr

Modernizr s'exécute rapidement au chargement de la page pour détecter les fonctionnalités; alors crée un objet JavaScript avec les résultats et ajoute des classes au é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. Soutenez les amélioration progressive et dégradation gracieuse . C’est dans cet esprit qu’il s’agit d’un scénario "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 proposer de bonnes options.

Attribution / Lecture essentielle

Eh bien, vous n'avez pas vraiment à vous soucier du code IE7 qui ne fonctionne pas dans IE8 car IE8 a un mode de compatibilité (il peut rendre les pages de la même manière que IE7). Mais si vous souhaitez toujours cibler différentes versions d'IE, vous pouvez utiliser commentaires conditionnels ou commencer votre règle de css avec a * pour cibler IE7 et les versions antérieures . Vous pouvez également faire attention aux agents utilisateurs sur les serveurs et créer un fichier CSS différent en fonction de ces informations.

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 que 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 déjà rendu le site Web de notre société compatible avec IE8. La seule chose que j’ai réellement changée a été d’ajouter la balise META qui indique à IE que ses pages sont conformes à IE8 ...

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 la .ie<version> classe CSS dans votre feuille de style, comme décrit par potench.

(Fonction de Mario détectie de Mario utilisée dans vérifier si l'utilisateur utilise IE avec jQuery )

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

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow