Alberto Fortes, in love with css

Debido a una preguntilla que me dejaron en el formulario de contacto, he decidido escribir un post sobre hacks y buenas costumbres.
Cuando empezé con esto de las CSS, no hace tanto, una de mis primeras dificultades fue encontrar a alguien que escribiera en cristalino castellano y “para torpes” acerca de que son y cómo y cuándo se usan los hacks. Realmente pegué bastantes palos de ciego hasta que empezé a comprenderlos, y no sólo aplicarlos y descubrir mis propios bichitos y excepciones. Así que cuando recibí el correo me acordé de lo que me hubiera encantado de encontrar rápidamente y en castellano una breve y simple guía de hacks CSS para torpes.

Antes de empezar a maquetar resetea o normaliza

La mayoría de los fallos de visualización entre explorer y otros navegadores, no son fallos propiamente sino diferencias. Me explico, internet explorer da unas dimensiones de márgenes y rellenos (padding) para las h, ul, li… diferentes a las que dan otros navegadores, como los basados en gecko (ff,flock…). De esta manera cuando el texto se nos desparrama, las cabeceras h salen más grandes o más pequeñas y con más espaciado en diferentes browsers, no se debe a fallo tecnológico alguno sino a fallo humano, por haber olvidado definir las propiedades.
Para ello, lo mejor es resetear los valores por defecto de todos los elementos al principio de las CSS y ponerlos a 0, de este modo

/* *****************************
normalización
****************************** */
p, ul, ol, dl, dt, dd, li, blockquote, cite, h1, h2, h3, h4, h5, h6 /*(etc)*/{
margin:0;
padding:0;
font-size:1em;
font-weight:normal;
}
img{
border:0;
}
/*etc*/

Normalizamos o reseteamos todos los elementos, de manera que forzamos todos los valores para luego posteriormente darles los valores deseados. De esta manera nos ahorramos algún que otro paso redundante, u olvido tonto que nos pueda llevar a usar un hack innecesario.

Hacks para Internet Explorer

Internet explorer, al menos hasta su versión 6 es el navegador que más casca, debido a que no respeta el modelo de caja estándar, a que le da el padding y el margin que le viene en gana, y a mil millones de bugs más.
Existen distintas formas de poner hacks para explorer.

Un hack, huyendo de academicismos y rigores no es más que una ñapa. Una falta de ortografía en nuestro código aprovechando los fallos de interpretación de algunos navegadores que provoca que las propiedades descritas en esa regla hackeada sólo sean interpretadas por el navegador que nosotros deseemos.

El condicional Conditional [if IE]

Dentro de los hacks para explorer el más usado, el más correcto de usar, el más potente y configurable, que además nos sirve también para el html y no sólo el css es el condicional. El condicional tiene esta sintaxis:

<!--[if IE]>
  código exclusivo para navegadores explorer
<![endif]-->

La fuerza del condicional está en el [if IE] ya que es ahí donde podemos elegir a que explorer deseamos atacar, de esta manera:

• [if IE 6] ataca exclusivamente a ie 6, if IE 5.0 ataca exclusivamente a ie 5 o if IE a secas ataca a todos los explorer

ejemplo:

<!--[if IE 5.5]>
  código exclusivo para navegadores explorer 5.5
<![endif]-->

• [if lt IE 6] ataca a todos los explorer menores que ie 6 pero no a este, [if lt IE 7] ataca a todos los explorer menores que la versión 7 pero No ataca a ie7… lt significa menor que.

ejemplo:

<!--[if lt IE 7]>
  código exclusivo para navegadores explorer menores que el i7 (por cierto un hack muy usado a partir de ahora)
<![endif]-->

• [if lte IE 6] ataca a todos los navegadores menores o igual a ie 6.

ejemplo:

<!--[if lte IE 6]>
  código exclusivo para navegadores explorer menores que el i7 (así que hasta que salga una nueva versión de ie, estas dos últimos  ejemplos son equivalentes)
<![endif]-->

El hack del subguión: _

Una forma de discriminar entre ie para windows frente a ie para mac y el resto de navegadores es el subguión: _
de esta forma:

#cajita{
  width: 450px;
  _width:400px;
}

Aplicaría una dimensión de caja de un ancho de 450px a todos los navegadores (incluido ie para mac) excepto a internet explorer para windows que le aplicaría 400px

Uso del asterisco *html

Otra forma d ediscriminar entre explorer y el resto de los navegadores es el uso del asterísco *html. En CSS el estilo de cascada establece que todo elemento de la página es hijo de la etiqueta html, por lo que una regla *html p equivale a p, de esta forma los navegadores pasan de una regla que comience con *html ya que la ven absurda. Pero como explorer es así de particular se la cree e interpreta.
De esta forma si tenemos en nuestro código lo siguiente:

p{
  color:#000;
}
*html p {
  color:#f00;
}

El color del texto de los párrafos será negro, mientra que explorer los pintará de color rojo.

Y con estos tres hacks ya estamos más que servidos.

Una advertencia

Tanto el uso del guión bajo _ como del asterísco *html son errores, de manera que los validadores lo suelen dar como fallo por lo que no te validará el css. De esta manera debemos incurrir en UNA BUENA PRÁCTICA: crear una hoja de estilos propia para todos los hacks de explorer a la que llamamos en el head mediante el condicional (de manera que sólo afecta a explorer):

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

Y una más: un hack no para explorer.

html>body

Otra regla de la cascada (>) que explorer no entiende, de manera que es una forma de discriminar, por ejemplo:

#footer{
  border-top: 1px solid #f00;
}
html >body #footer{
  border-top: 1px solid #000;
}

Actúa de la siguiente manera: establecemos el borde superior del footer a un píxel rojo, pero acto y seguido lo cambiamos a color negro, ningún problema, pero como explorer no entiende esta regla de la cascada, la ignora. Resultado: todos los navegadores pintan una línea negra mientras que explorer la pinta roja.
Si os fijais este hack es perfectamente estándar. Además es un pseudo hack, ya que no cometemos ninguna falta de ortografía, y es inverso, en el sentido de que afecta a todos los navegadores y no a explorer.
De esta manera es un hack genial para usarlo en la hoja de estilo principal, y no incurrir en errores.

Ahora sólo queda que los fallos o faltas de información que tenga en este post me lo arregleis vosotros vía comentario .
PD. No he incluido el hack /*\*//*/ código /**/ para internet explorer en mac, así como otros más, pero me he centrado en los imprescindibles.También está el hack ocultar de ie mac:

/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
/* End hide */

Para finalizar podeis ver una tabla de aplicación de los distintos hacks en los diferentes navegadores y plataformas aquí, muy útil, la verdad.