css avanzado

Page 147

CSS avanzado

Capítulo 6. Técnicas avanzadas

html > body #elemento { width: 250px; }

El resultado final del hack anterior es que Internet Explorer 5/5.5 aplica un valor de 300px a la propiedad width y el resto de navegadores aplican un valor de 250px. Si se tienen en cuenta los márgenes, bordes y rellenos, el elemento se muestra con el mismo aspecto en cualquier navegador. Algunos filtros y hacks son mucho más sencillos que el mostrado anteriormente. De hecho, existen tres filtros muy simples que se utilizan para aplicar diferentes estilos a cada versión de Internet Explorer. El primer filtro es * html, que aplica las reglas CSS a las versiones de Internet Explorer anteriores a la 7: p { color: red; } * html p { color: blue; }

Si se añade * html delante del selector de cualquier regla CSS, esa regla sólo se aplica a los navegadores de la familia Internet Explorer anteriores a la versión 7. De esta forma, en el ejemplo anterior los párrafos de la página se muestran de color azul en los navegadores Internet Explorer 5, 5.5 y 6, mientras que se muestran de color rojo en el resto de navegadores. Otro de los hacks más utilizados es _ (guión bajo) que hace que una propiedad sólo se aplique a los navegadores de la familia Internet Explorer anteriores a la versión 7: p { color: red; _color: blue; }

La regla CSS anterior muestra los párrafos de la página de color rojo en cualquier navegador salvo en los navegadores Internet Explorer 5, 5.5 y 6, donde se muestran de color azul. Por último, también existe el hack * (asterisco) que hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8: p { color: red; *color: blue; }

En el ejemplo anterior, los párrafos de la página se muestran de color azul en cualquier navegador de la familia Internet Explorer cuya versión sea anterior a la 8 y se muestran de color rojo en cualquier otro navegador. Se puede consultar la lista completa de filtros y hacks para cada navegador y cada versión en el sitio web http://centricle.com/ref/css/filters/

www.librosweb.es

147


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.