Como segmentar apenas o Internet Explorer 10 para determinadas situações, como CSS específico do Internet Explorer ou código JavaScript específico do Internet Explorer?


160

Como segmentar apenas o Internet Explorer 10 para determinadas situações, como CSS específico do Internet Explorer ou código JavaScript específico do Internet Explorer?

Eu tentei isso, mas não funciona:

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

O Internet Explorer 10 ignora os comentários condicionais e usa o em <html lang="en" class="no-js">vez de <html class="no-js ie10" lang="en">.


8
Eu acho que uma pergunta melhor seria: Como faço para que esse CSS tenha a mesma aparência nos dois navegadores?
BentOnCoding 28/03

12
O IE10 PP4 ainda suporta a @cc_ondeclaração . Assim, para detectar se IE10 é suportado ou não, você pode usar o seguinte código: <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->. (Eu postei isso como um comentário, uma vez que o IE ainda está em desenvolvimento, por isso não se sabe se a versão final suporta esse recurso também)
Rob W

15
@RobW - Seu código de exemplo estará errado quando ie11 for lançado. Versão aprimorada: <script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>Melhorias: não precisa de comentários condicionais; funciona mesmo se o comentário remover a compressão / processamento; nenhuma classe adicionada para ie11; funcionará com o ie11 rodando no modo de compatibilidade ie10; não precisa de uma tag de script independente (pode ser adicionada apenas a outro javascript na cabeça).
amigos estão dizendo sobre robocat

2
Exemplo do trecho de código acima: jsbin.com/upofoq/2
robocat 6/12/12

8
Uma solução mais genérica é: if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';- que resolve 90% dos problemas (algumas vezes, os modos de compatibilidade falham; nesse caso, você precisa de outro nível de correção além disso).
robocat

Respostas:


65

Talvez você possa tentar algum jQuery como este:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

Para usar esse método, você deve incluir a biblioteca jQuery Migrate, porque essa função foi removida da biblioteca principal do jQuery.

Funcionou muito bem para mim. Mas certamente não há substituto para comentários condicionais!


3
Não tenho a certeza quanto a vocês, mas eu preciso usar == '10.0'para que ele funcione
lulalala

112
Aviso: jQuery.browsernão está mais disponível na versão atual do jQuery (1.9) sem um plug-in. blog.jquery.com/2013/01/15/...
dave1010

2
Eu recomendaria: if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }Observe a versão <10 para detectar versões mais antigas do IE. IE10 e acima funciona bem com todas as minhas CSS3, HTML5, jQuery, etc.
Dan Mantyla

1
@dan, porque os comentários condicionais funcionam em todos os navegadores do IE com menos de 10 usá-los, em vez de sobrecarregar seu JS em todos os navegadores. Basta dizer <! - [if lte IE 9]> e você poderá segmentar todas as versões do IE menores que 10. Não é necessário JS.
precisa saber é o seguinte

1
@ Marc-AndréLafortune levanta um bom ponto. Como regra geral, você sempre deve usar o operador === e não ==. Ao escrever javascript, você precisa estar atento a isso. stackoverflow.com/questions/359494/…
Stewart:

132

Eu não usaria JavaScript navigator.userAgentou $ .browser (que usa navigator.userAgent), pois pode ser falsificado.

Para segmentar o Internet Explorer 9, 10 e 11 (Nota: também o Chrome mais recente):

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

Para direcionar o Internet Explorer 10:

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

Para direcionar o Navegador de Borda:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

Fontes:


Isso é muito legal. Mas quão preocupados deveríamos estar ao testar vários modos de documento em relação aos modos de navegador no IE? Em que situações podemos esperar que os usuários online usem um modo de documento diferente do modo atual do navegador?
klewis

as pessoas geralmente não mudam o modo de documento. Eles podem, mas não encontrei nenhum site que exigisse que o usuário alterasse o modo de documento. Se você estiver usando o DOCTYPE correto, isso não será um problema.
Roni

3
Você é meu herói! Apenas uma nota, Isto também fixa algumas coisas desarrumada no IE11
locrizak

