¿Cómo puede solucionar el problema de compatibilidad con CSS y los navegadores web?

El “secreto” no es gran cosa: es una combinación de valores predeterminados de configuración (a través de restablecimientos CSS, normalize.css y similares), utilizando la experiencia para construir con reglas que sabe que son en su mayoría compatibles con navegadores cruzados, utilizando hacks ( encontrado y documentado minuciosamente por otros desarrolladores front-end) cuando sea necesario para corregir ese último píxel, y sabiendo cuándo darse por vencido y presentar una versión reducida / no idéntica del sitio en un navegador no compatible.

La buena noticia es que ahora estamos en mejor forma que hace 4 o 5 años. Webkit rige un buen porcentaje del mercado de navegadores de escritorio y casi todos los móviles; Firefox se ha estabilizado en su compatibilidad con CSS3 desde que se trasladaron al modelo de lanzamiento rápido, e IE9 + es mucho más amigable con el desarrollador web que sus predecesores. Todavía no va a obtener todo : cosas como los fotogramas clave y el estilo del DOM de sombra no son completamente compatibles entre navegadores, pero en términos de la mayoría de las reglas de diseño, selectores de psuedo y animaciones, es probable que solo necesite pequeños ajustes o prefijos de proveedor en todos los navegadores.

Renuncia a la tarea sisyphean de hacer que tu sitio sea idéntico al nivel de píxeles perfectos en todas las versiones de todos los navegadores. Ese objetivo no tiene sentido, es dañino e infantil. Nicholas Zakas ha realizado grandes charlas sobre el tema de Mejora progresiva y por qué deberíamos pensar en los navegadores web como los televisores, no como las revistas. Vea las diapositivas en Progressive Enhancement 2.0 (Conference Agnostic) y videos de sus charlas como esta:

Busque “mejora progresiva de nicholas zakas” para obtener más artículos, videos y diapositivas de Nicholas Zakas.

Comenzaría con Twitter Bootstrap (CSS Framework) como un medio para enseñarte patrones de diseño ampliamente aceptados. Una vez que conozca las mejores prácticas de diseño, puede construir sus propios diseños (la analogía es caminar antes de correr). Bootstrap funciona en los navegadores web actuales y antiguos, posiblemente mejor que cualquier otro Frameworks que existe hoy en día. El hecho de que Bootstrap es el marco más popular en GitHub lo respalda.

Puedes agregar tu CSS encima de Bootstrap para personalizar lo que quieras. Por ejemplo, en este JSFiddle, Editar este violín – jsFiddle, puede ver que he agregado mi propio CSS en el cuadrante superior derecho para que el menú desplegable sea visible sin desplazarse hacia abajo en la página (cuadrante inferior derecho).

En el futuro, si hay algo que Bootstrap no maneja de la manera que desea en un navegador determinado, puede agregarlo en Modernizr.js ¿Cuáles son los casos de uso más comunes para modernizr.js ?. Aunque Modernizr solo debería venir cuando eres MUCHO más fluido en HTML / CSS / JavaScript (lenguaje de programación).