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">
.
@cc_on
declaraçã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)<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).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).Respostas:
Talvez você possa tentar algum jQuery como este:
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!
fonte
== '10.0'
para que ele funcionejQuery.browser
não está mais disponível na versão atual do jQuery (1.9) sem um plug-in. blog.jquery.com/2013/01/15/...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.Eu não usaria JavaScript
navigator.userAgent
ou $ .browser (que usanavigator.userAgent
), pois pode ser falsificado.Para segmentar o Internet Explorer 9, 10 e 11 (Nota: também o Chrome mais recente):
Para direcionar o Internet Explorer 10:
Para direcionar o Navegador de Borda:
Fontes:
fonte
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.Encontrei uma solução neste site em que alguém tinha um comentário valioso :
A solução é:
isto
fonte
if (/*@cc_on!@*/false && document.documentMode === 10) {}
que contorna os avisos de avaliação em programas de fiapos.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ário
jQuery.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?
box-sizing
correção por anosSe 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.
fonte
<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
Um bom lugar para começar é a documentação de suporte aos padrões do IE .
Aqui está como direcionar o IE10 em JavaScript:
Aqui está como direcionar o IE10 em CSS:
Caso o IE11 precise ser filtrado ou redefinido via CSS, consulte outra pergunta: Como escrever um hack de CSS para o IE 11?
fonte
Ambas as soluções postadas aqui (com pequenas modificações) funcionam:
ou
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:
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 .
fonte
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
fonte
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.
fonte
Você pode usar o PHP para adicionar uma folha de estilo para o IE 10
Gostar:
fonte
Se você precisar fazer isso, poderá verificar a sequência do agente do usuário em JavaScript:
Como outras pessoas mencionaram, eu sempre recomendo a detecção de recursos.
fonte
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,!!something
portanto, converte qualquer coisa em um booleano verdadeiro / falso. stackoverflow.com/questions/784929/…boolean
valor intrínseco , por exemplovar name = 'me', hasName = !!name;
.Se você deseja segmentar o IE 10 com Vanilla JavaScript, tente a detecção de propriedade CSS:
Propriedades CSS
Em vez de
msTouchAction
você 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.Página de teste
Reuni uma página de teste com todas as propriedades no CodePen.
fonte
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
fonte
CSS para IE10 + e IE9
fonte
Você pode usar a detecção de recursos para verificar se o navegador é IE10 ou superior:
Verdadeiro apenas se> IE9
fonte
O Conditionizr (consulte a documentação) adicionará classes CSS do navegador ao seu elemento html, incluindo ie10.
fonte
Com JavaScript:
Trabalho para todo o IE.
Então mude
/Trident/g
por/Trident/x.0/g
ondex = 4, 5, 6
ou7
(ou talvez8
para o futuro).fonte
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
isIE
será 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 essasif (isIE && isIE < 10)
.fonte
Para mim, o código a seguir funciona bem, todos os comentários condicionais estão funcionando em todas as versões do IE:
Estou no Windows 8.1, não tenho certeza se está relacionado à atualização ie11 ...
fonte
(gt IE 11)
bit é completamente desnecessário. Você também pode simplesmente fazê-lo<!--[if !(IE)]<!-->
.Aqui está como eu faço o CSS personalizado para o Internet Explorer:
No meu arquivo JavaScript:
E então, no meu arquivo CSS, você define cada estilo diferente:
fonte
Confira http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/
fonte
use babel ou typescript para converter este código js
fonte
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:
fonte
Se você não se importa de segmentar navegadores IE10 e superiores e não IE, use este comentário condicional:
Derivado de http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
fonte
Se você realmente precisar, pode fazer com que os comentários condicionais funcionem adicionando a seguinte linha a
<head>
:Fonte
fonte
solução moderna para css
fonte