8
Isso afeta também IE11 - por isso, se você está procurando solução para alvo apenas IE9 / 10 este não vai funcionar :-(
Lukasz Lenart

1
O que você quer dizer com "todos eles estão detectando o navegador via navigator.userAgent"? A compilação condicional é um recurso interno do tempo de execução JScript, que não pode ser falsificado por meio da sequência de agente do usuário.
BoltClock

111

Encontrei uma solução neste site em que alguém tinha um comentário valioso :

A solução é:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

isto

  • não precisa de comentários condicionais;
  • funciona mesmo se o comentário remover a compressão / processamento;
  • nenhuma classe ie10 adicionada no Internet Explorer 11;
  • maior probabilidade de funcionar como planejado com o Internet Explorer 11 em execução no modo de compatibilidade com o Internet Explorer 10;
  • não precisa de uma tag de script independente (pode ser adicionada apenas a outro código JavaScript na cabeça).
  • não precisa do jQuery para testar

3
@ dave1010 Os agentes do utilizador podem ser facilmente falsificados. Comentários condicionais são suportados apenas pelo mecanismo JScript, disponível apenas no IE4 + (incluindo 10).
22613 Rob Rob W

2
@ dave1010 Escrever um analisador funcional que faça o que você está descrevendo é difícil e extremamente improvável. Qualquer pessoa que crie e instale deliberadamente essa extensão provavelmente tenciona "agir como" o IE (talvez para fins de teste automatizado em ambientes não Windows). 100% de confiança nunca é garantida nos navegadores, mas você pode se aproximar o suficiente. Comentários condicionais são uma maneira altamente confiável de detectar o mecanismo JScript, que é usado pelo IE.
22613 Robert W

3
única desvantagem que vejo é que ele requer js, que condicionais didnt
James Westgate

4
Essa deve ser a resposta principal e o requisito de JS deve ser discutível para os usuários do IE10 - se o JS estiver desativado, provavelmente será apenas o complemento NoScript. Acho que precisamos de mais educação pública sobre a pura estupidez do NoScript (em oposição a complementos sãos, como AdBlock ou Ghostery).
iono

8
Eu sugiro usar o código alternativo fornecido pelo autor: if (/*@cc_on!@*/false && document.documentMode === 10) {}que contorna os avisos de avaliação em programas de fiapos.
ajbeaven

62

O Internet Explorer 10 não tenta mais ler comentários condicionais. Isso significa que ele tratará os comentários condicionais, como qualquer outro navegador faria: como comentários regulares em HTML, que devem ser totalmente ignorados. Observando a marcação dada na pergunta como exemplo, todos os navegadores, incluindo o IE10, ignoram as partes dos comentários, destacadas em cinza, por inteiro. O padrão HTML5 não faz menção à sintaxe condicional de comentários, e é exatamente por isso que eles optaram por deixar de apoiá-lo no IE10.

Observe, no entanto, que a compilação condicional no JScript ainda é suportada, conforme mostrado nos comentários e nas respostas mais recentes. Também não vai desaparecer no lançamento final, ao contráriojQuery.browser . E, é claro, escusado será dizer que o cheiro de agente de usuário permanece tão frágil como sempre e nunca deve ser usado sob nenhuma circunstância.

Se você realmente precisa direcionar o IE10, use a compilação condicional que ainda poderá ser suportada no futuro próximo, ou - se você puder ajudá-lo - use uma biblioteca de detecção de recursos como o Modernizr em vez de (ou em conjunto com) a detecção do navegador. A menos que o seu caso de uso exija noscript ou acomode o IE10 no lado do servidor, a detecção do agente do usuário será mais uma dor de cabeça do que uma opção viável.

Parece bastante complicado, mas lembre-se de que, como um navegador moderno, é altamente compatível com os padrões da Web atuais 1 , supondo que você tenha escrito código interoperável que seja altamente compatível com os padrões, não será necessário reservar um código especial para o IE10, a menos que seja absolutamente necessário, ou seja, é parecido com outros navegadores em termos de comportamento e renderização. 2 E parece absurdo, dada a história do IE, mas quantas vezes você esperava que o Firefox ou o Chrome se comportassem da mesma maneira, apenas para serem desanimados?

Se você faz tem uma razão legítima para ser alvo de determinados navegadores, por todos os meios farejar-los com as outras ferramentas dadas a você. Só estou dizendo que você vai ser muito mais pressionado a encontrar uma razão hoje do que costumava ser, e na verdade não é algo em que você possa confiar.


1 Não apenas o IE10, mas o IE9 e até o IE8, que lidam com a maior parte do padrão CSS2.1 maduro muito melhor do que o Chrome, simplesmente porque o IE8 estava tão focado na conformidade com os padrões (quando o CSS2.1 já era bastante estável, com apenas pequenas diferenças). da recomendação de hoje), enquanto o Chrome parece ser pouco mais que uma demonstração tecnológica polida de pseudo-padrões de ponta.

