cross-browser - multiple - test website in all browsers online
¿Cuáles son las mejores prácticas para sitios web de navegador cruzado? (7)
(Me gustaría que esta sea la wiki definitiva de la comunidad. Lo hice desde mi propia respuesta a esta pregunta ).
Especificar todo
Muchos problemas de navegadores cruzados equivalen a esto: no especificó algo, y diferentes navegadores hacen suposiciones diferentes. Por lo tanto:
Declarar un doctype válido
Su doctype le dice al navegador qué reglas usará en su código. Si no especifica, el navegador tiene que adivinar, y los diferentes navegadores adivinarán de manera diferente.
En mi experiencia, un doctype "estricto" hace que IE se comporte mejor (habilita cosas como CSS: selectores de desplazamiento sobre divs en IE7).
Este artículo proporciona buenos antecedentes sobre doctypes.
Usar estándares web
Evite el marcado específico del navegador o solo úselo cuando su falla en otros navegadores no sea significativa para la experiencia del sitio.
Valida tu HTML y CSS
No es necesario que todo sea perfecto, pero la validación es buena retroalimentación. Como dijo Jeff :
Conocer las reglas y los límites te ayuda a definir lo que estás haciendo y te da municiones legítimas para estar de acuerdo o en desacuerdo. Puede hacer una elección informada, en lugar de una opción aleatoria "Yo solo hago esto y funciona".
Imagine que abrió una etiqueta de párrafo y nunca la cerró. Si luego abre una etiqueta de lista, ¿quiso decir que está dentro del párrafo o no? Validarlo lo ayudará a atraparlo, cerrar la etiqueta y eliminar la ambigüedad.
Considere un restablecimiento de CSS
Los diferentes navegadores asumen diferentes reglas básicas de CSS. Puede ayudarlos a todos a actuar de la misma forma resolviendo explícitamente las diferencias desde el principio. Eric Meyer, quien escribió CSS: The Definitive Guide , usa este reinicio . Otra opción popular es YUI Reset CSS .
Use una biblioteca Javascript para interacciones DOM
Siempre que su Javascript necesite trabajar con elementos en su página, lo mejor es usar una biblioteca como jQuery, Prototype o MooTools. Estas bibliotecas son utilizadas por muchos miles de desarrolladores, y se encargan de la mayoría de las incoherencias entre la interpretación de JavaScript de los navegadores, se ocupan de ellas internamente y le proporcionan un conjunto coherente de comandos que simplemente funcionan. Tratar de encontrar y solucionar todas estas incoherencias es una pérdida de tiempo y es probable que cree errores.
Prueba en múltiples navegadores, trata con IE pasado
Prueba en múltiples navegadores sobre la marcha. En general, encontrará que los navegadores que no son de IE se comportan de manera similar e IE es un caso especial, especialmente si sigue los consejos anteriores. Cuando sea necesario, puede agregar IE hacks en una hoja de estilos separada y solo cargarlo para los usuarios de IE.
Quirksmode.com es un buen lugar para buscar diferencias de navegador al azar.
Browsershots.org puede ayudar a mostrar cómo se mostrará su página en una variedad de navegadores y sistemas operativos.
Falla con gracia
Ningún sitio se verá perfecto en todos los navegadores que existen. Si un usuario no tiene Flash, Javascript, CSS avanzado, etc., desea que su sitio se pueda utilizar de todos modos. Diseña con eso en mente:
Compruebe el HTML desnudo
Intenta cargar tu sitio con HTML desnudo, sin estilos ni scripts. ¿Hay opciones de menú disponibles? ¿El contenido primario precede al contenido secundario? ¿Es el sitio utilizable, incluso si es feo?
Considere la mejora progresiva basada en pruebas
Descrita en este artículo , esta técnica usa javascript para verificar si un navegador tiene una capacidad determinada, como soporte para una propiedad de CSS dada, antes de usarla en la página. Es diferente al rastreo de navegador porque prueba funciones en lugar de un navegador específico.
Asegúrese de mantener HTML, CSS y Javascript en archivos separados tanto como sea posible. Mezclar estructura, presentación y comportamiento en su archivo HTML hace que encontrar y solucionar problemas sea más difícil.
Considere la posibilidad de programar la interfaz de usuario de su sitio web con Google Web Toolkit . Con GWT escribe todo el código en el lenguaje de programación Java, que GWT luego compila de forma cruzada en JavaScript optimizado que funciona automáticamente en todos los principales navegadores.
Creo que utilizar las mejores prácticas es el camino a seguir, la mejora progresiva es diseñar teniendo en cuenta al usuario y debe hacerse con todos los diseñadores. Creo que muchas pruebas en los navegadores son una buena forma de garantizar que se muestre el contenido adecuado, muchos desarrolladores lo ven así.
Mi regla n . ° 1 es usar un doctype estricto . HTML o XHTML está bien, pero usar el estricto doctype elimina casi todas las peculiaridades del navegador, especialmente en IE7 +.
Imagine que abrió una etiqueta de párrafo y nunca la cerró. Si luego abre una etiqueta de lista, ¿quiso decir que está dentro del párrafo o no?
En realidad, no puede poner ninguna otra etiqueta de bloque dentro de una etiqueta <p> , es por eso que la especificación le permite omitir la etiqueta de cierre. Si comienza una lista sin cerrar un párrafo, entonces el párrafo se cierra implícitamente. Y el validador no se quejará.
Eso no quiere decir que no deba cerrar las etiquetas, porque generalmente hace que el código sea más fácil de escanear (no necesita recordar las reglas anteriores).
Use Firebug en Firefox para:
- Depuración / paso a través de su JS.
- Ver cómo se interpretan sus hojas de estilo y piratearlas sobre la marcha para ver cómo solucionar su problema.
- Vea cuántas llamadas realiza para recursos remotos y cuánto tiempo toman.
- Perfile su código.
Chrome e IE8 tienen herramientas similares integradas que se pueden usar para lo mismo.
Opera y Safari (e IE) tienen Firebug Lite .
Utilice una biblioteca como jQuery para abstraer las diferencias en el DOM, AJAX y JavaScript.