Cómo escribir HTML5 compatible con versiones anteriores?

Question

Me gustaría empezar a utilizar las funciones básicas de HTML 5, pero al mismo tiempo, mantener mi código compatible con navegadores antiguos (degradación elegante). Por ejemplo, me gustaría utilizar las frescas propiedades de CSS3 para hacer esquinas redondeadas. ¿Hay algún tutorial disponible para escribir HTML 5 con gracia degradable?

Además, lo que los navegadores debería apoyar de manera que mi aplicación. es funcional para al menos el 95% de los visitantes? ¿Cuáles son las formas de probar los navegadores sin dolor?

Answer 1

Cuando se habla de HTML5 o CSS3, debería dirigirse a:

Cuando puedo usar ...

Como se puede ver, todavía estamos muy lejos de que el uso de.

Además, dado que las versiones antiguas de los navegadores no soportan HTML5 o CSS3, sin embargo, se puede hacer lo que se conoce como:

mejora progresiva y degrade correctamente

Estos son algunos recursos también:

• Galería de Sitios HTML5 (Usted puede aprender y obtener la idea de ellos)
• Crear modernos sitios web utilizando HTML 5 y CSS 3

Answer 2

Navegadores que, colectivamente, la cubierta 95% del mundo: Firefox, Chrome, IE6 / 7/8. La mejor manera de probarlos es instalar en su ordenador.

Answer 3

Usted desea utilizar etiquetas HTML y CSS compatible con los navegadores móviles.

Para CSS3 nada se envuelve en javascript condicional. Siempre asegúrese de que el dispositivo anchura es de al menos 240 píxeles, entonces cualquier cosa por debajo de ese es el viejo de mierda, mirada, móvil.

Se puede utilizar una pequeña plancha de caldera móvil para la CSS, para restablecer las etiquetas básicas que usa (que se vean ellos mismos en diferentes navegadores). Al igual que con cualquier texto modelo, usted debe buscar en el css para ver si es la manera excesiva.

Para una verificación completa guía las pautas W3 móvil CSS2: http: //www.w3.org/TR/2000/WD-css-mobile-20001013

Otro buen recurso es la siguiente tabla de compatibilidad: http://www.quirksmode.org/m/ css.html

Answer 4

degrade correctamente es todo acerca de hacer compromisos - si se puede hacer todo en la versión más baja, es probable que lo haría. Para recoger en el ejemplo de las esquinas redondeadas que usted cita, puede aceptables para usted (o su cliente) para vivir sin ellos, donde no existen extensiones específicas de procesador de CSS para apoyarlos (esta es la forma http://www.ipswich-angle.com/ mangos que, por ejemplo, creo). Otras opciones que implican las imágenes están ahí, pero depende en gran medida de lo que pone en peligro y su cliente están dispuestos a hacer.

Answer 5

Un servicio como browsershots.org es muy útil para comprobar cómo el sitio se muestra en diferentes navegadores y sistemas operativos. Usted tiene que esperar en una cola por un tiempo pero vale la pena hacerlo.

Answer 6

Me iba a hacer este comentario, pero luego se dejó llevar ..

w3schools tiene sugerencias para el uso de elementos de la web semántica en su sitio. Se sugiere el uso de una biblioteca de JavaScript llamada html5shiv.js añadir peinar el apoyo a IE8 y por debajo de lo que puede encontrar archivos javascript que emulan una funcionalidad específica integrada en HTML5 como json2.js y Webforms2.js .

este artículo da un ejemplo completo de emular una forma HTML5 con muchos de los nuevos atributos / funcionalidad.

En cuanto a la construcción del sitio, lo recomiendo construcción de un sitio HTML 4 en primer lugar utilizando elementos semánticos libremente (con html5shiv) y pruebas con IE7. A continuación, a medida que construye partes del sitio que requieren nuevas características, la investigación de un archivo JavaScript que proporcionará los navegadores antiguos con la misma funcionalidad, por ejemplo: cuando es el momento para añadir su primera esquina redondeada o un gradiente tal vez añadir CSS3Pie . Recuerde siempre, así que su caja-modelo; la frontera de radio y los gradientes son compatibles con WebKit, así como la API de Mozilla tantos atributos CSS3 tendrá que añadir 3 veces:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

Por desgracia no tengo un recurso bueno para cómo los webkit / API de Mozilla comparan con la funcionalidad de HTML5.

La única funcionalidad que he tenido problemas para encontrar un apoyo para los selectores CSS3 en los navegadores antiguos, a menudo se puede conseguir lejos con esto, quiero decir que si no vas a actualizar su navegador en mi humilde opinión se puede vivir con unos bordes de doble espesor o desaparecidos alternativo estilo fila de tablas.

Tal vez algún día habrá un sitio que puede subir su código para que le dirá cosas como "cromo 20.xyz no es compatible con las esquinas redondeadas, añadir -webkit-border-radius para añadir soporte" pero hasta entonces la adición de compatibilidad hacia atrás después de la hecho será casi imposible que los sitios complejos.