2 E posso ser tendencioso quando digo isso, mas com toda a certeza. Se o seu código funcionar em outros navegadores, mas não no IE, as chances de haver um problema com seu próprio código, em vez do IE10, são muito melhores em comparação com, digamos, há 3 anos, com versões anteriores do IE. Mais uma vez, posso ser tendencioso, mas vamos ser honestos: você também não é? Basta olhar para seus comentários.


20
Chhhh, sim, o IE10 ainda está muito atrás do webkit e da lagartixa. Eu tenho algum CSS com uma aparência agradável no webkit e hediondo no IE10. Se não conseguir encontrar uma maneira de aplicar seletivamente os estilos, terei que abandonar esses estilos. :(
trusktr

2
Vale ressaltar que os comentários condicionais foram removidos no IE10, pois agora ele possui um analisador HTML5. Comentários condicionais não são válidos de acordo com o algoritmo de análise HTML5. Consulte a seção de recursos herdados do blogs.msdn.com/b/ie/archive/2011/07/06/…
David Storey

3
@trusktr Se você codificar bem, ele ficará bem em todos os navegadores mais recentes.
Klevis Miho

10
@KlevisMiho Não é verdade, o Chrome e o Firefox suportam recursos que o IE não possui, mesmo que sejam bem codificados. Se você quer dizer "usar apenas recursos comuns", isso não é exatamente o mesmo que "código bem".
trusktr

5
@Dan Mantyla: Nesse caso,<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
BoltClock


11

Ambas as soluções postadas aqui (com pequenas modificações) funcionam:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

ou

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

Você inclui uma das linhas acima dentro da tag head da sua página html antes do seu link css. E então, no arquivo css, você especifica seus estilos tendo a classe "ie10" como pai:

.ie10 .myclass1 { }

E voilà! - outros navegadores permanecem intactos. E você não precisa de jQuery. Você pode ver o exemplo de como eu o implementei aqui: http://kardash.net .


11

Eu escrevi um pequeno plugin de baunilha JavaScript chamado Layout Engine , que permite que você detecte o IE 10 (e todos os outros navegadores), de uma maneira simples que não pode ser falsificada, ao contrário do sniffing do agente do usuário.

Ele adiciona o nome do mecanismo de renderização como uma classe na tag html e retorna um objeto JavaScript que contém o fornecedor e a versão (quando apropriado)

Confira minha postagem no blog: http://mattstow.com/layout-engine.html e obtenha o código no GitHub: https://github.com/stowball/Layout-Engine


7

Eu uso esse script - ele é antiquado, mas eficaz no direcionamento de uma folha de estilo ou arquivo JavaScript separado para o Internet Explorer 10, incluída apenas se o navegador for o Internet Explorer 10, da mesma maneira que você faria com comentários condicionais. Nenhum jQuery ou outro plugin é necessário.

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >

2
Legal. Você poderia adicionar um pouco de informação sobre o que são essas declarações @?
trusktr

6

Você pode usar o PHP para adicionar uma folha de estilo para o IE 10

Gostar:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}

2
Não faz sentido para cima a cadeia como stripos não diferencia maiúsculas de minúsculas;)
mgutt

2
Eu sempre tento fazer isso, mas lembre-se de que ele quebra quando existe um CDN / cache / proxy no front-end.
Johan

5

Se você precisar fazer isso, poderá verificar a sequência do agente do usuário em JavaScript:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

Como outras pessoas mencionaram, eu sempre recomendo a detecção de recursos.


