only internet hack for css shim css-hack

internet - Hacks/fixes CSS aceptables



hack css internet explorer 11 (12)

Al definir las reglas, considero que es bueno permitir que ocurra la degradación natural, por ejemplo, en CSS3 hay soporte para los modelos RGBA Color, pero no está en CSS2, así que me encuentro haciendo lo siguiente:

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

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

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

Por ejemplo, zoom:1 es seguro, siempre y cuando solo se publique en IE, y recuerdes que está allí. El truco muy común de usar selectores de niños no es seguro porque IE7 los admite. Usar la height:1% simplemente se siente sucio (pero podría ser solo yo).

Sé de ie7-js , así que los errores IE6 no me preocupan demasiado. Además, no estoy buscando un debate religioso, solo fuentes.

Gracias por las respuestas. He seleccionado la que tiene mejores fuentes como respuesta.

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

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

Modificar su CSS para soporte específico del navegador nunca es incorrecto, siempre que pueda contenerlo fácilmente. Como notará, los navegadores compatibles con estándares, * tos * todo, excepto MSIE, nunca se romperán con lanzamientos futuros. Los nuevos estándares W3C tampoco rompen estándares previos, por lo general desaprueban o amplían estándares previos 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 las solicitudes entrantes para obtener el tipo y la versión del navegador del parámetro User-Agent. En base a eso, puede comenzar a cargar sus archivos CSS.

Creo que la forma en que la mayoría de nosotros lo hacemos es por:

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

Con respecto a las implementaciones de CSS específicas del navegador, generalmente agrupo todas las que están en mi archivo css principal (puede buscarlas fácilmente y reemplazarlas en un documento si es necesario). Entonces, si algo tiene que ser transparente, establecería opacidad y filtros (MSIE) en el mismo bloque. Los navegadores solo ignoran las implementaciones que no son compatibles, por lo que es seguro. Implementaciones específicas que tendería a evitar son implementaciones personalizadas (hey, me gusta el cuadro -moz sobre el W3C, pero simplemente no quiero confiar en él).

Al igual que sucede con la herencia y anulación de CSS, no es necesario redefinir todas las declaraciones y definiciones CSS en cada archivo CSS. Cada archivo CSS cargado consecutivamente solo debe contener el selector y las definiciones específicas requeridas para el arreglo, y nada más.

Con el final, terminas con tu (gran) archivo css principal y otros, que contienen algunas líneas cada uno, para soluciones de navegador específicas, que se resume en algo que no es tan difícil de mantener y realizar un seguimiento. Es una preferencia personal en qué navegador se basará su archivo base css, 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 momento). punto).

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

No hay tal cosa como un buen hack [css] limpio / aceptable: siempre codifique los estándares, y luego use las hojas de estilo específicas de la versión browser + para los hacks necesarios 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 lanza 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 rastreo de agente de usuario para otros navegadores).

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

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

Subrayar hack para IE6-cosas funciona bastante bien, por ejemplo.

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

No es necesario mover las cosas fuera de contexto a nuevos archivos css, solo IE6 los obtiene y son fáciles de filtrar si decides dejar de soportar IE6. También son muy mínimos y no saturarán mucho tu CSS.

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

No creo que encuentres una lista de piratas informáticos que sea una prueba de futuro, ya que uno sabe qué estúpido será implementado en IE a continuación.

Nicole Sullivan (también conocida como Stubbornella ), que trabaja para el equipo de Yahoo Performance, sugirió en The 7 Habits for Exceptional Perf que deberías usar el CSS underscore para corregir fallos de IE6 porque:

  • Los hacks deben ser pocos y distantes.
  • Si solo tiene 5-6 hacks (que ya son muchos), entonces no tendría sentido colocarlos en un archivo externo y separarlo de su contexto.
  • Un archivo adicional daría lugar a sanciones de rendimiento ( Mejores prácticas de Yahoo, Regla 1 ).

Sin embargo, se debe tener en cuenta que este no es un CSS válido.

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

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; } }