Condicionales en CSS

En HTML y CSS existen varios condicionales que nos permiten especificar que queremos y/o necesitamos mostrar según cada navegador en particular.

La gran variedad de navegadores resulta en un también amplia variedad de lectura de una hoja CSS, sobre todo en lo que a tipografía se refiere, ya que cada uno utiliza un motor de renderizado distinto. También sucede con la forma de interpretar márgenes y paddings; y, aunque existen infinitos modelos de reseteados para estos problemas, aún en navegadores decentes, las diferencias de visualización persisten.

Claro, los más conocidos son para Internet Explorer:

Código :

[if IE] -> Si el explorador es Intener Explorer (cualquier versión)

[if IE 7] -> El valor de la versión IE (En este caso, el 7)

[if !IE] -> El valor NOT, invierte el significado de la expresión.

[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 expresión entre parentesis.

[if (gt IE 5)&(lt IE 7)] -> Operador lógico AND

[if (IE 6)|(IE 7)] -> Operador lógico OR

siendo su uso el siguiente:

Código :

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

Bien, hasta aquí, nada nuevo, pero también existen otros condicionales no tan populares, que se emplean directamente en el archivo *css.

El siguiente es para ser visualizado sólo en Firefox:

Código :

@-moz-document url-prefix()
{
  #div { display: block; }
}

También podemos condicionar para navegadores basados en Webkit (Chrome y Safari):

Código :

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

Para Ópera usaremos algo más extravagante:

Código :

@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 pequeños detalles entre navegadores y que nuestro proyecto sea visualizado correctamente en todos los navegadores.

¿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.