Tip: Agregar hojas de estilo condicionales a un tema de Omega

En lo personal, Omega es el mejor tema de Drupal con el que he trabajado y lo utilizamos en nuestros proyectos. Es un tema bastante completo con funcionalidades interesantes, entre las que destacan:

• Basado en 960 Grid System: Una estructura flexible para el diseño de páginas web.
• 12, 16 y 24 columnas: Para ajustarse a las distintas necesidades de diseño.
• Responsive Design: Usando la propiedad @media, lo que permite que el sitio se adapte a diferentes tamaños de pantalla.
• Basado en HTML5: Con soporte para navegadores antiguos.
• Clases Push/Pull: Para manejar la posición de bloques y zonas.
• Integrado con el módulo Delta: Para la gestión de regiones dinámicas.
• Configuración granular: Permite personalizar cada región y zona de forma independiente.

Problema con Internet Explorer 6 y 7

Mientras trabajaba en un sitio, me topé con un error que solo aparecía en Internet Explorer 6 y 7. ¡Oh, qué sorpresa! (Insertar sarcasmo). Fue entonces cuando decidí investigar cómo utilizar CSS condicionales para solucionar el problema.

¿Qué son los CSS Condicionales?

Los CSS condicionales son hojas de estilo que se cargan específicamente para determinados navegadores, generalmente Internet Explorer. Esto es útil cuando necesitas que ciertos estilos se apliquen solo en versiones antiguas de un navegador o en condiciones particulares.

Para quienes no están familiarizados con el concepto, aquí les dejo algunos enlaces para profundizar más sobre este tema:

• Comentarios condicionales, filtros y hacks - Español
• How To Create an IE-Only Stylesheet - Inglés

El Problema con Omega y los CSS Condicionales

Aunque existe un módulo llamado Conditional Styles que maneja fácilmente la inclusión de CSS condicionales, el tema Omega ya tiene su propia forma de manejar este tipo de CSS. Omega carga los archivos CSS condicionales antes de los archivos CSS principales, lo que causa que las declaraciones sean sobreescritas y no se apliquen correctamente.

Solución Propuesta

La solución resultó ser bastante sencilla: para que los estilos condicionales se carguen de forma adecuada, solo es necesario agregar una función en el archivo template.php de nuestro tema y crear los respectivos archivos CSS en la carpeta /css. A continuación, les dejo el código que utilicé:

Con esto, los estilos condicionales se aplicarán correctamente en las versiones de Internet Explorer que especifiquemos.

Conclusión

Espero que esta solución les sea útil. Si tienen alguna duda, no duden en escribirla en los comentarios, y con gusto les responderé.

Todo el crédito a minneapolisdan, quien encontró esta solución.

Fuente: Condicional Styles Get Rendered Before Omega CSS - Drupal.org

Te recomendamos este video