¿Debo usar HTML5 y / o CSS3 para construir mi sitio web?
16
¡El nuevo contenido HTML5 / CSS3 (Web8!) Suena genial! ¿Debo comenzar a usarlo ahora o seguir con css / xhtml esperar hasta que más navegadores puedan usarlo?
HTML5 es compatible con todos los navegadores ahora, ¡incluso IE5! (Si usa el script html5shiv). Recomiendo leer http://diveintohtml5.org. Es uno de los mejores recursos HTML5 que existen.
En cuanto a CSS3, si lo usa, asegúrese de usar también el prefijo del proveedor, además de la sintaxis normal. p.ej
radio de borde
-moz-border-radius
-webkit-border-radius
Creo en la mejora progresiva. El soporte css3 de IE9 suena muy prometedor.
Creo que te refieres a poner el radio del borde en la parte inferior, ¿verdad?
Grant Palin
1
Por desgracia, el sitio original Dive Into HTML5 ya no existe. Hay muchos espejos disponibles. Aquí hay uno: diveintohtml5.info
M. Dudley
12
Probablemente.
Hay partes de HTML5 que puede usar ahora, hoy. Formas por ejemplo. Si tiene <input type="email">un navegador que no admite HTML5 (sí, incluso IE6), simplemente verá lo mismo que vería si lo usara <input type="text">. Sin embargo, en un navegador que admite elementos de formulario HTML5, obtiene las ventajas del emailtipo: es decir, el cliente verificará por error el valor sin necesidad de JS adicionales. Si bien sí, aún necesitará el JS para navegadores que no sean HTML5, tendrá una capa más de validación en los navegadores compatibles.
Otra pregunta en este sitio proporciona una buena descripción de las nuevas funciones disponibles para usted a través de HTML5 y CSS3. También hay muchos buenos datos sobre formularios en esa pregunta.
Debido a que Internet Explorer (y las versiones anteriores de Safari y Firefox, por muy raras que sean) no son compatibles con muchas de estas características, le quedan bibliotecas de JavaScript para llenar el vacío. Estos incluyen un éxito en el rendimiento (aunque es solo para los navegadores que necesitan usarlos), así que tenga en cuenta a sus usuarios cuando los emplee.
Para mitigar los problemas con la falta de compatibilidad de funciones, si decide que estas nuevas funciones valen la pena, use los siguientes recursos:
html5shiv: un JavaScript shiv para que IE reconozca y diseñe los elementos HTML5.
CSS3 Pie: un comportamiento adjunto de IE (un.htcarchivo) que hace que Internet Explorer 6-8 sea capaz de representar varias de las características de decoración CSS3 más útiles. Cuando se aplica a un elemento, que permite reconocer IE y la pantallaborder-radius,box-shadow,border-image, múltiples imágenes de fondo, y lalinear-gradientimagen de fondo.
Modernizr: una biblioteca de Javascript que utiliza la detección de características para probar el navegador actual contra las próximas características CSS3 / HTML5, agregando clases al elemento <html> para aquellos que son compatibles. También crea un objeto JavaScript global homónimo que contiene una propiedad booleana para cada característica,truesi es compatible yfalsesi no. Agrega compatibilidad para diseñar e imprimir elementos HTML5 para que pueda usar elementos como<section>,<header>y<nav>.
ie-css3.js: permite a Internet Explorer identificar selectores de pseudo-clase CSS3 y representar cualquier regla de estilo definida con ellos. Admite diferentes selectores CSS3 según la biblioteca de JavaScript que utiliza su sitio.
DD_belatedPNG: una biblioteca de Javascript que agrega compatibilidad con imágenes PNG a IE6. Puede utilizar PNG como elsrcde un<img />elemento o como unabackground-imagepropiedad de CSS. A diferenciaAlphaImageLoader,background-positionybackground-repeatfuncionan según lo previsto, y los elementos responderán a laa:hoverpseudoclase.
TwinHelix IE PNG Fix: un comportamiento adjunto de IE (un.htcarchivo) que agrega compatibilidad con PNG con opacidad alfa a IE 6. El posicionamiento completo de fondo CSS y la repetición son compatibles (incluidos sprites CSS) con JavaScript adicional (incluido).
Lo que sea: hover: un comportamiento adjunto de IE (un.htcarchivo) que parchea automáticamente: hover,: active y: focus para las peculiaridades de IE6, IE7 e IE8, permitiéndole usarlas como lo haría en cualquier otro navegador. Incluye compatibilidad con AJAX, lo que significa que cualquier html que se inserte en el documento a través de JavaScript también se activará:hover,:activey los:focusestilos en IE.
Es interesante notar que DD_belatedPNG resuelve ambos problemas abordados por Whatever: hover y IE PNG de TwinHelix Fix con JavaScript puro, mientras que Whatever: hover y IE PNG de TwinHelix Fix utilizan una combinación de comportamientos adjuntos de JavaScript e IE ( .htc files).
En general, las personas que usan navegadores que no son IE los actualizan cuando se les solicita, por lo que IE lleva la peor parte de "¡Pero algunos navegadores no son compatibles con esta función!" quejas Modernizr agregará la capacidad de usar HTML5 / CSS3 a cualquier navegador que pueda ver y no solo a IE. ie-css3.js hará lo mismo, simplemente tiene que implementarlo sin un comentario condicional de IE (lo que significa que todos los navegadores terminarán obteniéndolo a menos que lo incluya con verificaciones de agente de usuario del lado del servidor; esto reducirá en gran medida el rendimiento para todos sus visitantes, en lugar de solo sus usuarios de IE).
Lo siento, Bryson, pero esas cosas que agregan soporte HTML5 a Internet Explorer son pesadillas para fines prácticos.
1
He actualizado mi publicación con un poco más de información, y reconocí los éxitos de rendimiento al usar estas bibliotecas JS. Sin embargo, no estoy de acuerdo con usted en que su uso sea una pesadilla. He usado todo esto al menos una vez, y todos tienen un propósito. Tampoco me han causado dolores de cabeza adicionales. ¿Qué te hace decir que son pesadillas?
Bryson
De acuerdo, las "pesadillas absolutas" pueden ser una forma demasiado fuerte de expresar las cosas, pero el rendimiento a menudo sufre lo suficiente como para que la página se vuelva inutilizable, por lo que creo que estás exagerando el caso.
5
Utilice la tecnología que mejor se adapte a sus necesidades.
Eric Meyer escribió un buen artículo sobre por qué comenzar a usar prefijos específicos del proveedor en las reglas CSS no es tan aburrido como solía ser el uso de hacks de filtros CSS.
Creo que lo mismo se aplica a HTML5. Si puede consultar el soporte del navegador para diferentes funciones, ¿por qué no usarlo? Mientras el sitio se degrade con gracia, vívelo.
Algunos otros enlaces útiles, al decidir qué características de CSS3 puede que desee utilizar:
http://caniuse.com/ (ofrece un buen desglose de qué elementos y selectores se pueden utilizar en qué plataformas)
http://css3please.com/ (un área de juegos editable en la página para jugar con las características CSS3, esto también da algunos consejos sobre qué técnicas y características son compatibles con qué plataformas para los estilos comúnmente solicitados, como esquinas redondeadas, fondos degradados, etc.)
Lo uso para mejorar la experiencia en los navegadores modernos para que los usuarios con un buen navegador sean "recompensados" con una interfaz de usuario más bonita (esquinas redondeadas, sombras, esas cosas). Supongo que no deberías usarlo como un reemplazo para, digamos, tu validación actual del formulario del lado del cliente, a menos que tengas algún tipo de respaldo de JS para ello.
Utiliza HTML5 Boilerplate en el backend y agrega algunas opciones propias para darle una plantilla que puede implementar en su propio sitio. Incluye las bibliotecas Javascript (como HTML Shiv o Modernizr), que harán que su sitio sea compatible con navegadores más antiguos.
Depende de lo que sea la audiencia y de las características que quieras usar. Espero que pasen varios años más antes de que el proyecto promedio pueda abandonar el soporte para ie6 :(
Si su sitio es una intranet privada y usted controla el navegador o tiene una gama limitada de navegadores con los que lidiar, entonces no dude en trabajar con la tecnología más avanzada.
Si no, no importa lo que use, siempre tendrá que tener en cuenta el mínimo común denominador. En este caso, es probablemente una combinación de IE 6 y una variedad de navegadores móviles. Entonces, si avanzas con HTML 5, tienes el problema adicional de asegurarte de que tu sitio se 'degrada' bien.
Respuestas:
HTML5 es compatible con todos los navegadores ahora, ¡incluso IE5! (Si usa el script html5shiv). Recomiendo leer http://diveintohtml5.org. Es uno de los mejores recursos HTML5 que existen.
En cuanto a CSS3, si lo usa, asegúrese de usar también el prefijo del proveedor, además de la sintaxis normal. p.ej
radio de borde
-moz-border-radius
-webkit-border-radius
Creo en la mejora progresiva. El soporte css3 de IE9 suena muy prometedor.
fuente
Probablemente.
Hay partes de HTML5 que puede usar ahora, hoy. Formas por ejemplo. Si tiene
<input type="email">un navegador que no admite HTML5 (sí, incluso IE6), simplemente verá lo mismo que vería si lo usara<input type="text">. Sin embargo, en un navegador que admite elementos de formulario HTML5, obtiene las ventajas delemailtipo: es decir, el cliente verificará por error el valor sin necesidad de JS adicionales. Si bien sí, aún necesitará el JS para navegadores que no sean HTML5, tendrá una capa más de validación en los navegadores compatibles.Otra pregunta en este sitio proporciona una buena descripción de las nuevas funciones disponibles para usted a través de HTML5 y CSS3. También hay muchos buenos datos sobre formularios en esa pregunta.
Debido a que Internet Explorer (y las versiones anteriores de Safari y Firefox, por muy raras que sean) no son compatibles con muchas de estas características, le quedan bibliotecas de JavaScript para llenar el vacío. Estos incluyen un éxito en el rendimiento (aunque es solo para los navegadores que necesitan usarlos), así que tenga en cuenta a sus usuarios cuando los emplee.
Para mitigar los problemas con la falta de compatibilidad de funciones, si decide que estas nuevas funciones valen la pena, use los siguientes recursos:
.htcarchivo) que hace que Internet Explorer 6-8 sea capaz de representar varias de las características de decoración CSS3 más útiles. Cuando se aplica a un elemento, que permite reconocer IE y la pantallaborder-radius,box-shadow,border-image, múltiples imágenes de fondo, y lalinear-gradientimagen de fondo.truesi es compatible yfalsesi no. Agrega compatibilidad para diseñar e imprimir elementos HTML5 para que pueda usar elementos como<section>,<header>y<nav>.srcde un<img />elemento o como unabackground-imagepropiedad de CSS. A diferenciaAlphaImageLoader,background-positionybackground-repeatfuncionan según lo previsto, y los elementos responderán a laa:hoverpseudoclase..htcarchivo) que agrega compatibilidad con PNG con opacidad alfa a IE 6. El posicionamiento completo de fondo CSS y la repetición son compatibles (incluidos sprites CSS) con JavaScript adicional (incluido)..htcarchivo) que parchea automáticamente: hover,: active y: focus para las peculiaridades de IE6, IE7 e IE8, permitiéndole usarlas como lo haría en cualquier otro navegador. Incluye compatibilidad con AJAX, lo que significa que cualquier html que se inserte en el documento a través de JavaScript también se activará:hover,:activey los:focusestilos en IE.Es interesante notar que DD_belatedPNG resuelve ambos problemas abordados por Whatever: hover y IE PNG de TwinHelix Fix con JavaScript puro, mientras que Whatever: hover y IE PNG de TwinHelix Fix utilizan una combinación de comportamientos adjuntos de JavaScript e IE (
.htc files).En general, las personas que usan navegadores que no son IE los actualizan cuando se les solicita, por lo que IE lleva la peor parte de "¡Pero algunos navegadores no son compatibles con esta función!" quejas Modernizr agregará la capacidad de usar HTML5 / CSS3 a cualquier navegador que pueda ver y no solo a IE. ie-css3.js hará lo mismo, simplemente tiene que implementarlo sin un comentario condicional de IE (lo que significa que todos los navegadores terminarán obteniéndolo a menos que lo incluya con verificaciones de agente de usuario del lado del servidor; esto reducirá en gran medida el rendimiento para todos sus visitantes, en lugar de solo sus usuarios de IE).
fuente
Utilice la tecnología que mejor se adapte a sus necesidades.
Eric Meyer escribió un buen artículo sobre por qué comenzar a usar prefijos específicos del proveedor en las reglas CSS no es tan aburrido como solía ser el uso de hacks de filtros CSS.
Creo que lo mismo se aplica a HTML5. Si puede consultar el soporte del navegador para diferentes funciones, ¿por qué no usarlo? Mientras el sitio se degrade con gracia, vívelo.
fuente
Algunos otros enlaces útiles, al decidir qué características de CSS3 puede que desee utilizar: http://caniuse.com/ (ofrece un buen desglose de qué elementos y selectores se pueden utilizar en qué plataformas)
http://css3please.com/ (un área de juegos editable en la página para jugar con las características CSS3, esto también da algunos consejos sobre qué técnicas y características son compatibles con qué plataformas para los estilos comúnmente solicitados, como esquinas redondeadas, fondos degradados, etc.)
fuente
Lo uso para mejorar la experiencia en los navegadores modernos para que los usuarios con un buen navegador sean "recompensados" con una interfaz de usuario más bonita (esquinas redondeadas, sombras, esas cosas). Supongo que no deberías usarlo como un reemplazo para, digamos, tu validación actual del formulario del lado del cliente, a menos que tengas algún tipo de respaldo de JS para ello.
fuente
Si está comenzando un nuevo proyecto con HTML5 que también debería ser compatible con navegadores antiguos, la mejor opción es usar Initializr:
http://www.initializr.com/
Utiliza HTML5 Boilerplate en el backend y agrega algunas opciones propias para darle una plantilla que puede implementar en su propio sitio. Incluye las bibliotecas Javascript (como HTML Shiv o Modernizr), que harán que su sitio sea compatible con navegadores más antiguos.
fuente
Depende de lo que sea la audiencia y de las características que quieras usar. Espero que pasen varios años más antes de que el proyecto promedio pueda abandonar el soporte para ie6 :(
fuente
Si su sitio es una intranet privada y usted controla el navegador o tiene una gama limitada de navegadores con los que lidiar, entonces no dude en trabajar con la tecnología más avanzada.
Si no, no importa lo que use, siempre tendrá que tener en cuenta el mínimo común denominador. En este caso, es probablemente una combinación de IE 6 y una variedad de navegadores móviles. Entonces, si avanzas con HTML 5, tienes el problema adicional de asegurarte de que tu sitio se 'degrada' bien.
fuente