¿Qué es mejor: hacks CSS o detección de navegador?

Hay una tercera opción:

Minimice o elimine la necesidad de detección de navegadores y hacks CSS.

Trato de usar cosas como complementos de jQuery que se ocupan de las diferencias del navegador para usted (para widgets y similares). Esto no se encarga de todo, pero hace mucho y ha delegado el esfuerzo de soportar múltiples navegadores a alguien que ha gastado y gastará mucho más esfuerzo en él de lo que puede permitirse o querer.

Después de eso sigo estos principios:

• Use lo que yo llamo CSS mínimo , lo que significa que solo use características que sean ampliamente soportadas;
• Utilice tablas para diseños complejos si es necesario. Puede que no te guste esto, pero francamente para hacer cosas como el diseño de lado a lado, las tablas funcionarán en los navegadores que se remontan a una década y será mucho menos esfuerzo que conseguir divs para trabajar con combinaciones de posicionamiento absoluto, flotante y similares;
• Forzar IE6 en modo estricto en lugar de peculiaridades añadiendo un DOCTYPE. No puedo enfatizar lo mucho más fácil que esto hará su vida, pero extrañamente muchas personas no parecen hacerlo todavía;
• Minimice los problemas de box model usando el DOCTYPE correcto o usando elementos de bloque anidados en lugar de los otros hacks de box model ; y
• Si es necesario, incluya archivos CSS adicionales para los navegadores relevantes. Tiendo a hacer esto en el servidor en lugar del cliente con páginas generadas (que, seamos sinceros, es la mayoría de ellos). Muchos proyectos en los que he trabajado han tenido IEfix.archivos css.

Después de eso, divido los navegadores en niveles:

Nivel 1:

• Firefox 3;
• IE7.

Mi sitio web debe trabajar en estos.

Nivel 2:

[11]} Firefox 2;
• Safari;
• Opera;
• Chrome.

Mi sitio web debería trabajar en estos. Esto puede ofender a algunas personas, pero francamente la cuota de mercado de estos navegadores es tan bajo que simplemente no son tan importantes como Firefox 3 o IE7.

Nivel 3:

• IE6;
• Otros.

Se hará un esfuerzo mínimo para trabajar en estos a menos que sea, por ejemplo, un requisito de la empresa. IE6 es la pesadilla, pero su cuota de mercado a partir de diciembre fue del 20% y cayó rápidamente. Además, hay preocupaciones de seguridad válidas (en sitios web financieros, por ejemplo) para disuadir o incluso rechazar el uso de IE6 de tal manera que los sitios como Paypal ha bloqueado IE6 y Google les dice a los usuarios que eliminen IE6 .

¿Hay alguna razón por la que use o no use cualquiera de estos?

Sí. Navegador del lado del cliente: la detección se interrumpe si JavaScript está desactivado y es posible que no funcione correctamente con futuras versiones del navegador. La última razón también es cierta para los hacks CSS. La detección del navegador del lado del servidor se interrumpe si el usuario intenta romperla explícitamente, pero aún así podría ser una alternativa viable.

Lo que recomendaría:

Asegúrese de que su código funciona en los navegadores compatibles con estándares - es decir, desarrollar en uno o dos de ellos y comprobar browsershots.org después. Lo más probable es que sea posible implementar el resultado deseado en todos ellos con una sola hoja de estilo.

Entonces, está IE. Si solo hay unos pocos problemas, usted podría ir con un hack CSS. De lo contrario, utilice comentarios condicionales.

Editar:

Si también tengo que admitir navegadores antiguos, generalmente voy por el camino de la degradación agraciada: solo dejaré que muestren el html puro con una hoja de estilo básica (tamaños de fuente, colores,...). Todas las cosas elegantes se ocultarán con una regla @import.

Generalmente me gusta tener una hoja de estilo para navegadores compatibles con los estándares como Firefox y Safari y luego usar comentarios condicionales para detectar Internet Explorer y servirle un archivo CSS adicional que contiene correcciones y anulaciones específicas de IE.

En 6 años de escribir HTML y CSS para ganarse la vida, la gran mayoría de mis problemas CSS han venido de Internet Explorer.

