Usando selectores CSS3 avanzados en IE

No me malinterpretes, IE no admite selectores avanzados de CSS3, incluido el último IE8 (consulte "Compatibilidad del navegador con selectores de CSS" para obtener más detalles), pero los selectores de CSS son realmente muy útiles. Puede simplificar enormemente nuestro trabajo y mejorar nuestro código. La eficiencia nos facilita la creación de páginas altamente fáciles de mantener.

Sin embargo, el soporte de IE para selectores CSS avanzados, especialmente selectores CSS3, nos ha impedido promover la aplicación de selectores CSS. Sin embargo, aunque no podemos controlar la cuota de mercado de los navegadores, podemos mejorar nuestro trabajo mediante algunas tecnologías. También podemos utilizar otras tecnologías para permitir que IE admita selectores CSS3 disfrazados.

Keith Clark, un ingeniero de desarrollo web del Reino Unido, desarrolló una solución JavaScript para permitir que IE admita selectores CSS3. Este script admite varias versiones, desde IE5 a IE8.

uso

Sólo necesita descargar el script DOMAssistant de Robert Nyman y ie-css3.js e importarlos en la etiqueta head de su página, así:

<cabeza>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script tipo="text/javascript" src="ie-css3.js"></script>
</cabeza>

Selectores soportados

• enésimo niño
• enésimo-último-hijo
• enésimo de tipo
• enésimo último de tipo
• primer hijo
• último hijo
• hijo único
• primero de tipo
• último tipo
• único de tipo
• vacío

Algunas limitaciones de ie-css3

• Las hojas de estilo deben introducirse a través de la etiqueta <link>. Las hojas de estilo a nivel de página o las hojas de estilo en línea no tendrán ningún efecto. pero
• Puede utilizar @import en archivos de estilo externos para importar otros archivos de estilo;
• El archivo de la hoja de estilo debe colocarse bajo el mismo nombre de dominio que la página;
• Los archivos de estilo que utilizan la ruta file:// no funcionarán debido a problemas de seguridad del navegador;
• El selector :not() aún no es compatible;
• Este método no es dinámico. Cambiar el DOM después de aplicar el estilo no será válido.

¿Cómo funciona?

ie-css3.js descarga cada archivo de estilo para la página y analiza sus pseudoselectores CSS3. Si se encuentra un selector, se reemplaza con la clase CSS del mismo nombre. Por ejemplo: div:nth-child(2) se convertirá en div._iecss-nth-child-2. Luego, DOMAssistant de Robert Nyman se usa para encontrar el nodo DOM que coincide con el selector CSS3 del elemento y luego le agrega la clase CSS correspondiente.

Eventualmente, la hoja de estilo del elemento será reemplazada por la nueva versión y luego el estilo correspondiente se agregará al elemento correspondiente usando selectores CSS3.

Evite el intérprete CSS de IE

Según el W3C, un navegador debe ignorar las reglas CSS que no reconoce. Esto presenta un problema: necesitamos aprovechar los selectores CSS3 en el archivo de hoja de estilo, pero IE los descarta.

Para evitar este problema, cada archivo de estilo se descarga mediante XMLHttpRequest. Esto permite que el script omita el intérprete CSS integrado del navegador y pueda leer el archivo CSS sin formato.

• Visita la página de inicio del proyecto
• Descargar ie-css3.js
• Descargar DOMAAsistente

alternativa

Obviamente, esta no es una solución perfecta para los sitios web Ajax y es básicamente inutilizable, porque cambiar el DOM después de aplicar la hoja de estilo generada no será efectivo. Pero, de hecho, podemos personalizar un ie-css3 nosotros mismos. Simplemente no es tan inteligente como este.