introducir
No hay duda de que cualquier diseñador o desarrollador web que intente utilizar CSS encontrará que diferentes navegadores requieren diferentes declaraciones de estilo. Estas molestias se deben a distintos grados de integridad de la implementación de CSS en todos los navegadores y sus versiones. CSS condicional es una solución a este problema, tomando la idea de la sintaxis de comentarios condicionales de Internet Explorer e incorporándola en la declaración CSS.
Uso básico
El CSS condicional se utiliza principalmente para indicar si una declaración CSS particular debe usarse en un navegador en particular. Por supuesto, no querrás hacer esto muy a menudo, pero puede resultar muy útil cuando necesitas apuntar a un navegador. Puede ver en la lista de soporte de U4EA que la mayoría de los navegadores admiten este método.
Cualquier declaración o bloque CSS puede tener el prefijo de declaraciones condicionales. Hay tres tipos básicos de prefijos:
[si {!} navegador]
[si {!} versión del navegador]
[si {!} condición versión del navegador]
! - la negación de la declaración (por ejemplo, NO) - opcional
navegador: el navegador para el cual se realiza la declaración
'IE' - Internet Explorer
'Gecko': navegador basado en Gecko (Firefox, Camino, etc.)
'Webkit': navegadores basados en Webkit (Safari, Shiira, etc.)
'SafMob' - Safari móvil (iPhone / iPod Touch)
'Opera' - El navegador de Opera
'IEMac': versión para Mac de Internet Explorer
'Konq' - Konqueror
'IEmob' - IE para móviles
'PSP' - Playstation portátil
'NetF' - Net Front (Perdón por la ignorancia de Sugar and Tomatoes, no sé que es esto)
versión: la versión del navegador al que apuntar
condición - operador aritmético
lt - menos de
lte - menor o igual a
eq - igual a
gte - mayor o igual a
gt - mayor que
Algunos ejemplos de declaraciones condicionales:
// Ejemplo de sintaxis CSS condicional
[si IE] - si el navegador es IE
[si ! Opera] - si el navegador no es Opera
[si IE 5] - si el navegador es IE 5
[if lte IE 6] - Si el navegador es IE 6 o inferior (IE 5, IE 4, etc.)
[if! gt IE 6] - equivalente a la declaración anterior, si la versión del navegador no es superior a IE 6
Porque muchos casos piensan que div es una clase de cuadro con ancho y relleno. Por lo tanto, también debería comportarse bien en IE 5 (veo que mucha gente ha dejado de admitir IE 5, pero este es un ejemplo clásico). El modelo de caja de IE 5 no es estándar, así que así es como se resuelve usando CSS condicional:
// Ejemplo de modelo de cuadro CSS condicional
div.cuadro {
ancho: 400px;
[si IE 5] ancho: 600px;
relleno: 0 100px;
}
Como puede ver, el CSS condicional le permite mantener solo un archivo CSS en lugar de varios archivos que requieren el uso de comentarios condicionales de IE. Esto ayuda a agilizar el mantenimiento y hace que el código sea más claro.
Yendo un paso más allá, una característica importante del CSS condicional es que cuando encuentra una declaración CSS @import, abre e inserta automáticamente el archivo que debe importarse. Esto reduce el tiempo de carga de la página porque el navegador solo necesita realizar una única solicitud HTTP para el archivo CSS.
Aunque el CSS condicional se usa principalmente para diferentes versiones de navegadores IE, el CSS condicional también es bastante útil cuando encuentra errores en otros navegadores que son difíciles de corregir (principalmente usando Javascript para corregir). Los ejemplos incluyen errores de imágenes de fondo en Firefox 2 y Safari 2 que carecían de soporte para 'display: inline-block'. Estos errores se han corregido en las últimas versiones de estos navegadores, pero cuando estos navegadores ocupan una determinada cuota de mercado, la compatibilidad con versiones anteriores es muy importante.