it-swarm-es.com

¿Debo usar HTML5 y / o CSS3 para construir mi sitio web?

¡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?

16
Jason

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.

13
Jin

Probablemente.

Hay partes de HTML5 que puede usar ahora, hoy. Formas por ejemplo. Si tiene <input type="email"> en un navegador que no es compatible con HTML5 (sí, incluso IE6), simplemente verá lo mismo que vería si usara <input type="text">. Sin embargo, en un navegador que admite elementos de formulario HTML5, obtiene las ventajas del tipo email: 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.

Otro pregunta en este sitio proporciona una buena visión general 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, aunque sean raras) 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 shiv de JavaScript para IE para reconocer y diseñar los elementos HTML5.
  • CSS3 Pie: un IE comportamiento adjunto (un .htc archivo) que hace que Internet Explorer 6-8 capaz de representar varias de las características de decoración CSS3 más útiles. Cuando se aplica a un elemento, permite que IE reconozca y muestre border-radius, box-shadow, border-image, múltiples imágenes de fondo y linear-gradient como imagen de fondo .
  • Modernizr: una biblioteca de Javascript que utiliza la detección de características para probar el navegador actual contra las características CSS3/HTML5 futuras, agregando clases al <html> elemento para aquellos que son compatibles. También crea un objeto JavaScript global homónimo que contiene una propiedad booleana para cada característica, true si es compatible y false si no es así. 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 Javascript que agrega soporte de imágenes PNG a IE6. Puede usar PNG como src de un elemento <img /> o como una propiedad background-image en CSS. A diferencia de AlphaImageLoader, background-position y background-repeat funcionan según lo previsto, y los elementos responderán a la pseudo-clase a:hover.
  • TwinHelix IE PNG Fix: un IE comportamiento adjunto (un .htc archivo) que agrega soporte PNG con opacidad alfa a IE 6. El posicionamiento completo de fondo CSS y la repetición son compatibles (incluidos los sprites CSS) con JavaScript adicional (incluido).
  • Lo que sea: pasar el mouse: un comportamiento adjunto IE (un archivo .htc) que automáticamente parches: hover,: active y: focus para las peculiaridades de IE6, IE7 e IE8, permitiéndole usarlos como lo haría en cualquier otro navegador. Incluye el soporte AJAX, lo que significa que cualquier html que se inserte en el documento a través de javascript también activará los estilos :hover, :active y :focus en IE.

Es interesante notar que DD_belatedPNG resuelve ambos problemas abordados por Whatever: hover y TwinHelix's IE PNG Fix con JavaScript puro, mientras que Whatever: hover y TwinHelix's IE PNG Fix usa una combinación de JavaScript y IE comportamientos adjuntos (.htc files).

Por lo 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 debe implementarlo sin un comentario condicional IE (lo que significa que todos los navegadores terminarán obteniéndolo a menos que lo incluya con las verificaciones de agente de usuario del lado del servidor, esto reducirá en gran medida el rendimiento de todos sus visitantes, en lugar de solo sus IE usuarios).

12
Bryson

Utilice la tecnología que mejor se adapte a sus necesidades.

Eric Meyer escribió n buen artículo acerca de por qué comenzar a usar prefijos específicos del proveedor en las reglas de 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.

5
jessegavin

Algunos otros enlaces útiles, al decidir qué características de CSS3 puede utilizar: http://caniuse.com/ (proporciona un buen desglose de los elementos y selectores que se pueden utilizar en cada plataforma)

http://css3please.com/ (un patio 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 solicitados comúnmente, como esquinas redondeadas, fondos degradados, etc.)

2

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.

1
D4V360

Si está comenzando un nuevo proyecto usando 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.

1
Mozan Sykol

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 :(

0
theotherreceive

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 en el borde de la tecnología.

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 gama de navegadores móviles. Entonces, si avanzas con HTML 5, tienes el problema adicional de asegurarte de que tu sitio se 'degrada' bien.

0
Gary.Ray