¿Cuáles son las mejores prácticas para los sitios web de varios navegadores? [cerrado]

(Me gustaría que este sea el wiki de la comunidad definitiva. Lo sembré de mi propia respuesta aesta pregunta.)

Especificar todo

Una gran cantidad de problemas relacionados con varios navegadores equivale a esto: usted no especificó algo, y los distintos navegadores hacen diferentes suposiciones. 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: hover selectores en divs en IE7).

Este artículo da buen fondo en doctypes.

Usa estándares web

Evite el marcado específico del navegador, o solo utilícelo cuando su falla en otros navegadores no sea importante para la experiencia del sitio.

Valida tu HTML y CSS

No tienes que tener todo perfecto, pero la validación es una buena respuesta. ComoJeff dijo:

Conocer las reglas y los límites lo ayuda a definir lo que está haciendo y le brinda munición legítima para estar de acuerdo o en desacuerdo. Puede hacer una elección informada, en lugar de una aleatoria: "Solo hago esto y funciona".

Imagina que abres una etiqueta de párrafo y nunca la cierras. Si luego abres una etiqueta de lista, ¿querías que estuviera dentro del párrafo o no? Validar lo ayudará a capturar eso, cerrar la etiqueta y eliminar la ambigüedad.

Considere un restablecimiento de CSS

Diferentes navegadores asumen diferentes reglas de línea de base CSS. Puede ayudarlos a todos a actuar de la misma manera al eliminar explícitamente las diferencias desde el principio. Eric Meyer, quien escribióCSS: la guía definitiva, usoseste reinicio. Otra opción popular esYUI Reset CSS.

Utilice una biblioteca de Javascript para las interacciones de DOM

Siempre que su Javascript necesite trabajar con elementos en su página, es mejor usar una biblioteca como jQuery, Prototype o MooTools. Estas bibliotecas son utilizadas por muchos miles de desarrolladores, y toman la mayoría de las inconsistencias entre las interpretaciones de Javascript de los navegadores, se ocupan de ellas internamente y le dan un conjunto consistente de comandos que simplemente funcionan. Tratar de encontrar y solucionar todas estas inconsistencias es una pérdida de tiempo y es probable que cree errores.

Prueba en múltiples navegadores, lidia con el último de IE

Prueba en varios navegadores a medida que avanzas. 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 hacks de IE en una hoja de estilo separada y cargarlo solo para los usuarios de IE.

Quirksmode.com Es un buen lugar para cazar las diferencias aleatorias del navegador.

Browsershots.org puede ayudar a mostrar cómo se mostrará su página en una variedad de navegadores y sistemas operativos.

Fallar con gracia

Ningún sitio se verá perfecto en todos los navegadores que existen. Si un usuario no tiene Flash, Javascript o CSS avanzado, etc., desea que su sitio sea utilizable de todos modos. Diseño con eso en mente:

Compruebe el HTML desnudo

Intente cargar su sitio con HTML desnudo, sin estilos ni scripts. ¿Hay opciones de menú disponibles? ¿El contenido primario precede al contenido secundario? ¿Se puede usar el sitio, aunque sea feo?

Considere la mejora progresiva basada en pruebas

Descrito enEste artículoEsta técnica usa javascript para verificar si un navegador tiene una capacidad determinada, como la compatibilidad con una propiedad CSS determinada, antes de usarla en la página. Es a diferencia del buscador de explorador porque prueba las características en lugar de un navegador específico.

Respuestas a la pregunta(7)

Su respuesta a la pregunta