todos solo porque para pagina navegadores navegador moz los diferente detectar chrome css css-hack javascript browser-detection

solo - ¿Qué es mejor: pirateos CSS o detección de navegadores?



safari css (15)

Comúnmente cuando miro alrededor de Internet, descubro que las personas generalmente usan hacks de CSS para hacer que su sitio web se vea igual en todos los navegadores. Personalmente, he descubierto que esto lleva bastante tiempo encontrar todos estos hacks y probarlos; Cada cambio que realice debe probarse en más de 4 navegadores para asegurarse de que no se rompa nada más.

Hace aproximadamente un año, busqué en Internet qué están usando otros sitios importantes (Yahoo, Google, BBC, etc.) y descubrí que la mayoría de ellos están realizando algún tipo de detección de navegadores (JS, HTML if statements, server based). Empecé a hacer esto también. En casi todos los sitios en los que he trabajado recientemente, utilizo jQuery, así que uso la detección de navegador integrada.

¿Hay alguna razón por la que usa o no usa ninguno de estos?

¿Hay alguna razón por la que usa o no usa ninguno de estos?

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

Lo que recomendaría:

Asegúrate de que tu código funcione en los navegadores compatibles con los estándares, es decir, desarrolla uno o dos de ellos y revisa browsershots.org después. Lo más probable es que sea posible implementar el resultado deseado en todos ellos con una hoja de estilo.

Luego, está el IE. Si solo hay algunos problemas, puede ir con un hack de CSS. De lo contrario, use comentarios condicionales.

Editar:

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

Personalmente, he descubierto que esto lleva bastante tiempo encontrar todos estos hacks y probarlos; Cada cambio que realice debe probarse en más de 4 navegadores para asegurarse de que no se rompa nada más.

No debería tener que probar hacks CSS "adecuados" en cada navegador.

La idea es escribir código que cumpla con los estándares, y luego agregar hacks específicos para apuntar a uno y solo un navegador (o motor de renderizado) que comete un error. Por ejemplo, escribiendo "* html #myelement" para apuntar a una excepción solo para IE6: ningún otro navegador se verá afectado por ese truco, por lo que no es necesario probarlo exhaustivamente. Solo podría salir mal si apareciera un nuevo navegador oscuro e hiciera exactamente el mismo error que IE6, que es extremadamente improbable, no es su culpa, y algo que podría solucionarse rápidamente.

Hay algunas cosas que se hacen llamar CSS piratas pero que usan construcciones inválidas, como el hack "_propertyname". Esto puede afectar a los navegadores, ya que cuando utiliza un código no válido, cada navegador puede interpretarlo de manera diferente. No los uses.

Para ser honesto, en cualquier caso no es el problema que alguna vez fue, principalmente porque IE5 está muerto. Si usa un tipo de documento de Estándares y escribe en los estándares, funcionará principalmente en la ronda actual de navegadores. El único caso de problema real restante es IE6, que puede orientar con "* html"; es poco probable que necesite mucho más en el camino de hacks de CSS que eso. Los días del Box Model Hack son, afortunadamente, terminado.

El problema es que solo tienes una oportunidad en el CSS (ya que es bastante contenido estático en el cliente) ... no puedes (fácilmente) adaptarlo para adaptarlo al momento sobre el cliente, por lo que para aquellos difíciles casos incompatibles (y hay demasiados), la detección es tristemente la mejor ruta. No puedo ver que esto cambie muy pronto.

Con javascript, a menudo puede evitar gran parte de este dolor a través de bibliotecas como (como usted dice) jQuery, y buscando soporte de funcionalidad en lugar de identificar el navegador específico (la mayoría de las veces). Hay algunos casos que necesita saber exactamente (el modelo de caja, por ejemplo).

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

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

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

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

Las cosas tienen sus beneficios y sus desventajas. Y su comprensión del asunto y la elegancia del código real marcan el camino.

Hay una tercera opción:

Minimice o elimine la necesidad de detectar navegadores y piratear CSS.

Intento usar elementos como los complementos de jQuery que se encargan de las diferencias de navegador (para widgets y similares). Esto no se ocupa de todo pero hace mucho y ha delegado el esfuerzo de apoyar navegadores múltiples a alguien que ha gastado y gastará mucho más esfuerzo de lo que puede o no puede permitirse.

Después de eso sigo estos principios:

  • Use lo que llamo CSS mínimo , lo que significa que solo usa funciones que son ampliamente compatibles;
  • Use tablas para el diseño complejo 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 navegadores de una década y será mucho menos esfuerzo que hacer que los divs funcionen con combinaciones de posicionamiento absoluto, flotante y similares;
  • Forzar IE6 en modo estricto en lugar de caprichos mediante la adición de un DOCTYPE . No puedo enfatizar cuánto más fácil será su vida, pero extrañamente mucha gente parece no hacerlo todavía;
  • Minimice los problemas del modelo de cuadro utilizando el DOCTYPE correcto o utilizando elementos de bloque anidados en lugar de los otros hacks del modelo de cuadro ; y
  • Si es necesario, incluya archivos CSS adicionales para 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 archivos IEfix.css.

Después de eso, divido navegadores en niveles:

Tier 1:

  • Firefox 3;
  • IE7.

Mi sitio web debe trabajar en estos.

