¿Cómo apunto solo a Internet Explorer 10 para ciertas situaciones como CSS específico de Internet Explorer o código JavaScript específico de Internet Explorer?
Intenté esto, pero no funciona:
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Internet Explorer 10 ignora los comentarios condicionales y usa el en <html lang="en" class="no-js">
lugar de <html class="no-js ie10" lang="en">
.
@cc_on
declaración . Por lo tanto, para detectar si IE10 es compatible o no, puede utilizar el siguiente código:<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->
. (Publiqué esto como un comentario, ya que IE todavía está en desarrollo, por lo que no se sabe si la versión final también es compatible con esta característica)<script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>
Mejoras: no necesita comentarios condicionales; funciona incluso si el comentario elimina la compresión / procesamiento; no se agregó clase para ie11; funcionará con ie11 ejecutándose en modo de compatibilidad ie10; no necesita una etiqueta de script independiente (solo se puede agregar a otro javascript en la cabeza).if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';
- que resuelve el 90% de los problemas (a veces fallan los modos de compatibilidad, en cuyo caso necesita otro nivel de corrección además de eso).Respuestas:
Quizás puedas probar algunos jQuery como este:
Para utilizar este método, debe incluir la biblioteca jQuery Migrate porque esta función se eliminó de la biblioteca principal de jQuery.
Funcionó bastante bien para mí. ¡Pero seguramente no hay reemplazo para los comentarios condicionales!
fuente
== '10.0'
para que funcionejQuery.browser
ya no está disponible en la versión actual de jQuery (1.9) sin un complemento. blog.jquery.com/2013/01/15/…if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }
cuenta la versión <10 para detectar versiones anteriores de IE. IE10 y superior funciona bien con todos mis CSS3, HTML5, jquery, etc.No usaría JavaScript
navigator.userAgent
o $ .browser (que usanavigator.userAgent
) ya que puede ser falsificado.Para apuntar a Internet Explorer 9, 10 y 11 (Nota: también el último Chrome):
Para apuntar a Internet Explorer 10:
Para apuntar al navegador Edge:
Fuentes:
fuente
navigator.userAgent
"? La compilación condicional es una característica incorporada del tiempo de ejecución JScript, que no se puede falsificar a través de la cadena de agente de usuario.Encontré una solución en este sitio donde alguien tenía un comentario valioso :
La solucion es:
Eso
fuente
if (/*@cc_on!@*/false && document.documentMode === 10) {}
que evita las advertencias de evaluación en los programas de enlace.Internet Explorer 10 ya no intenta leer comentarios condicionales.Esto significa que tratará los comentarios condicionales como lo haría cualquier otro navegador: como comentarios HTML normales, destinados a ser ignorados por completo. Mirando el marcado dado en la pregunta como ejemplo, todos los navegadores, incluido IE10, ignorarán las porciones de comentarios, resaltadas en gris, por completo. El estándar HTML5 no menciona la sintaxis de comentarios condicionales, y esta es exactamente la razón por la que han decidido dejar de admitirlo en IE10.
Sin embargo, tenga en cuenta que la compilación condicional en JScript todavía es compatible, como se muestra en los comentarios, así como en las respuestas más recientes. No va a desaparecer en el lanzamiento final tampoco, a diferencia
jQuery.browser
. Y, por supuesto, no hace falta decir que el rastreo de agente de usuario sigue siendo tan frágil como siempre y nunca debe usarse bajo ninguna circunstancia.Si realmente debe apuntar a IE10, use una compilación condicional que aún pueda ver soporte en el futuro cercano o, si puede ayudarlo, use una biblioteca de detección de características como Modernizr en lugar de (o en conjunto con) la detección del navegador. A menos que su caso de uso requiera noscript o acomode IE10 en el lado del servidor, el rastreo del agente de usuario será más un dolor de cabeza que una opción viable.
Suena bastante engorroso, pero recuerde que, como un navegador moderno que cumple con los estándares web actuales 1 , suponiendo que haya escrito un código interoperable que cumpla con los estándares, no debería tener que reservar un código especial para IE10 a menos que sea absolutamente necesario, es decir, se supone que se parece a otros navegadores en términos de comportamiento y representación. 2 Y parece exagerado, dado el historial de IE, pero ¿cuántas veces ha esperado que Firefox o Chrome se comporten de la misma manera solo para encontrarse con consternación?
box-sizing
admitió sin prefijar durante añosSi tiene una razón legítima para apuntar a ciertos navegadores, hágalo por todos los medios con las otras herramientas que se le proporcionan. Solo digo que va a ser mucho más difícil encontrar una razón hoy de lo que solía ser, y realmente no es algo en lo que pueda confiar.
1 No solo IE10, sino IE9, e incluso IE8, que maneja la mayoría del estándar CSS2.1 maduro mucho mejor que Chrome, simplemente porque IE8 estaba tan enfocado en el cumplimiento de los estándares (en ese momento CSS2.1 ya era bastante estable con solo pequeñas diferencias) de la recomendación de hoy), mientras que Chrome parece ser poco más que una demostración tecnológica medio pulida de pseudo-estándares de vanguardia.
2 Y puedo estar sesgado cuando digo esto, pero es seguro como el infierno. Si su código funciona en otros navegadores pero no en IE, las probabilidades de que sea un problema con su propio código en lugar de IE10 son mucho mejores en comparación con, por ejemplo, hace 3 años, con versiones anteriores de IE. Una vez más, puedo ser parcial, pero seamos honestos: ¿tú tampoco? Solo mira tus comentarios.
fuente
<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
Un buen lugar para comenzar es la documentación de soporte de estándares de IE .
A continuación, le indicamos cómo orientar IE10 en JavaScript:
Aquí está cómo apuntar a IE10 en CSS:
En caso de que IE11 necesite ser filtrado o restablecido a través de CSS, vea otra pregunta: ¿Cómo escribir un hack CSS para IE 11?
fuente
Ambas soluciones publicadas aquí (con ligeras modificaciones) funcionan:
o
Incluya cualquiera de las líneas anteriores dentro de la etiqueta de encabezado de su página html antes de su enlace CSS. Y luego, en el archivo CSS, especifique sus estilos que tengan la clase "ie10" como padre:
¡Y voilá! - otros navegadores permanecen intactos. Y no necesitas jQuery. Puedes ver el ejemplo de cómo lo implementé aquí: http://kardash.net .
fuente
He escrito un pequeño complemento de JavaScript vainilla llamado Layout Engine , que le permite detectar IE 10 (y cualquier otro navegador), de una manera simple que no puede ser falsificada, a diferencia del rastreo de agentes de usuario.
Agrega el nombre del motor de representación como una clase en la etiqueta html y devuelve un objeto JavaScript que contiene el proveedor y la versión (cuando corresponda)
Mira la publicación de mi blog: http://mattstow.com/layout-engine.html y obtén el código en GitHub: https://github.com/stowball/Layout-Engine
fuente
Yo uso este script - que es anticuado, pero eficaz en la orientación de una separada de hojas de estilo de Internet Explorer 10 o un archivo JavaScript que se incluye sólo si el navegador es Internet Explorer 10, de la misma manera que lo haría con los comentarios condicionales. No se requiere jQuery u otro complemento.
fuente
Puede usar PHP para agregar una hoja de estilo para IE 10
Me gusta:
fuente
Si debe hacer esto, puede verificar la cadena del agente de usuario en JavaScript:
Como otras personas han mencionado, siempre recomendaría la detección de funciones.
fuente
String.match()
devolverá una matriz para una coincidencia o nula si no lo hace.!(String.match())
hace que devuelva falso para una coincidencia o verdadero para ninguna coincidencia.!(!(String.match()))
hace que regrese verdadero para una coincidencia o falso para ninguna coincidencia.!(!(something))
o simplemente,!!something
por lo tanto, convierte cualquier cosa en un booleano verdadero / falso. stackoverflow.com/questions/784929/…boolean
valor intrínseco , por ejemplovar name = 'me', hasName = !!name;
.Si desea apuntar a IE 10 con Vanilla JavaScript, puede probar la detección de propiedades CSS:
Propiedades CSS
En su lugar
msTouchAction
, también puede usar una de estas propiedades CSS, ya que actualmente solo están disponibles en IE 10. Pero esto podría cambiar en el futuro.Página de prueba
He reunido una página de prueba con todas las propiedades en CodePen.
fuente
clipBoardData es una función que solo está disponible en IE, por lo que si busca orientar todas las versiones de IE, puede usar
fuente
CSS para IE10 + e IE9
fuente
Puede usar la detección de funciones para ver si el navegador es IE10 o superior de esta manera:
Solo es cierto si> IE9
fuente
Conditionizr (ver documentos) agregará clases CSS del navegador a su elemento html, incluido ie10.
fuente
Con JavaScript:
Trabaja para todos los IE.
Así que cambie
/Trident/g
por/Trident/x.0/g
dóndex = 4, 5, 6
o7
(o tal vez8
para el futuro).fuente
Solo quería agregar mi versión de detección de IE. Se basa en un fragmento que se encuentra en http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ y se amplió para admitir también ie10 y ie11. Detecta IE 5 a 11.
Todo lo que necesita hacer es agregarlo en algún lugar y luego siempre puede verificar con una condición simple. La var global
isIE
no estará definida si no es un IE, o de lo contrario será el número de versión. Para que pueda agregar fácilmente cosas comoif (isIE && isIE < 10)
o por igual.fuente
Para mí, el siguiente código funciona bien, todos los comentarios condicionales funcionan en todas las versiones de IE:
Estoy en Windows 8.1, no estoy seguro si está relacionado con la actualización de ie11 ...
fuente
(gt IE 11)
bit es completamente innecesario. También puede hacerlo en su<!--[if !(IE)]<!-->
lugar.Así es como hago CSS personalizado para Internet Explorer:
En mi archivo JavaScript:
Y luego, en mi archivo CSS, defino cada estilo diferente:
fuente
Echa un vistazo a http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/
fuente
use babel o mecanografiado para convertir este código js
fuente
Esta respuesta me consiguió el 90% del camino. Encontré el resto de mi respuesta en el sitio de Microsoft aquí. .
El siguiente código es lo que estoy usando para apuntar a todos, es decir, agregando una clase .ie a
<html>
Use jQuery (que desaprobó .browser en favor de los agentes de usuario en 1.9+, consulte http://api.jquery.com/jQuery.browser/ ) para agregar una clase .ie:
fuente
Si no le importa la orientación de los navegadores IE10 y superiores y que no sean IE, puede usar este comentario condicional:
Derivado de http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
fuente
Si realmente tiene que hacerlo, puede hacer que los comentarios condicionales funcionen agregando la siguiente línea a
<head>
:Fuente
fuente
solución moderna para css
fuente