Como se señaló en otras respuestas, puede usar comentarios condicionales para servir hojas de estilo adicionales a IE (o para agregar una clase a la cadena <body> o <html>`` element, if you don’t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from theuser-agent`, están garantizados para funcionar.

En cuanto a los problemas CSS no IE, nunca he encontrado uno que valga la pena la detección del navegador.

Bien, los hacks son más rápidos para el navegador, pero la detección del navegador proporciona una mejor legibilidad en su CSS si lo estructura correctamente. Si puede hacer la detección del navegador y al mismo tiempo puede compartir el CSS entre los navegadores, y solo tiene el css diferente en archivos separados o lo que sea, entonces usaría la detección del navegador, ya que esto es algo que un novato puede entender, donde los hacks de CSS son difíciles de entender si no los conoce

Prefiero usar la detección del navegador y poner el CSS independiente del navegador en su propio archivo.

La mejor solución, sin embargo, es encontrar CSS que sea cross-compatible por defecto y simplemente usar eso.

Trato de no usar ninguno de los dos. En muchos casos, los problemas que tiene IE se pueden evitar simplificando un poco la estructura de su marcado.

También ayuda si se utiliza un reset CSS decente como Eric Meyer.

También estoy dejando caer lenta pero seguramente el soporte para IE6 como cuestión de principio, especialmente teniendo en cuenta los últimos problemas de seguridad con IE6 e IE7 - no vamos a cambiar los hábitos de navegación de la gente y las preferencias del navegador si seguimos apoyando mierda navegador.

Considere cuidadosamente todo lo anterior, especialmente los punteros sobre doctype. Si debe aplicar un hack CSS, para un navegador específico saber que los hacks son casi siempre evitables. Especialmente para una página estática seca.

Hablando desde una experiencia limitada desarrollando estas cosas... Estoy asumiendo que desea hacer una página web resbaladiza que parpadea sin el desordenado Adoobi boughtware:

• Codificar una página que parece razonable en estos navegadores, todos los cuales se pueden probar en uno máquina:

Op3ra 9.6, S@fari 3, Chr0me 1, 1nternet Xpl0rer 6, 7 & 8, Firefux 1.5

• Utilice la regla css @import para deshacerse del css en los navegadores antiguos y dejar que coman pastel.

• Utilice una combinación de detección de objetos y búsqueda de navegadores para encontrar y eliminar navegadores problemáticos (todas las versiones por debajo del objetivo anterior). También captura los navegadores antiguos que sabes que no están al día (la propiedad CSS se puede probar y comparar con el valor conocido) solo en si lo hacen más allá del sniffer, también usan comentarios condicionales para expulsar 1E5 alimentándolo con algo de anti-css para calmarlo en su camino, similar para ie6 excepto mantenerlo en el jQu3ry si es posible.

• Utilice un elemento dinámico para cargar el libray jQu3ry en los navegadores permitidos (cualquiera que no haya fallado sus pruebas cuidadosas). Es decir, ni siquiera importamos la biblioteca cuando sabemos que no va a funcionar / dejamos entrar a todos los demás.

• Utilice jQu3ry para resolver cualquier problema en sus navegadores compatibles, la mayoría de los cuales solo saldrán a la luz cuando sus páginas se vuelvan dinámicas. Use jQu3ry para mejorar el diseño y agregar en su interfaz, etc...

• Amplíe esto con declaraciones de medios y podría probar un valor css único para esos dispositivos, ahora tendrá más conocimiento para ajustar el diseño (es decir, destruir esas columnas y reducir esas imágenes). Desactivar animaciones y así sucesivamente.

• Manténgalo accesible siempre usando etiquetas de texto y algunos trucos de posicionamiento para hacerlos desaparecer si usted debe Sr. chico menú llamativo... simplemente no confíe solo en imágenes o Javascript para navegar por sus sitios.

• Es bastante fácil bloquear cualquier cosa por debajo de Netsc @ pe 4. Dándoles solo la Web básica, la forma en que estaba destinado a ser originalmente. Es decir, ni siquiera especificar un fondo o color, o fuente o cualquier cosa para ellos. Los valores predeterminados del navegador deberían funcionar bien. La información será accesible.

De hecho, propongo que todos los navegadores "accesibles" se identifican como N 4 4 para que podamos eliminarlos fácilmente de la presentación dinámica y evitar atornillar a los discapacitados.

Por desgracia, era un buen barco, pero incluso un buen barco para asustar a los que siempre yacen fuera de M must debe morir. No temas porque ahora tenemos uno aún mejor;)

Sólo mis 2 centavos, aplicar con precaución.

¿Qué tiene de malo detectar el lado del servidor del navegador? Parece muy efectivo e infalible (excepto para que el usuario altere su cadena user-agent). Puede usar PHP para elegir la hoja de estilos para una página o generarla dinámicamente para cada solicitud, no estoy seguro de si otros lenguajes le permiten imprimir directamente al archivo y establecer los encabezados manualmente, pero no puedo imaginarme que no le permitan identificar el agente de usuario, por lo que una de estas opciones es probablemente viable para cualquier servidor ambiente.

Los hacks siempre se sumarán a sus esfuerzos de trabajo y los esfuerzos de trabajo deben optimizarse

Primero agrega los hacks y luego comienza a preocuparse por cómo se comportan en diferentes navegadores y diferentes máquinas.

En su lugar, puede confiar en las extensiones CSS específicas del proveedor http://reference.sitepoint.com/css/vendorspecific

[Mi enfoque] [1] usando una clase PHP para detectar el sistema operativo, el navegador y la versión del navegador.

[1]: Mi enfoque usando una clase PHP para detectar el sistema operativo, el navegador y la versión del navegador http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach /

Personalmente, he encontrado que esto es bastante lento para encontrar todos estos hacks y probarlos; cada cambio que haces tienes que probar en 4+ navegadores para asegurarse de que no rompió nada más.

No debería tener que probar los hacks CSS 'adecuados' en todos los navegadores.

La idea es que escriba código que cumpla con los estándares, y luego agregue hacks específicos para apuntar a un solo navegador (o motor de renderizado) que cometa un error. Por ejemplo, escribir " * html # myelement " para apuntar a una excepción solo para IE6: ningún otro navegador se verá afectado por ese hack, por lo que no hay necesidad de probarlo exhaustivamente. Solo podría salir mal si algún nuevo navegador oscuro apareció y cometió exactamente el mismo error que IE6, lo cual es extremadamente improbable, no es su culpa, y algo que podría esperar que se arregle rápidamente.

Hay algunas cosas que se llaman hacks CSS pero que usan construcciones no válidas, como el hack "_propertyname". Esto puede romperse a través de navegadores porque cuando se utiliza código no válido cada navegador podría interpretarlo de manera diferente. No uses esto.

Para ser honesto, en cualquier caso no es el tema que una vez fue, principalmente porque IE5 está muerto. Si utiliza un doctype de Modo Estándar y escribe en los estándares, funcionará principalmente en la ronda actual de navegadores. El único problema real restante es IE6, que puede apuntar con "* html"; es poco probable que necesite mucho más en el camino de los hacks CSS que eso. Los días de el Hack Modelo de Caja son, afortunadamente, terminado.

¡Escucha tu código! Kent Beck lo dice. Y en Wing-Tsun dicen: ¡sé como el agua que se dobla! O algo así.

Mira, aquí hay un Hack CSS para que IE5 entienda html5: http://blog.whatwg.org/styling-ie-noscript .

Y aquí está lo mismo usando JS: http://blog.whatwg.org/supporting-new-elements-in-ie .

Comparar 5 páginas de explicación hack con 5 líneas de código bien comprensible. Entonces, usa JS.

Las cosas tienen sus beneficios y sus desventaja. Y su comprensión de la materia y la elegancia del código real lideran el camino.

Los hacks CSS no son el camino a seguir porque los navegadores se actualizan todo el tiempo, y las nuevas actualizaciones pueden romper sus hacks, mientras que con la detección del navegador Javascript, puede confirmar con precisión las capacidades del navegador. Sin embargo, otra opción es usar CSS mínimo para asegurarse de que todo funciona en todas las situaciones. jQuery y otras bibliotecas javascript que son para la interfaz de usuario han incorporado la detección en cuanto a las capacidades de los navegadores, por lo que debe comprobar hacia fuera.