Está en la página 1de 2

Condicionales en CSS

En HTML y CSS existen varios condicionales que nos permiten especificar que queremos
y/o necesitamos mostrar segn cada navegador en particular.
La gran variedad de navegadores resulta en un tambin amplia variedad de lectura de
una hoja CSS, sobre todo en lo que a tipografa se refiere, ya que cada uno utiliza un
motor de renderizado distinto. Tambin sucede con la forma de interpretar mrgenes y
paddings; y, aunque existen infinitos modelos de reseteados para estos problemas, an
en navegadores decentes, las diferencias de visualizacin persisten.

Claro, los ms conocidos son para Internet Explorer:


Cdigo:
[if IE] -> Si el explorador es Internet Explorer (cualquier versin)
[if IE 7] -> El valor de la versin IE (En este caso, el 7)
[if !IE] -> El valor NOT, invierte el significado de la expresin.
[if lt IE 7] -> Menor que
[if lte IE 6] -> Menor o igual que
[if gt IE 6] -> Mayor que
[if gte IE 7] -> Mayor o igual que
[if !(IE 7)] -> Invierte el significado de la expresin entre parntesis.
[if (gt IE 5)&(lt IE 7)] -> Operador lgico AND
[if (IE 6)|(IE 7)] -> Operador lgico OR

siendo su uso el siguiente:


Cdigo:
<!--[if lte IE 8]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<![endif]-->

Bien, hasta aqu, nada nuevo, pero tambin existen otros condicionales no tan
populares, que se emplean directamente en el archivo *css.
El siguiente es para ser visualizado slo en Firefox:
Cdigo:
@-moz-document url-prefix()

Condicionales en CSS
{
}

#div { display: block; }

Tambin podemos condicionar para navegadores basados en Webkit (Chrome y


Safari):
Cdigo:
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#div { display: block; }
}

Para pera usaremos algo ms extravagante:


Cdigo:
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0)
{
#opera { display: block; }
}

De esta manera, podemos asegurarnos de salvar esos pequeos detalles entre


navegadores y que nuestro proyecto sea visualizado correctamente en todos los
navegadores.
Sabes SQL? No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y ms
con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

También podría gustarte