CSS aceptables hacks / arreglos

Question

¿Existe una lista de 'buenos' hacks CSS limpios, que seguramente serán a prueba de futuro?

Por ejemplo, zoom:1 es seguro, siempre que solo se sirva a IE, y recuerde que está allí. El truco muy común del uso de selectores secundarios es no seguro porque IE7 los admite. Usar height:1% simplemente se siente sucio (pero eso podría ser solo yo).

Sé de ie7-js , por lo que los errores de IE6 no se preocupan yo mucho Además, no estoy buscando un debate religioso, solo fuentes.

---

Gracias por las respuestas. Seleccioné la que tiene las mejores fuentes como respuesta.

Gracias también por las sugerencias para usar archivos CSS separados, o no preocuparse por ello. Estoy totalmente de acuerdo con usted, y para mí, esos son dados. Pero cuando me enfrento a un problema de diseño, quiero una solución segura que minimice el riesgo de que tenga que volver a visitar el problema en $ IE o $ FF + 1. Lo siento, no lo hice más claro.

Answer 1

Este es un buen lugar para errores de navegador bien documentados y probados y los hacks le permiten solucionarlos:

http://www.positioniseverything.net/

Answer 2

Para la mayoría de los errores de IE, creo que es mejor usar comentarios condicionales alrededor un enlace a una hoja de estilo específica del navegador. Tiende a mantener las cosas bastante ordenadas y es bastante autodocumentado.

Answer 3

He usado " QuirksMode " de Peter-Paul Koch. sitio web mucho para problemas relacionados con CSS y compatibilidad entre navegadores Tiende a fruncir el ceño ante los métodos específicos del navegador, pero tiene una página en CSS Hacks .

Answer 4

Nicole Sullivan (AKA Stubbornella ) que trabaja para Yahoo El equipo de rendimiento sugirió en Los 7 hábitos para un rendimiento excepcional que debe usar el CSS subrayar hack para parchear errores de IE6 porque:

• Los hacks deben ser pocos y distantes entre sí.
• Si solo tiene 5-6 hacks (que ya es suficiente), entonces no tendría sentido colocarlos en un archivo externo y así separarlo de su contexto.
• Un archivo adicional generaría penalizaciones de rendimiento ( Mejores prácticas de Yahoo, Regla 1 ).

Sin embargo, debe tenerse en cuenta que esto no es CSS válido.

Answer 5

No existe un buen truco limpio / aceptable [css]: codifique siempre según los Estándares, y luego use hojas de estilo específicas del navegador + versión para cualquier truco necesario para que las cosas funcionen.

Por ejemplo:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
etc

Luego, cuando se publique una nueva versión de un navegador, copie los hacks de la versión anterior y elimine los bits que ya no se aplican (y agregue nuevos bits, si es necesario).

(Cargue hojas de estilo individuales usando Comentarios condicionales para IE, y la búsqueda de agentes de usuario para otros navegadores).

Answer 6

Underscore-hack para IE6-stuff funciona bastante bien, por ejemplo.

min-height:50px;
_height:50px;

No requiere mover elementos fuera de contexto a nuevos archivos css, solo IE6 los obtiene y son fáciles de filtrar si decide dejar de admitir IE6. También son muy mínimos y no saturarán demasiado tu CSS.

Answer 7

Modificar su CSS para soporte específico del navegador nunca está mal, siempre y cuando pueda contenerlo fácilmente. Como notarás, los navegadores que cumplen con los estándares, * tos * todo excepto MSIE, nunca se romperán con futuras versiones. Los nuevos estándares del W3C tampoco rompen los estándares anteriores, por lo general, desaprueban o extienden los estándares anteriores como máximo.

La gente ha mencionado comentarios condicionales que son excelentes para manejar IE. Pero necesitará un poco más para manejar todos los navegadores (dispositivos móviles, gecko, webkit, opera, etc.). Por lo general, analizará los encabezados de solicitud entrantes para obtener el tipo y la versión del navegador desde el parámetro User-Agent. Basado en eso, puede comenzar a cargar sus archivos CSS.

Creo que la mayoría de nosotros lo hacemos:

