Como segmentar apenas o IE (qualquer versão) em uma folha de estilo?

195

Eu tenho um projeto herdado e há lugares onde é uma bagunça total. Este é um deles. Eu preciso segmentar apenas o IE (qualquer versão).

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

Para ficar claro: dentro da folha de estilo incorporada e sem adicionar IDs ou classes às tags no html, preciso aplicar o estilo de borda somente se o usuário estiver usando o IE. Como posso fazer isso?

Edit: encontrou uma solução para o Firefox, editando a pergunta para refletir isso.

MetalPhoenix
fonte
Sua pergunta é um pouco confusa. Está se referindo a prefixos de fornecedor para propriedades CSS ou você está se referindo a identificar o navegador do usuário através UA sniffing e, em seguida, aplicar a folha de estilo somente se ele corresponde ...?
War10ck
Para Fireofox: stackoverflow.com/questions/952861/…
nikoskip
Para direcionar o IE, você precisa modificar seu arquivo HTML e adicionar comentários condicionais. Para o IE10, você também precisará de algum Javascript, pois ele vem com 0 suporte para comentários condicionais. EDIT: existem alguns hacks CSS para direcionar algumas versões do IE, mas esse também é o problema - esses são hacks.
Ramiz Wachtler
1
possível duplicata Aplicar estilo SOMENTE no IE
MatthewG
1
Se você precisar de uma solução dentro do seu CSS, só consigo pensar em JavaScript. Encontrei este rafael.adm.br/css_browser_selector, mas está um pouco desatualizado.
Nikoskip

Respostas:

428

Internet Explorer 9 e inferior: você pode usar comentários condicionais para carregar uma folha de estilo específica do IE para qualquer versão (ou combinação de versões) que você deseje segmentar especificamente. Como abaixo, usando a folha de estilo externa.

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

No entanto, a partir da versão 10, comentários condicionais não são mais suportados no IE.

Internet Explorer 10 e 11: crie uma consulta de mídia usando -ms-high-contrast, na qual você coloca seus estilos CSS específicos do IE 10 e 11. Como -ms-high-contrast é específico da Microsoft (e disponível apenas no IE 10+), ele será analisado apenas no Internet Explorer 10 e superior.

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

Microsoft Edge 12: pode usar a regra @supports Aqui está um link com todas as informações sobre esta regra

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

Detecção de regra inline IE8

Eu tenho mais 1 opção, mas é apenas detectar o IE8 e a versão abaixo.

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

Como você especificou para a folha de estilo incorporada. Eu acho que você precisa usar a consulta de mídia e o comentário da condição para a versão abaixo.

Jay Patel
fonte
14
Bom o suficiente, eu testei que essa correção não afeta o navegador Edge, pensou alguém da JIC.
J4v1 28/01
também precisa @supports (-ms-acelerador: auto) para borda veja abaixo
Phyllis Sutherland
5
Para Edge, usando @supports (-ms-ime-align: auto) em vez de obras -ms-acelerador para mim
SeventhSteel
-ms-high-contrast:activeafeta o Edge se o sistema estiver usando o modo de alto contraste.
ShortFuse
A @supportssolução é realmente ótima: a detecção de recursos é o caminho a percorrer. Eu estava disposto a segmentar o Edge devido à sua falta de suporte width: max-content: @supports not (width: max-content)funciona perfeitamente e será bem ignorado quando o Edge acabar suportando. (Deve acontecer em 2019 Fall, uma vez que deve, em seguida, mudar para o Chromium para renderização.)
Frédéric
76

Aqui está uma coleção de consultas de mídia que permitirão que você faça isso para qualquer versão do Internet Explorer (do IE6 ao IE11 +), Firefox, Chrome e Safari (EDIT: também adicionou o 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 e 7

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

ou

.ie67 { *property: value; }

ou

.ie67 { #property: value; }

IE 6, 7 e 8

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

IE 8

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

ou

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

IE 8 Standards Mode

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

IE 8,9 e 10

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

Apenas IE 9

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

IE 9 e acima

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

IE 9 e 10

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

Apenas IE 10

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

IE 10 e acima

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

ou

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

IE 11 (e acima ..)

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

Firefox (qualquer versão)

@-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 e Safari, qualquer versão)

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

Google Chrome (mais de 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 a 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 ou superior)

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

Ópera (12+)

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

Opera (11 e inferior)

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

Para mais informações ou consultas adicionais à mídia, visite o site browserhacks.com e / ou confira esta postagem do blog que escrevi sobre este tópico.

Darkseal
fonte
1
Setembro de 2018 e você ainda salva vidas! Muito Obrigado. Mas e o Opera (versões antigas)? Apenas Webkit?
A garota de cabelo vermelho
1
@Thegirlwithredhair, existem alguns hackers seletores para direcionar o Opera> = 9, Opera <= 9 e Opera <= 11 aqui: browserhacks.com/#op
Darkseal
1
@Thegirlwithredhair Adicionei duas consultas de mídia que podem ser usadas para direcionar o Opera> = 12 e o Opera <= 11 à minha resposta acima.
Darkseal 29/09
12

Ao usar SASS, use os 2 a seguir @media queriespara segmentar o IE 6-10 e 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/

Editar

Também segmento versões posteriores do EDGE usando @support queries(adicione quantas você precisar)

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

minlare
fonte
4

Para segmentar o IE apenas em minhas folhas de estilo, uso este Sass Mixin:

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

Outra solução de trabalho para o estilo específico do IE é

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

E então seu seletor

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }
Sahib Khan
fonte
Infelizmente, pela postagem original, o html não pôde ser editado. Analisei um pouco a sua solução proposta e ela tem mérito se você puder planejar isso com antecedência.
MetalPhoenix
Você pode estar certo de acordo com a postagem, mas nenhuma das soluções funciona nas versões mais recentes do IE. O estilo condicional não é mais suportado.
Sahib Khan
E sim @supports é outra solução se você não pode editar html tag etc
Sahib Khan
@supports (-ms-ime-align: auto) {.myclass {/ * styles * /}}
Sahib Khan
0

Depois de ter problemas com sites que quebram no Edge ao usar o Modo de alto contraste, deparei-me com o seguinte trabalho de Jeff Clayton:

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

É uma consulta de mídia louca e estranha, mas essas são mais fáceis de usar no Sass:

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

Isso tem como alvo as versões do IE esperadas para o IE8.

Ou você pode usar:

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

Que tem como alvo o IE8-11, mas também aciona o FireFox 1.x (que, para o meu caso de uso, não importa).

No momento, estou testando com suporte de impressão, e isso parece estar funcionando bem:

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