Comment cibler uniquement IE (n'importe quelle version) dans une feuille de style?

J'ai un projet hérité et il y a des endroits où c'est un vrai bordel. C'est l'un d'eux. Je dois cibler uniquement IE (toute version).

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

Pour être clair: à l' intérieur de la feuille de style incorporée et sans ajouter d'ID ou de classes aux balises en html, je dois appliquer le style de bordure uniquement si l'utilisateur utilise IE. Comment puis-je faire ceci?

Edit: a trouvé une solution pour Firefox, éditant la question pour refléter cela.

Internet Explorer 9 et versions antérieures : vous pouvez utiliser des commentaires conditionnels pour charger une feuille de style spécifique à IE pour toute version (ou combinaison de versions) que vous souhaitez cibler spécifiquement, comme ci-dessous à l'aide d'une feuille de style externe.

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

Cependant, à partir de la version 10, les commentaires conditionnels ne sont plus pris en charge dans IE.

Internet Explorer 10 et 11: créez une requête multimédia à l'aide de -ms-high-contrast, dans laquelle vous placez vos styles CSS spécifiques à IE 10 et 11. Étant donné que -ms-high-contrast est spécifique à Microsoft (et uniquement disponible dans IE 10+), il ne sera analysé que dans Internet Explorer 10 et versions ultérieures.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12: peut utiliser la règle @supports Voici un lien avec toutes les informations sur cette règle

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Détection de règles en ligne IE8

J'ai 1 option de plus, mais elle ne détecte que IE8 et les versions inférieures.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

Comme vous l'avez spécifié pour la feuille de style intégrée. Je pense que vous devez utiliser la requête multimédia et le commentaire de condition pour la version ci-dessous.

Voici une collection de requêtes multimédias qui vous permettront de le faire pour n'importe quelle version d'Internet Explorer (d'IE6 à IE11 +), Firefox, Chrome et Safari (EDIT: également ajouté Opera).

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;
    }
}

Mode standard IE 8

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

IE 8,9 et 10

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

IE 9 uniquement

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

IE 9 et supérieur

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

IE 9 et 10

@media screen and (min-width:0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */
}

IE 10 uniquement

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

IE 10 et supérieur

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

ou

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

IE 11 (et supérieur ..)

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

Firefox (toute version)

@-moz-document url-prefix() {
    .ff {
        color: red;
    }
}

Firefox (Quantum uniquement / Stylo)

@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        /* Stylo */
        .ffStylo {
            property: value;
        }
    }
}

Firefox Legacy (pré-Stylo)

@-moz-document url-prefix() {
    @supports not (animation: calc(0s)) {
        /* Gecko */
        .ffGecko {
            property: value;
        }
    }
}

Webkit (Chrome et Safari, toute version)

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    property: value;
}

Google Chrome (29+)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome {
        property: value;
    }
}

Safari (7.1+)

_::-webkit-full-page-media, _:future, :root .safari_only {
    property: value;
}

Safari (de 6.1 à 10.0)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

Safari (10.1+)

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari10 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

Opéra (12+)

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .selector {
        .opera12 {
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    } 
}

Opera (11 et moins)

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .opera11 {
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}

Pour de plus amples informations ou des questions supplémentaires sur les médias, visitez le site Web browserhacks.com et / ou consultez cet article de blog que j'ai écrit sur ce sujet.

Lors de l'utilisation, SASSj'utilise les 2 suivants @media queriespour cibler IE 6-10 & EDGE.

@media screen\9
    @import ie_styles
@media screen\0
    @import ie_styles

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

Éditer

Je cible également les versions ultérieures d'EDGE en utilisant @support queries(ajoutez-en autant que vous en avez besoin)

@supports (-ms-ime-align:auto)
    @import ie_styles
@supports (-ms-accelerator:auto)
    @import ie_styles

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

Pour cibler IE uniquement dans mes feuilles de style, j'utilise ce mixage Sass:

@mixin ie-only {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

Une autre solution de travail pour un style spécifique à IE est

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

Et puis votre sélecteur

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }

Après avoir rencontré des problèmes avec des sites se brisant sur Edge lors de l'utilisation du mode contraste élevé, je suis tombé sur le travail suivant de Jeff Clayton:

https://browserstrangeness.github.io/css_hacks.html

C'est une requête médiatique folle et bizarre, mais celles-ci sont plus faciles à utiliser dans Sass:

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
   .selector { rule: value };
}

Cela cible les versions IE attendues pour IE8.

Ou vous pouvez utiliser:

@media screen\0 {
  .selector { rule: value };
}

Qui cible IE8-11, mais déclenche également FireFox 1.x (ce qui n'a pas d'importance pour mon cas d'utilisation).

En ce moment, je teste avec le support d'impression, et cela semble fonctionner correctement:

@media all\0 {
  .selector { rule: value };
}