• Primero desarrollo para un navegador compatible con los estándares (tomemos FF por ejemplo)
• Una vez que el CSS está completo, se acerca al soporte de providig para IE (esto se puede hacer fácilmente con los comentarios condicionales, como se mencionó anteriormente)
  • Primero cree un archivo CSS que ajustará todo para IE6 y cualquier otra versión a continuación
  • Luego crea un archivo CSS que manejará todo para IE7
  • Por último, cree un archivo CSS que maneje todo para las versiones IE de IE8 y superiores
    • Una vez que salga IE9, asegúrese de configurar el manejo de IE8 + en IE8 específico, y cree un archivo CSS IE9 + con las correcciones necesarias
• Finalmente, cree un archivo CSS adicional para las correcciones de webkit
  • Si es necesario, también puede crear archivos adicionales para dirigirse específicamente a Chrome o Safari si es necesario

Con respecto a las implementaciones CSS específicas del navegador, generalmente agrupo a todos en mi archivo css principal (puede buscarlos fácilmente y reemplazarlos en un documento si es necesario). Entonces, si algo tiene que ser transparente, establecería tanto la opacidad como los filtros (MSIE) en el mismo bloque. Los navegadores simplemente ignoran las implementaciones que no admiten, por lo que está a salvo. Las implementaciones específicas que tienden a evitar son implementaciones personalizadas (hey, me gusta el cuadro -moz arriba del W3C, pero simplemente no quiero confiar en él).

Como sucede con la herencia y anulación de CSS, no tiene que redefinir todas las declaraciones y definiciones de CSS en cada archivo CSS. Cada archivo CSS cargado de forma consecutiva debe solo contener el selector y las definiciones específicas necesarias para la corrección, y nada más.

Al final, termina con su archivo css principal (enorme) y otros, que contienen algunas líneas cada uno, para soluciones específicas del navegador, lo que resume algo que no es tan difícil de mantener y rastrear. Es una preferencia personal en qué navegador se basará su archivo css base, pero generalmente se dirigirá a un navegador que creará la menor cantidad de problemas para otros navegadores (así que sí, desarrollar para IE6 sería una decisión muy mala en ese sentido punto).

Como siempre, seguir las buenas prácticas y ser pragmático y meticuloso con los selectores y los detalles sobre cada clase y el uso de frameworks lo guiarán por el camino de la bondad con raramente arreglos necesarios. Estructurar sus archivos CSS es una gran ventaja a menos que desee terminar con un desorden sin sentido desordenado.

Answer 8

Centricle tiene una buena lista de hacks CSS y sus compatibilidades.

No creo que encuentre una lista de hacks que serán a prueba de futuro, ya que se puede saber qué estúpido se implementará en IE a continuación.

Answer 9

Este artículo es un buen resumen de los hacks CSS: http://www.webdevout.net/css -hacks

Answer 10

Aquí hay una buena lista de filtros que son muy estables:

/* Opera */
.dude:read-only { color: green; } 

/* IE6/IE7 */
@media, 
  { 
  .dude { color: silver;} 
  }

/* IE8  \0 */
@media all\0 
  { 
  .dude { color: brown; } 
  }

/* IE9 monochrome and \9 */
@media all and (monochrome: 0) 
  { 
  .dude { color: pink\9; } 
  }

/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
    /* 
    * > /**/ 
    /* hides from IE7; remove if unneeded */


/* Firefox */
@-moz-document url-prefix() 
  { 
  .dude { color: green; }
  }

Answer 11

Al definir reglas, me parece bueno permitir que tenga lugar una degradación natural, por ejemplo, en CSS3 hay soporte para modelos de color RGBA, pero no hay en CSS2, así que me encuentro haciendo:

 background-color: #FF0000; 
 background-color: rgba( 255,0,0, 50% );

De modo que cuando la regla posterior falle en navegadores más antiguos que no lo admitan, se degradará al estilo previamente definido.

Answer 12

Prefiero la técnica comentario condicional global descrita por Hiroki Chalfant;

Me resulta útil mantener mis reglas orientadas a IE al lado de mis reglas orientadas a estándares en una sola hoja de estilo válida.