El nivel 2:

  • Firefox 2;
  • Safari;
  • Ópera;
  • Cromo.

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

Nivel 3:

  • IE6;
  • Otros.

Se hará un mínimo esfuerzo para trabajar en estos a menos que sea, por ejemplo, un requisito de la compañía. IE6 es la pesadilla, pero su cuota de mercado en diciembre fue del 20% y se redujo rápidamente. Además, existen preocupaciones de seguridad válidas (en sitios web financieros, por ejemplo) para disuadir o incluso no permitir el uso de IE6 de manera que sitios como Paypal hayan bloqueado IE6 y Google les indique a los usuarios que eliminen IE6 .

Intento no usar ninguno de los dos. En muchos casos, los problemas que IE tienen se pueden evitar simplificando la estructura de su marcado.

También ayuda si utilizas un restablecimiento decente de CSS como el de Eric Meyer .

También estoy bajando lenta pero firmemente el soporte para IE6 como una 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 las personas y las preferencias del navegador si seguimos dando soporte a los navegadores maliciosos.

Los hacks son más rápidos para el navegador, pero la detección del navegador le da 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 los css diferentes en archivos separados o lo que sea, entonces usaría detección de navegador, ya que es algo que un novato puede entender, donde CSS piratea es difícil de entender si no los conoces

Por lo general, me gusta tener una hoja de estilo para navegadores compatibles con estándares como Firefox y Safari y luego utilizar comentarios condicionales para detectar Internet Explorer y mostrarle un archivo CSS adicional que contiene correcciones e invalidaciones específicas de IE.

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 compatible cruzado de manera predeterminada y solo usar eso.

Considere cuidadosamente todo lo anterior, especialmente los indicadores sobre doctype. Si debe aplicar un hack CSS, para un navegador específico, sepa que los hacks casi siempre se pueden evitar. Especialmente para una página seca y estática.

Hablando de una experiencia limitada en el desarrollo de estas cosas ... supongo que quieres hacer una página web elegante que parpadee sin el complicado programa de compra de Adoobi:

  • Codifique una página que se vea razonable en estos navegadores, todos los cuales se pueden probar en una sola máquina:

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

  • Usa la regla @import css para eliminar el CSS en navegadores antiguos y deja que coman pastel.

  • Utilice una combinación de detección de objetos y detección de navegadores para encontrar y eliminar buscadores de problemas (todas las versiones debajo del objetivo anterior). También atrape los navegadores antiguos que usted sabe que no son veloces (propiedad CSS que puede probar y comparar con el valor conocido) en caso de que pasen el sniffer, también use comentarios condicionales para expulsar 1E5 dándole un poco de anti-CSS a tranquilícelo en su camino, similar para ie6, excepto que consérvelo en la jQu3ry si es posible.

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

  • Use jQu3ry para resolver cualquier problema en los 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 su interfaz, etc.

  • Amplíe esto con las declaraciones de los medios y podría probar un valor CSS exclusivo para esos dispositivos, ahora tendrá más conocimientos para usar al ajustar el diseño (es decir, destruir esas columnas y reducir esas imágenes). Desactiva las animaciones, etc.

  • Manténgalo accesible usando siempre etiquetas de texto y algunos trucos de posicionamiento para hacer que desaparezcan si debe usar el tipo de menú llamativo del Sr. ... simplemente no confíe en imágenes o Javascript solo para navegar por sus sitios.

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

De hecho, muevo todos los navegadores "accesibles" a sí mismos como N $ 4 para que podamos eliminarlos fácilmente de la presentación dinámica y evitar molestar a los discapacitados.

Por desgracia, ella era una buena nave, pero incluso una buena nave para asustar a los siempre mentidos de M $ debe morir. No temas porque ahora tenemos uno aún mejor;)

Solo mis 2 centavos, aplique con precaución.

¿Qué hay de malo en detectar el lado del servidor del navegador? Parece muy eficaz e infalible (excepto para el usuario que altera su cadena de agente de usuario). Puede usar PHP para elegir la hoja de estilo de una página o generarla dinámicamente para cada solicitud; no estoy seguro si otros idiomas le permiten enviar directamente al archivo y le permiten configurar los encabezados manualmente, pero no puedo imaginar que no le permitan identifique el usuario-agente, por lo que una de estas opciones probablemente sea viable para cualquier entorno del lado del servidor.

Los hacks de CSS no son el camino a seguir, ya que los navegadores se actualizan todo el tiempo, y las nuevas actualizaciones pueden interrumpir sus ataques, mientras que con la detección del navegador de 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 esté funcionando en todas las situaciones. JQuery y otras bibliotecas de JavaScript que son para la interfaz de usuario tienen detección incorporada en cuanto a las capacidades de los navegadores, por lo que debe verificarlas.

los hacks siempre se sumarán a sus esfuerzos de trabajo y los esfuerzos de trabajo deberían 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 de CSS específicas del proveedor http://reference.sitepoint.com/css/vendorspecific

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

Como se señaló en otras respuestas, puede usar comentarios condicionales para mostrar hojas de estilo adicionales en IE (o para agregar una clase al elemento <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 the <html>`` element, if you don''t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from the <html>`` element, if you don''t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from the cadena de agente de usuario, están garantizados para funcionar.

En cuanto a los problemas de CSS no de IE, nunca encontré uno que valiera la pena detectar el navegador.