gratis - enable javascript chrome
Cómo utilizar HTML5shiv correctamente... ¿cómo funciona en IE 9, Firefox, Safari? (5)
Pregunta
¿Cómo funciona html5shiv en IE9 cuando el comentario condicional usado
[if lt IE 9]es para IE8 e inferior Y hacen Safari 4.xy Firefox 3.x leen comentarios condicionales de IE ? De no ser así, ¿cómo podría html5shiv POSIBLEMENTE funcionar en estos navegadores usando los comentarios condicionales como se sugiere en sus Instrucciones de Github ?
Aquí había una pregunta que preguntaba si se podía usar en todos los navegadores sin comentarios condicionales y cuáles serían los efectos secundarios, pero esa no era mi pregunta. Esa pregunta fue hecha hace 4 años. HTML5 ahora es estándar y Microsoft ya no brinda soporte para los navegadores heredados, por lo que cargarlo en todos los navegadores sería una locura en este momento y no lo consideraría. Mi pregunta tiene que ver con la documentación de Github, qué proporciona html5shiv de forma inmediata con esa documentación y cómo usarla hoy para admitir los navegadores a los que afirma admitir.
Citando el archivo Léame en Github con respecto al script html5shiv:
"También aplica un estilo básico para elementos HTML5 para IE6-9, Safari 4.xy FF 3.x".
Uso:
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
En el último año, IE 8 y 9 combinados han caído de aproximadamente un 4% a aproximadamente un 2% en el uso global, según Stat Counter . Desde que Microsoft eliminó el soporte para los navegadores heredados el 12 de enero, parece que html5shiv podría ser ahora o pronto una cosa del pasado. Será interesante ver cuánto descienden estos navegadores de IE heredados en el año venidero.
Sin embargo, dependiendo de lo que esté desarrollando, es posible que desee admitir estos navegadores. Cuando incluyes Safari 4.xy Firefox 3 en las estadísticas anteriores, el recurso compartido total del navegador que soporta html5shiv es del 2.3%. Para la mayoría de las personas eso no es nada, pero si usted es dueño de un sitio de comercio electrónico, el 2.3% podría ser ENORME.
En lo que respecta a mi pregunta real, estoy pensando que pasé por alto algo en la documentación o que no entiendo bien los comentarios condicionales de IE.
Lógicamente, creo que esta sería la mejor manera de hacerlo. Los comentarios condicionales en IE funcionan a través de las versiones 5 a 9, por lo que no deberíamos tener el script cargado en IE5 sin ninguna razón.
<!--[if !(IE 5)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Sin embargo, en los últimos 5 años nunca he visto a nadie hacerlo de esta manera, así que obviamente me estoy perdiendo algo. Además, todavía no veo cómo funcionaría esto para FF 3 y Safari 4 a menos que haya un error o algo que haga que no lean los comentarios. Abrí este tema en html5shiv github con respecto a este problema también , pero no he podido obtener una respuesta.
HTML5shiv se usa fácilmente en millones de sitios web, y la mayoría de los desarrolladores y propietarios de sitios asumen que admite IE9 Safari 4 y FF 3 de forma inmediata.
Además, hasta donde sé, en lo que respecta a IE9, esto es todo lo que html5shiv hace para admitirlo.
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}
Si eso es cierto, puede ser otra razón para que muchos dejen de usarlo, ya que cuando sacas la ecuación y la incluyes en tu css (o un reinicio de css), has bajado al 1.39% de los navegadores que html5shiv tendría en realidad. un impacto en
Escribí una página muy detallada dedicada a los comentarios condicionales de Internet Explorer hace años. Esto es para lte = menor que [o] es igual a IE9; He documentado numerosos ejemplos listos para copiar y pegar en la página que escribí.
<head>
<!--[if lte IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
Recomiendo a sus visitantes que actualicen desde Vista, que es la única versión de Windows que puede ejecutar IE9 o inferior con soporte de seguridad. A partir de enero de 2016, solo se admite la última versión de Internet Explorer por versión de Windows. Consulte la página de Internet Explorer Versions Wiki para ver qué versiones de IE se ejecutan en qué versiones de Windows.
A partir de enero de 2010, solo IE10 + debe recibir una atención significativa. La política adecuada es para el bloque de página completa IE9 o inferior; Si Microsoft no lo admite, tampoco debería hacerlo a menos que se le pague un mínimo de dos veces lo que pagaría al año en un trabajo corporativo. Manténganse firmes, somos los que en última instancia sabemos lo que se necesita para hacer el trabajo.
La secuencia de comandos shiv solo se utiliza en IE (en este caso, menos que la versión 9 [... lt IE9 ...]), no se utiliza en otros navegadores, ignorados por ellos. Se comenta después de todo
<!-- ... -->
IE soporta estos y los lee. El script shiv aumenta la funcionalidad para hacer que esos navegadores antiguos funcionen "mejor".
ACTUALIZACIÓN: Parece que "lt IE9" también se ejecuta en Safari 4.xy FF 3.x. de lo que puedo encontrar (todo clonado a partir de la descripción del proyecto GitHub).
Otra ACTUALIZACIÓN: Estaba seguro de que esto solo funciona en IE, no en el antiguo Safari o FireFox. Voy a seguir cavando. Alguien más me corrige si me equivoco.
No, la muestra en su página de github cómo cargar el shiv no funcionará en ningún otro navegador que no sea IE desde 8 y más abajo, ya que utiliza la técnica de comentario condicional "de nivel inferior" .
Para que funcione tanto en IE9 como en los de abajo, y en navegadores que no sean de Internet, como Safari y Firefox, se necesita la técnica de comentarios condicionales "de bajo nivel revelado" , que tiene este aspecto.
<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->
Nota al margen que vale la pena señalar es:
IE10 y superiores ya no admiten comentarios condicionales y se comportarán como navegadores que no sean de IE en este caso de uso.
en los navegadores que ya admiten elementos HTML5, el shiv no hará nada.
Para responder mi propia pregunta...
Los documentos de github para html5shiv son engañosos ... eso es todo. Después de seguir investigando, encontré este viejo problema de Github HTML5SHIV que responde a esta pregunta .
No hay ninguna "peculiaridad o pirateo del navegador" que haga que los comentarios condicionales se lean en Firefox 3 o Safari 4 ( aquí hay una lista muy extensa de hacks de navegador impresionantes ).
[if lt IE 9] funciona en IE 5-8 tal como debería ... no se deje engañar por el archivo Léame.
Entonces, para ser claro, si está utilizando el fragmento de código siguiente, ya que espera que funcione mágicamente para IE9, Safari 3 o Firefox 4, no tendrá suerte.
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Entonces, ¿cómo se debe utilizar html5shiv?
Como mencioné en la pregunta y otros han mencionado en sus respuestas, Microsoft rechazó la compatibilidad con los navegadores heredados el 12 de enero de 2016. Teniendo esto en cuenta y que estas estadísticas mencionadas en mi pregunta probablemente estén sesgadas, creo que ese legado El uso continuará disminuyendo a un ritmo sólido durante el próximo año más o menos. Además de eso, la mayoría del uso actual probablemente proviene de empresas más antiguas que tardaron en actualizarse . Para la mayoría de las personas, estos no son usuarios de los que recibirían tráfico (especialmente porque es probable que esas computadoras solo funcionen con computadoras).
Personalmente ya no voy a usar html5shiv pero eso no es ni aquí ni allá. Dado que hay muchos de ustedes que probablemente aún usen HTML5, esta es mi sugerencia basada en alguna experiencia personal, investigación y otras respuestas en esta página sobre cómo HTML5shiv admitirá diferentes navegadores ...
Si desea soporte para IE6-9, Safari 4, Y Firefox 3 usando html5shiv sin ningún cambio adicional, NO incluya los comentarios condicionales:
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
Si quieres soporte para Internet Explorer usa esto. Dado que html5shiv NO funciona en IE 5, no tiene sentido cargarlo en ese navegador miserable:
<!--[if !(IE 5)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Si solo necesitas soporte para Internet Explorer 8 o 9 usa esto:
<!--[if (IE 8)|(IE 9)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Opción 4: Si bien los métodos anteriores pueden ser lo que necesita, después de algunos pensamientos, creo que esta es la forma más eficiente de usar el script.
<style type="text/css">
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}
</style>
<!--[if (gt IE 5)&(lt IE 9)]>
<script type="text/javascript">window.html5={shivCSS:!1};</script>
<script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Opción 4 1/2: "Probablemente" la mejor forma de usar HTML5Shiv en el futuro:
Incluso mejor que lo anterior, podemos eliminar los atributos de tipo ya que estamos especificando que esto es HTML5 y podemos minimizarlo. También podemos usar un cdn popular como jsdeliver o maxcdn para intentar acelerar el proceso, ya que esperamos que ya tengan el archivo en caché en su computadora. No, repito, no use Google para alojar html5shiv. Este es un error común que cometen las personas y solo se almacena en caché durante unos minutos. El código de Google no pretende ser un CDN.
También deshabilitamos el shiv css y lo incluimos nosotros mismos. Si está utilizando un reinicio de css (aquí hay una lista de los más populares en 2016) puede soltar la parte de estilo debajo de todos juntos.
Por último, lo incluimos justo antes de la etiqueta de cabecera de cierre según lo recomendado.
<!DOCTYPE html>
<html>
<head>
<!-- Meta, stylesheets, etc... -->
<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>
<!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
</head>
Este método asegurará que obtenga los resultados que desea de HTML5shiv que admite los navegadores que espera.
Ya que los navegadores heredados ya no son compatibles en IE, Firefox y Safari tienen actualizaciones automáticas), lo más probable es que pueda dejar de usar Shiv y usar una solución como @ LGSon''s o simplemente CSS / reset.
Nota al margen: solo deberías tomar las estadísticas del navegador como una guía muy suelta. Las estadísticas en dichos sitios están lejos del evangelio y cambiarán de un país a otro, de un mercado a otro, de una demografía a otra. Debes mirar los análisis de tu propio sitio y ver cuántos de TUS usuarios están cayendo en la categoría Safari 4, FireFox 3, Internet Explorer 6-8 (supongo que será MUCHO menos del 2.3%).
(También recuerde que FireFox se actualiza automáticamente y se encuentra actualmente en la versión 43 (!), Y que Safari se actualiza automáticamente con OSX, y está en la versión 9. Las posibilidades de que las personas aún usen versiones más antiguas son extremadamente escasas. Analítica del sitio de la mina: de las 20,000 sesiones del mes pasado, solo 1 usó FF3, 1 usó IE7, 1 usó IE8 y ninguna usó Safari 4 o IE6.)
Sin embargo , si está interesado en apuntar esos valores atípicos, aquí están las respuestas a sus preguntas:
¿Cómo funciona html5shiv en IE9 cuando se usa el comentario condicional
[if lt IE 9]es para IE8?
HTML5shiv no funciona con IE9 porque no es necesario. Internet Explorer 9 ya admite correctamente casi todos los elementos HTML5:
¿Safari 4.xy Firefox 3.x leen los comentarios condicionales de IE?
Safari y FireFox NO admiten comentarios condicionales de IE, pero PUEDEN ser orientados de esta forma:
FF3:
/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: lime; }
Safari:
/* Safari only override */
::i-block-chrome,.myClass { color: lime; }
Pero esto no es lo que hace HTML5shiv y tiene razón: la declaración condicional presentada en la página de inicio de HTML5shiv no sería recogida por FF3 o Safari 4 en su estado actual. Supongo que esto se debe a que consideran que esos navegadores son tan raros que no vale la pena para el usuario promedio. Además, cualquier restablecimiento / normalización de CSS probablemente incluirá el CSS necesario para esos navegadores de todos modos.
Así que para ver cómo manejar los elementos HTML5 en todos los navegadores mencionados:
IE6-8 : Use HTML5shiv.js como se describe en su github.com/afarkas/html5shiv .
IE9-11 : Use Normalize.css o agregue main { display: block } a su HTML. (Gracias a LGSon.)
Safari 4 : Use Normalize.css o el siguiente CSS:
article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
display: block;
}
FireFox 3 : Igual que el anterior.
(FireFox 4+ y Safari 5+ tienen un soporte de HTML5 mucho más sólido y no requieren el CSS anterior).