Para que servem o `` !! `'?
Francisco Corrales Morales

4
String.match()retornará uma matriz para uma correspondência ou nulo, se não o fizer. !(String.match())faz com que retorne falso para uma correspondência ou verdadeiro para nenhuma correspondência. !(!(String.match()))faz com que retorne verdadeiro para uma correspondência ou falso para nenhuma correspondência. !(!(something))ou apenas, !!somethingportanto, converte qualquer coisa em um booleano verdadeiro / falso. stackoverflow.com/questions/784929/…
dave1010

@FranciscoCorralesMorales Oh, o número de vezes que me perguntaram isso quando meu código está sendo examinado. :) Como uma expansão do grande comentário de dave1010, ele pode ser usado para coagir valores 'verdade' ou 'falsidade' a um booleanvalor intrínseco , por exemplo var name = 'me', hasName = !!name;.
WynandB

4

Se você deseja segmentar o IE 10 com Vanilla JavaScript, tente a detecção de propriedade CSS:

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

Propriedades CSS

Em vez de msTouchActionvocê também pode usar uma dessas propriedades CSS, porque elas estão atualmente disponíveis apenas no IE 10. Mas isso pode mudar no futuro.

  • msTouchAction
  • msWrapFlow
  • msWrapMargin
  • msWrapThrough
  • msScrollLimit
  • msScrollLimitXMin
  • msScrollLimitYMin
  • msScrollLimitXMax
  • msScrollLimitYMax
  • msFlexbox
  • msFlex
  • msFlexOrder

Página de teste

Reuni uma página de teste com todas as propriedades no CodePen.


3

clipBoardData é uma função que está disponível apenas no IE, portanto, se você estiver buscando segmentar todas as versões do IE, poderá usar

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>

-1: mas e as versões? como você sabe qual é a versão?
Francisco Corrales Morales

O navegador Edge também não possui "window.clipboardData"
AFD

@ AFD Esta pergunta é sobre o IE, não o Edge.
TylerH

3

CSS para IE10 + e IE9

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

@media screen\0 {
    /* IE8,9,10 styles*/
}

1

Você pode usar a detecção de recursos para verificar se o navegador é IE10 ou superior:

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

Verdadeiro apenas se> IE9



1

Com JavaScript:

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

Trabalho para todo o IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

Então mude /Trident/gpor /Trident/x.0/gonde x = 4, 5, 6ou 7(ou talvez 8para o futuro).


1

Eu só queria adicionar minha versão da detecção do IE. Ele é baseado em um snippet encontrado em http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ e foi estendido para suportar também ie10 e ie11. Ele detecta o IE 5 a 11.

Tudo que você precisa fazer é adicioná-lo em algum lugar e, em seguida, você sempre pode verificar com uma condição simples. O var global isIEserá indefinido se não for um IE ou, caso contrário, será o número da versão. Assim, você pode adicionar facilmente coisas como essas if (isIE && isIE < 10).

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());

0

Para mim, o código a seguir funciona bem, todos os comentários condicionais estão funcionando em todas as versões do IE:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->

<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

Estou no Windows 8.1, não tenho certeza se está relacionado à atualização ie11 ...


1
O (gt IE 11)bit é completamente desnecessário. Você também pode simplesmente fazê-lo <!--[if !(IE)]<!-->.
BoltClock

BoltClock se (gt IE 11) for deixado de fora e o navegador do usuário for IE 12 (quando for lançado), não haveria elemento html definido.
Leonardo Gonzalez

0

Aqui está como eu faço o CSS personalizado para o Internet Explorer:

No meu arquivo JavaScript:

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

E então, no meu arquivo CSS, você define cada estilo diferente:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}


0

use babel ou typescript para converter este código js

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};


Olá Aliaksandr, obrigado pela ideia! Não sei por que alguém votou mal, mas eu votei porque a resposta é pelo menos uma dica útil. Quem recusar, por que não ajudar um novo usuário com conselhos úteis?
trusktr

-2

Esta resposta me levou 90% do caminho até lá. Encontrei o resto da minha resposta no site da Microsoft aqui .

O código abaixo é o que eu estou usando para direcionar todos, ou seja, adicionando uma classe .ie ao <html>

Use o jQuery (que descontinuou o .browser em favor dos agentes de usuário no 1.9+, consulte http://api.jquery.com/jQuery.browser/ ) para adicionar uma classe .ie:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});

"que descontinuou o .browser a favor dos agentes do usuário em 1.9+" Não diz "a favor dos agentes do usuário" - o que quer que isso signifique - diz a favor da detecção de recursos .
BoltClock

-2

Se você não se importa de segmentar navegadores IE10 e superiores e não IE, use este comentário condicional:

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

Derivado de http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither


1
Eu não fiz -1 a sua resposta, mas a ligação parece um pouco outd- oito ed. Também é importante notar que o OP destinava-se apenas ao IE10 e IE10. Independentemente disso, seu snippet de código não funcionará no IE10 e acima ou em qualquer outro navegador que não seja o IE, porque comentários condicionais são suportados apenas no IE5 até o IE9.
WynandB

-2

Se você realmente precisar, pode fazer com que os comentários condicionais funcionem adicionando a seguinte linha a <head>:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Fonte


-4

solução moderna para css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.