Explicación detallada de la mejora progresiva de CSS (Cascading Style Sheets)

Hay muchas formas de incorporar mejoras progresivas en su trabajo con hojas de estilo en cascada (CSS). Este artículo analizará algunas de las más exitosas y considerará otras formas de mejorar gradualmente su sitio.

Organización de hojas de estilo

Muchos diseñadores y desarrolladores web no piensan mucho en cómo introducir hojas de estilo en los documentos, pero en realidad es un arte. Con el enfoque correcto, podrá obtener de inmediato los numerosos beneficios de la mejora progresiva.

Utilice varias hojas de estilo

Dividir un poco tus estilos puede traer muchos beneficios. Obviamente, una hoja de estilo con más de 1500 líneas es un poco difícil de mantener y dividirla en varias hojas de estilo puede mejorar el flujo de trabajo (y ahorrarle esfuerzo). Hay otro beneficio que rara vez se menciona: ayuda a obtener efectos de presentación más consistentes en el tipo de medio de destino (Traducción: se refiere a varios tipos de medios como computadoras, impresoras, televisores, teléfonos móviles, etc.).

El archivo main.css contiene todas las reglas de estilo del sitio. Considere dividirlo en hojas de estilo independientes que contengan tipografía, diseño y color, con el nombre correspondiente: tipo.css, diseño.css, color.css.


(Ilustración: Cómo dividir una única hoja de estilo en varias hojas de estilo relacionadas)

Una vez que se completa la separación anterior, puede utilizar algunos trucos mágicos para proporcionar automáticamente una experiencia de "baja fidelidad" para navegadores obsoletos (como IE5/Mac) y muchos navegadores que carecen de un soporte sólido para el diseño CSS. ¿Cómo hacerlo? Todo depende de cómo importes el archivo. Supongamos que main.css se introduce a través del elemento de enlace:


Primero, divida la línea de referencia anterior en tres hojas de estilo relacionadas:


En el pasado, muchos desarrolladores establecían el valor del medio en "pantalla" o "proyección", lo que hacía que el estilo de diseño fuera completamente inválido en Netscape 4.x (Anotación: Netscape 4.x no admite diseños complejos como flotación y posicionamiento). Sin embargo, hay una solución mejor. Antes de explicar este método en detalle, echemos un vistazo a los tipos de medios alternativos.

Tipos de medios opcionales

La mejora progresiva se centra principalmente en el contenido y queremos brindar una experiencia "mejorada" a todos los dispositivos que admiten la visualización de contenido. Por eso es importante considerar dispositivos más allá del navegador, como los dispositivos móviles y de impresión.

Desafortunadamente, el mercado de dispositivos móviles todavía está fragmentado e inmaduro (no sea ingenuo al pensar que todos los navegadores portátiles mostrarán estilos de tipos de medios dirigidos a "pantalla"). Como resultado, una discusión detallada sobre la mejora progresiva en todos los medios ocuparía muchas páginas, si no un libro. Pero no desesperes: en el mundo móvil, las diferencias están empezando a unificarse y algunas personas muy inteligentes están empezando a reunir recursos para ayudarnos a desarrollarnos. Sin embargo, para ahorrar tiempo y esfuerzo, nos centraremos en los dispositivos de impresión.

Por lo general, necesitamos usar otro elemento de enlace para agregar estilos de impresión:


Por convención, la hoja de estilos anterior contiene todas las reglas relacionadas con la impresión, incluidas las reglas de diseño y color. Especialmente para el diseño, es probable que la mayoría de las reglas de la hoja de estilo se copien de main.css. En otras palabras, esto genera una gran cantidad de código duplicado.

Puede ver el beneficio de dividir los estilos de publicación y color de los estilos de diseño: ya no necesitamos esas reglas repetidas en la hoja de estilos de impresión. Además de esto, se puede utilizar otro consejo organizativo para mejorar la usabilidad del sitio, así como para ocultar ciertos estilos de diseño a los navegadores problemáticos.

Volviendo a nuestra hoja de estilo, considere el siguiente código:


No declaramos un tipo de medio, por lo que Netscape 4.x leerá todos los estilos en estos tres archivos. Sin embargo, el navegador Netscape comprende CSS básico y podemos aprovecharlo. Podemos organizar aún más nuestros estilos moviendo todos los estilos contenidos en layout.css a una nueva hoja de estilos, apropiadamente llamada screen.css. Finalmente, actualice el contenido en layout.css para importar screen.css, de modo que NS4.x y sus navegadores hermanos ya no sean inteligentes (porque no comprenden la directiva @import). (Nota de traducción: de lo que está hablando el autor aquí es de mover todo el contenido de layout.css a screen.css y luego introducir screen.css a través de @import en layout.css. Creo que la mejor manera es agregarlo a layout.css Mantenga los estilos de diseño más básicos que también puedan ser entendidos por NS4.x y mueva otros estilos de diseño avanzados a screen.css).


