¿El buen diseño de CSS y el soporte para IE6/IE7 son mutuamente excluyentes?

Question

Como todo desarrollador web, suelo maldecir a los creadores de IE6 con muertes desagradables y prematuras al menos una vez a la semana.Sin embargo, mi empresa me exige que siga brindando soporte al navegador más odiado.

Mi problema hoy ha sido querer usar primero un comodín en mi CSS y luego intentar usar la propiedad "heredar".Ninguno de los cuales es compatible con IE7-.

Realmente, REALMENTE quiero tener CSS (CSS orientado a objetos, si te gusta esa palabra de moda) bueno, bien estructurado y que herede adecuadamente, pero tengo esa sensación de hundimiento en la boca del estómago de que, tarde o temprano, va a tener ser clases personalizadas y basadas en la ubicación.

Esto plantea la pregunta:Dado lo terrible que es IE al manejar muchos conceptos de CSS, ¿es imposible soportar adecuadamente este navegador al mismo tiempo que se tiene un documento CSS bien estructurado?

Solo para aclarar:Soy consciente de que hay muchas formas (algunas legítimas, otras no tanto) de solucionar los errores y deficiencias encontradas en IE6 y 7.Lo que realmente pregunto es "si desea tener una hoja de estilo única y bien escrita que se herede correctamente, ¿debe elegir entre eso y tener una apariencia consistente en todos los navegadores?".Espero que tenga sentido.

En otras palabras, ¿debería ceñirme a mis principios y codificar una buena hoja de estilo o debería aceptar que IE6 todavía disfruta de una cuota de mercado terriblemente alta (20% según el último recuento) y animarme a apoyarlo?¿O existe algún término medio que me permita minimizar la cirugía frankenstein en mi HTML y CSS y al mismo tiempo lograr algunos resultados respetables en IE?

Answer 1

Para ser justos, no se puede culpar de todo a IE (aunque Microsoft ciertamente es, con diferencia, el peor transgresor).Parte del problema con estándares tan grandes y que evolucionan rápidamente es que son un objetivo demasiado móvil para implementarse perfectamente en el momento oportuno.Desafortunadamente, los ciclos de lanzamiento de los navegadores web no coinciden con el lanzamiento de nuevas especificaciones web.Así que todo lo que los desarrolladores de navegadores pueden hacer es intentar implementar tantas funciones como puedan a partir de las últimas recomendaciones del W3C, seleccionando qué ellos piensan serán las características más utilizadas para implementar primero.

Sin embargo, las cosas están mejorando claramente y es Es posible admitir IE6/7 y seguir utilizando el diseño CSS adecuado.Es solo...difícil.Echa un vistazo a esta comparación de motores de diseño y soporte CSS.Si observa la tendencia general, verá que la mayoría de los navegadores (incluso IE) tienden a cumplir con los estándares establecidos a largo plazo, solo que a algunos navegadores les lleva más tiempo que a otros implementar un estándar después de su introducción.

Y a veces no es que un navegador sea "menos" compatible con los estándares que otro.Con los nuevos estándares, el problema suele ser que diferentes equipos de desarrollo optan por adoptar partes diferentes de la nueva especificación.Entonces, aunque CSS3 ya está comenzando a ser implementado en la mayoría de los navegadores, probablemente tendremos que esperar hasta que se publique CSS4 antes de ver un soporte consistente en los principales motores de renderizado.Y si intenta utilizar las últimas funciones de CSS3 en este momento, le resultará difícil establecer la compatibilidad entre los principales navegadores.Pero si utiliza funciones introducidas en CSS1, no hay ningún problema.

Por lo tanto, la única opción (aparte de utilizar desagradables trucos de CSS) es seguir con herramientas bien establecidas. más viejo especificaciones.Entonces el problema ya no es intentar ajustarse a los estándares web y al mismo tiempo ser compatible con un navegador en particular.En cambio, el problema simplemente se vuelve tratando de resistir la tentación de utilizar las últimas y mejores funciones de CSS.

Aparte de eso, la única solución permanente que veo para esta situación recurrente es que el W3C priorizar diferentes partes de las especificaciones recientemente introducidas para que las nuevas funciones puedan implementarse en fases discretas sincronizadas en todos los navegadores principales.Así, por ejemplo, se podría dar la máxima prioridad a las reglas gramaticales junto con un plazo establecido para su implementación.Después de eso vendría la segunda fase, que podría ser selectores de elementos y atributos, y así sucesivamente.

