Excluir estilos CSS en Intenet Explorer 5 mediante @import

Hace poco tuve la necesidad de crear una página de la cual Internet Explorer 5 y toda la línea que le sigue de navegadores antiguos no leyera ningún estilo. De esta forma me aseguro de que todos estos navegadores con una cuota de mercado ínfima pueden acceder a todo el contenido y mi diseño no se ve horrible.

Basándome en el método explicado por NEO_JP aquí en Cristalab he utilizado un archivo principal que se encarga de hacer los imports del resto de CSS separados. Abreviando, creamos un archivo css llamado "global.css" que se alimentará de todos nuestros CSS así:

global.css

Código :

@import "null?\"\{";  
@import "code/layout.css";  
@import "code/print.css"; 
@import "code/tools.css";

Con la primera línea es como se consigue NO incluir a IE 4 y 5 en los estilos. Explico.

El primer '@import' es un dummy - está ahí simplemente para insertar el parseo '\"\{' el cual deja fuera los navegadores antiguos. Este es el mismo mecanismo que se usa en el boxmodelhack para selectivamente enviar instrucciones de estilos a los viejecitos. Con esto, los navegadores antiguos piensan que deben importar un CSS llamado null.css?\', el cual claro, está vacío. (note vacío significa que debes crear un null.css y llenarlo con un comment al menos).

Así es como lo interpretan (espacio en blanco reformado para la demostración):

Código :

 {  ";@import"  layout  .  css  ";

Al no tener selector, empieza con una cadena (en lugar de con una propiedad), y además tiene el '.', otra propiedad sin sentido de 'css' y termina con un string incompleto ';' notando así la falta de las últimas comillas dobles y con la carencia del último '}' para cerrar la declaración de propiedad.

Como resultado del proceso de filtración, las reglas de la actual hoja de estilos solo serán vistas por los siguientes:

• IE6/Windows o superior
  
• Netscape 6 o superior
  
• Opera 5 o superior

Bien, en mi caso yo tampoco quería que IE de Mac, 4 y 5 en Macintosh, 5 y 5.5 en MAC OS X además de NS4/Mac, interpretasen mis estilos principales, así que de forma especial, las reglas en layout.css están encapsuladas de la siguiente forma:

Código :

@media all {
 ...
 ...
 ...
}

Con esto ya consigo que muchos navegadores antiguos puedan luego visualizar un mensaje que muestre que el sitio web solo "está optimizado para IE 6 y navegadores modernos".

Quizás muchos quieran dedicar tiempo a la maquetación, coding del javascript y bugs tan frustrantes de IE 5 y sus hermanitos de la 'browser wars', pero creo que tiene que ser un caso especial o como extremo, que el cliente simplemente lo imponga sin atender a razones...

No hace falta mencionar a los condicionales IE, con ellos podemos hacer una maquetación muy básica para IE 5 como en www.w3c.org por ejemplo. Lo importante a pesar de los estilos es el acceso a la información a cuantas más personas mejor.

Fuentes:
http://centricle.com/ref/css/filters/
http://tantek.com/CSS/Examples/highpass.html

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.