Hay margen de mejora: los medios a los que se debe declarar la hoja de estilo, lo cual hacemos agregando el tipo de medio a la declaración @import:


El problema es que los navegadores IE7 e inferiores no comprenden esta sintaxis y, por lo tanto, ignoran la hoja de estilo anterior. Si desea proporcionar la hoja de estilo anterior a estos navegadores (lo que a menudo se desea), puede hacerlo fácilmente usando comentarios condicionales, lo cual. Se elabora a continuación. Si tiene un ojo tan agudo como el de un águila, es posible que haya notado que se utilizan comillas simples (') en lugar de comillas dobles (") en ambos lados del nombre de la hoja de estilo. Este pequeño truco permite que IE5/Mac ignore el estilo. Las capacidades de diseño CSS de IE5/Mac son muy débiles (especialmente el soporte para flotación y posicionamiento) y es perfectamente aceptable ocultarles las reglas de diseño. Después de todo, aún pueden obtener información de color y diseño, lo cual es suficiente en algunos casos. .

Usando la misma técnica, puede importar el archivo print.css (que, como puede imaginar, contiene reglas específicas para el diseño de impresión).


Ahora no sólo tenemos una hoja de estilo bellamente organizada, sino que también tenemos un método efectivo para mejorar gradualmente el diseño de su sitio.


(Ilustración de cómo se relacionan varias hojas de estilo entre sí y cómo aplicarlas a un documento)

¿Cómo lidiar con IE6?

Para mucha gente, Internet Explorer 6 es el nuevo Netscape 4 y todos quieren que desaparezca.

Dejemos de insistir en los problemas de IE6. Los problemas con IE6 están bien documentados y, sinceramente, no son tan difíciles de solucionar. Además, la adopción de IE7 es bastante rápida (especialmente en el mercado de consumo) e IE8 ya se encuentra en versión beta pública. Esto significa que algún día realmente podremos decir adiós al antiguo IE6.

Ya sea intencionadamente o no, cuando Microsoft lanzó IE5, proporcionó una buena herramienta para la mejora progresiva: los comentarios condicionales. Estos ingeniosos fragmentos de lógica (relegados a comentarios HTML en todos los demás navegadores) no solo permiten que ciertos fragmentos de código de marcado funcionen solo para IE, sino que también permiten que estos fragmentos de código solo funcionen en versiones específicas de IE.

Como desarrolladores conscientes de los estándares web, siempre debemos probar primero nuestros diseños en la mayoría de los navegadores existentes que cumplen con los estándares y luego proporcionar parches para aquellos navegadores que puedan volver a funcionar con cambios menores. El flujo de trabajo de cada persona es diferente, pero creo que es mejor comenzar cada proyecto con un conjunto estándar de documentos. Mi suite básica incluye los siguientes archivos:


Luego, según las necesidades del proyecto, agregue archivos CSS específicos del navegador para incluir esas "modificaciones menores". En la mayoría de los proyectos actuales, estos archivos son ie7.css e ie6.css. Si el proyecto requiere soporte para versiones anteriores a IE6, también crearé los archivos correspondientes (como ie5.5.css, etc.). Con estos archivos en su lugar, comencé a agregar reglas de estilo a las hojas de estilo apropiadas.

Empiezo mis pruebas de CSS en Mozilla Firefox porque la mayor parte de mi CSS está escrito usando la barra lateral del editor CSS de Firefox. Una vez que terminé de diseñar la página en Firefox, inmediatamente abrí otro navegador para probarla y verla. La mayoría funciona perfectamente porque cumplen con los estándares web. Luego abra IE7 para probar. En la mayoría de los casos, no hay muchos problemas. Ocasionalmente, es necesario activar hasLayout o corregir otros errores de diseño menores. En lugar de escribir estas correcciones en el archivo de hoja de estilo de la suite base, las agregué a ie7.css y las introduje mediante comentarios condicionales en el HEAD del documento:


Los comentarios condicionales anteriores permiten que IE7 y versiones inferiores (Nota de traducción: lte es la abreviatura de menor o igual) reconozca el estilo introducido. Por tanto, al navegar por la página con IE7 se obtendrán estos parches. Pero si está utilizando una nueva versión de IE, que puede haber solucionado estos problemas, por ejemplo, IE8 abandonó hasLayout y ya no tiene estos problemas, estos estilos se ignorarán. Por otro lado, estos estilos se pueden obtener usando IE6. Esto es bueno porque los errores de renderizado en IE7 tienden a estar presentes también en IE6. Como se mencionó anteriormente, IE7 y las versiones inferiores no pueden entender @import con el tipo de medio. La introducción de screen.css de esta manera no es válida para IE7 y las versiones inferiores. Por lo tanto, también necesita agregar una declaración @import sin tipo de medio en la parte superior del archivo ie7.css para introducir screen.css.

Una vez que haya parcheado IE7, abriré IE6 y veré si necesito parchear algo. Si fuera necesario, agregaría otro comentario condicional al documento, importándolo a ie6.css:


Luego, simplemente agregue los parches requeridos por IE6 a las hojas de estilo correspondientes. Estas hojas de estilo serán ignoradas por IE7, pero aún afectarán a versiones como IE5.5.

Al utilizar comentarios condicionales de esta manera, puede administrar fácilmente los navegadores de destino en su proyecto y mantener los archivos de parche CSS independientes y gratuitos.

Otras consideraciones

La mejora progresiva de CSS no se limita a cómo asociar hojas de estilo con documentos, sino que también se puede aplicar a cómo escribir CSS.

Por ejemplo, considere el contenido generado. No es compatible con todos los navegadores, pero es una excelente manera de agregar algún diseño o texto adicional. Esto no es necesario para la usabilidad de la página, pero puede proporcionar algunas mejoras visuales o de otro tipo.

Tome un formulario de contacto simple como ejemplo:


(Ilustración: formulario HTML utilizado en este ejemplo (el código se proporcionará a continuación))

Al escribir el código HTML anterior, es probable que los dos puntos (:) se escriban naturalmente en el elemento de etiqueta. ¿Por qué hacer esto? ¿Realmente se agrega contenido al elemento de etiqueta? No precisamente. El propósito de esto es proporcionar pistas visuales adicionales al usuario. Para el elemento de etiqueta, es redundante y debe eliminarse:


Una forma más perfectamente adecuada es volver a agregar los dos puntos al documento generando contenido:


Escribir formularios de esta manera nos da flexibilidad: cuando necesitamos eliminar caracteres decorativos de todo el sitio, podemos simplemente editar el archivo CSS sin tener que buscar cada formulario (aunque una vez supimos dónde). Este truco también se degrada bien, porque sin los dos puntos el formulario no queda inutilizable, un gran ejemplo de mejora progresiva.

Tal vez haya descubierto que al usar selectores CSS avanzados (traducción: selector, también traducido como selector, pero creo que los selectores pueden reflejar mejor el significado original, como operador se traduce como operador en lugar de operador), puede cambiar un estilo específico Adjunto a navegadores más avanzados, esto ayuda a mejorar el sitio con el tiempo. Un buen ejemplo es el selector de atributos, que no se comprende (y por lo tanto se ignora) en IE6, sus contemporáneos y navegadores anteriores. Egor Kloos utilizó este concepto maravillosamente con su presentación titulada "Geminación" en CSS Zen Garden:


(Ilustración: Comparación de la representación del trabajo CSS Zen Garden de Egor Kloos ("Double Double") en navegadores estándar e IE6)

¿Cómo lo hizo? Aquí está el código de ejemplo ligeramente modificado:


La diferencia es obvia y es una hermosa ilustración de cómo se puede utilizar la mejora progresiva en CSS.

De manera similar, el sitio de Andy Clarke tiene algunas curiosidades sobre IE6. Al utilizar los filtros de IE y agregar algunas anotaciones condicionales, Andy logró eliminar todo el color del sitio y proporcionar algunas imágenes reemplazables que crean una experiencia verdaderamente "lo-fi".


(Ilustración: Comparación del sitio de Andy Clark en navegadores estándar e IE6)

La técnica gris en la imagen de arriba es la siguiente: en la hoja de estilo para IE6 (y siguientes) agregada por el comentario condicional, agregue la siguiente declaración:


Aunque los dos ejemplos anteriores pueden contener demasiadas técnicas que no se utilizan en el trabajo diario, hacen un gran trabajo al ilustrar el concepto de cómo aplicar la mejora progresiva de CSS en la práctica.

Resumir

Como hemos comentado, existen varias formas de aplicar mejoras progresivas de CSS a su sitio. La forma más sencilla, y probablemente la mejor, es organizar las hojas de estilo y pensar detenidamente cómo las vinculará al documento. Una vez que comprenda los comentarios condicionales, lidiar con problemas específicos de IE será pan comido. Si tiene una comprensión clara de cómo usar los selectores y los escenarios en los que se usan, puede realizar ajustes más detallados en CSS.

Armado con este conocimiento, estará en camino de convertirse en un experto en mejora progresiva.