Esto requeriría un enorme nivel de cooperación entre el W3C y los equipos de desarrollo, pero valdría la pena.Después de todo, a los usuarios y desarrolladores web no les sirve de nada que IE implemente un subconjunto de características de CSS3 mientras que Firefox implementa un subconjunto diferente y los navegadores Webkit otro subconjunto más.Un "estándar" no sirve hasta que realmente se estandarizado en todas las principales plataformas de renderizado. Es mejor que cada navegador admita menos funciones nuevas, pero que todas estén las mismas características, que introducir por separado un montón de características propias que no son universalmente compatibles.

Answer 2

No, en absoluto - se puede compensar las deficiencias de IE con comentarios condicionales y una hoja de estilo específica IE, mientras que atiende a su 'agradable' hoja de estilo para otros navegadores.

Otra cosa que me parece ayuda es utilizar un CSS reinicio . Si bien esto no va a resolver todos los problemas de IE, que le da una buena base para trabajar.

Answer 3

El IE6 más molestas característica es que el manejo de la caja modelo. Debe ajustarse a margen lugar al colocar las cajas, y tratar de utilizar tamaños de fuente relativos para permitir el cambio de tamaño de fuente en IE. El resto de las peculiaridades son bien documentado .

comentarios condicionales es la manera más limpia de tener tanto una hoja de estilo limpio para así comportarse navegadores, y sigue utilizando ser bella en IE. Esto es lo que yo uso, que sólo necesitan de archivos 1 css de unas pocas líneas para reparar mis sitios apariencia.

El oscuro camino de crossbrowser aspecto coherente y sensación son hacks CSS , pero desaconsejan su uso, especialmente ahora que desde hace algún tiempo que tendremos que apuntar a tres diferentes IE (6, 7 y 8)

Normalmente, si se obtiene el estilo de trabajar tanto en FF y Chrome / Safari, IE es sólo unas pocas correcciones lejos de ser correcta.

Answer 4

No es un gran sitio Posición es todo que detalla cómo FF, IE y Safari son conformes a estándar CSS . En el sitio se encuentra la mayoría de las soluciones / curas para IE que alivien la necesidad de que usted pueda escribir tanto código condicional para su CSS.

También querrá echa un vistazo a A List Apart para más información sobre CSS y el IE. También hay grandes artículos sobre diseño sin tablas con CSS, el manejo del insecto de altura en el IE, etc Buena suerte - IE 6 es una mierda cuando se trata de CSS

.

Answer 5

Ciertamente no.Si se asegura de que muestren la página en modo "estándar" en lugar de modo "peculiar", muchos de los problemas comunes de IE CSS se resuelven.Para hacer esto, debe proporcionar una declaración de tipo de documento válida en la parte superior de la página, como

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Como otros han señalado, otra buena idea es comenzar su hoja de estilo con un fragmento que elimine todos los rellenos y márgenes como este:

*,html {
margin: 0;
padding: 0;
}

Finalmente, un problema común con los diseños basados ​​en CSS en IE es que la eliminación de los elementos flotantes no ocurre cuando se espera.Esto tiene que ver con una propiedad de objeto oculto en IE llamada "hasLayout";sólo los objetos que "tienen diseño" se envolverán y encerrarán correctamente los objetos secundarios flotantes.Es fácil asegurarse de que sus contenedores "tengan un diseño" simplemente especificando al menos una dimensión para ellos:

height: 1%;
width: 100%;
zoom: 1;

Personalmente no uso hojas de estilo condicionales de IE excepto por una sola cosa:para reemplazar fondos PNG con GIF en IE < 7; no hay nada de malo en usarlos, simplemente encuentro que complica innecesariamente las cosas cuando tienes que definir la apariencia del mismo objeto en dos lugares diferentes.Con los tres consejos anteriores y un poco de paciencia, deberías poder crear diseños basados ​​en CSS utilizando una única hoja de estilo que se represente tan bien en IE 6/7 como en Mozilla/Webkit.

¡Feliz codificación!

Answer 6

IE 6 realmente limita lo que podemos hacer.

Es la falta de apoyo para los selectores avanzados (y heredar - IE 7 no admite que sea) que me pone. Sólo tener el selector de niños y selectores de atributos sería bueno, eso sería realmente reducir la cantidad de código que tenemos que escribir y mantener. Sólo se puede evitar la falta de apoyo para ellos mediante la duplicación de sus estilos, por lo que sólo al final tener que código como si no existieran.

suspiro.

Answer 7

Sólo seguir tutoriales CSS en línea que se representa correctamente con IE6 y Chrome (o Webkit). Si se ve bien en tanto, es probable que se ve bien en (casi) todos los navegadores.