web-dev-qa-db-fra.com

Comment cibler seulement IE (toute version) dans une feuille de style?

J'ai un projet hérité et il y a des endroits où c'est un désordre total. C'est l'un d'eux. Je n'ai besoin de cibler que IE (toute version). 

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

Pour être clair: À l'intérieur la feuille de style incorporée et sans ajout 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: trouvé une solution pour Firefox, question de modification pour refléter cela.

css3
129
MetalPhoenix

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 spécifiquement cibler.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]-->

Toutefois, à compter 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 l'option -ms-high-contrast, dans laquelle vous placez vos styles CSS IE spécifiques 10 et 11. Etant donné que -ms-high-contrast est spécifique à Microsoft (et disponible uniquement 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ègle inline IE8} _

J'ai encore une option mais il ne détecte que la version IE8 et inférieure.

  /* 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.

298
Jay Patel

Voici une collection de requêtes multimédia qui vous permettront de le faire pour n’importe quelle version d’Internet Explorer (IE6 à IE11 +), Firefox, Chrome & 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;
    }
}

IE 8 Mode Normes

.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 plus

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

Firefox (toute version)

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

Firefox (Quantum Only/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 & Safari, toutes versions)

@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 plus d'informations ou pour 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 à ce sujet.

38
Darkseal

Lorsque j'utilise SASS, j'utilise les 2 @media queries suivants pour 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/

Modifier

Je cible également les versions ultérieures d'Edge à l'aide de @support queries (ajoutez-en autant que nécessaire).

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

11
minlare

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 folle et étrange dans les médias, mais ceux-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 IE versions attendues pour IE8.

Ou vous pouvez utiliser:

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

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

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

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

Une autre solution de travail pour le style spécifique de 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;
    }
0
Sahib Khan