Comment cibler IE7 et IE8 avec des CSS valides?

je recommande d'examiner les commentaires conditionnels et de faire une feuille séparée pour les IEs que vous avez des problèmes avec.

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

la réponse à votre question

une façon entièrement valide de sélectionner tous les navigateurs sauf IE8 et ci-dessous est d'utiliser la pseudo-classe :not() . Étant donné que les versions 8 et suivantes D'IE ne prennent pas en charge :not() , les sélecteurs qui la contiennent sont ignorés. Cela signifie que vous pouvez faire quelque chose comme ceci:

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

C'est encore css tout à fait VALIDE, mais il ne cause IE8 et inférieur à rendre différents styles (et aussi Opéra<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, sauf pour certains qui semblent tout à fait redondants, comme ceux qui sélectionnent pour seulement 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 et sources:

• http://css-tricks.com/snippets/css/browser-specific-hacks/
• https://en.wikipedia.org/wiki/CSS_hack
• http://www.webdevout.net/css-hacks
• MDN: :first-child ; :root ; :first-of-type ; :not() ; :any() ; * ~ *

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 {
    .ie67 {property:value;}
}

ou

.ie67 { *property:value;}

ou

.ie67 { #property:value;}

IE 6, 7 et 8

@media "151970920"screen\,screen {
    .ie678 {property:value;}
}

IE 8

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

ou

@media "151990920"screen {
    .ie8 {property:value;}
}

IE 8 Mode Standard seulement

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

IE 8,9 et 10

@media screen"1519110920" {
    .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 only

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

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 ci-dessus..)

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

---

alternatives Javascript

Modernizr

Modernizr fonctionne rapidement sur la charge de page pour détecter les caractéristiques; Il puis crée un objet JavaScript avec les résultats, et ajoute des classes élément html

agent utilisateur sélection

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':'');

Adds(E. g) l'élément html ci-dessous:

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'

permettant des sélecteurs CSS très ciblés, p.ex.:

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 corrigez tout problème que vous identifiez. Soutien progressif amélioration et dégradation gracieuse . Dans cette perspective, il s'agit d'un scénario de "monde idéal" qui n'est pas toujours réalisable dans un environnement de production en tant que tel - ce qui précède devrait contribuer à offrir de bonnes options.

---

Attribution / Lecture Essentielle

• Keith Clarke
• Paul Irish
• "15191130920 Web" Pieuse
• La Clé

Eh bien, vous n'avez pas vraiment à vous soucier du code IE7 ne fonctionne pas dans IE8 parce que IE8 a le mode de compatibilité (il peut rendre les pages les mêmes que IE7). Mais si vous voulez toujours cibler différentes versions D'IE, une façon qui a été fait depuis un certain temps maintenant est d'utiliser commentaires conditionnels ou commencer votre règle css avec un * pour cibler IE7 et moins . Ou vous pouvez prêter attention à l'agent utilisateur sur les serveurs et de mettre en place un fichier CSS différent basé sur cette information.

le problème réel n'est pas IE8, mais les hacks que vous utilisez pour les versions précédentes D'IE.

IE8 est assez proche d'être conforme aux normes, donc vous ne devriez pas avoir besoin de hacks du tout pour cela, peut-être seulement quelques retouches. Le problème est que si vous utilisez des hacks pour IE6 et IE7, vous devez vous assurer qu'ils ne s'appliquent qu'à ces versions et pas à IE8.

j'ai rendu le site Web de notre entreprise compatible avec IE8 il y a un certain temps. La seule chose que j'ai en fait changé était d'ajouter la balise meta qui dit à IE que les 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 classe CSS .ie<version> dans votre feuille de style comme décrit par potench.

(a utilisé la fonction detectIE de Mario dans vérifier si L'utilisateur utilise IE avec jQuery )

l'avantage d'avoir lte-ie8 et lt-ie8 etc est qu'il vous peut cibler tous les navigateurs inférieur ou égal à IE9, qui est IE7 - IE9.