HTML5: compatibilidad con IE8 y Firefox 3.6

HTML5 es una actualización del estándar web bastante reciente, y esto hace que los navegadores antiguos no lo interpreten correctamente. Muy pocos usuarios quedan que usen Firefox 3.6, sin embargo, no tan pocos utilizan aún hoy en día Internet Explorer 6, 7 y 8. Aquí os presento una manera de solucionar los problemas de compatibilidad de estos navegadores con las nuevas etiquetas que incorpora HTML5.

En primer lugar deberemos incluir en nuestro fichero HTML el siguiente trozo de código JavaScript:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Para complementar esto, y que los estilos se visualicen correctamente, tendremos que declarar el modo de visualización de las nuevas etiquetas en bloque:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

Por último, es muy recomendable combinar estas correcciones con algún «reseteo» de los estilos, a fin de garantizar la igual visualización de nuestra página en todos los navegadores. Por ejemplo, el de Eric Meyer.

Fallback properties

Un concepto muy sencillo y, sin embargo, crucial. Las fallback properties se trata de propiedades «dobles» que definimos dada la característica de los navegadores que hace que ante dos propiedades similares, que afecten sobre el mismo elemento, estos tomen por válida la última de ellas que comprendan, por si no entendiesen las anteriores. Por ejemplo, en el caso un navegador con dificultades con los degradados, sería óptimo definir un color de fondo que lo sustituyese en caso de necesidad.

background: #666;
background: linear-gradient(#555, #777);

Otra de CSS3: transiciones

Hasta hace poco, si queríamos una transición en algún elemento de nuestra web, no nos quedaba otro remedio que recurrir a la programación más pura. Con la nueva versión de CSS es posible declarar algunas transiciones vistosas de una manera sencilla.

#bo {
background:#000;
-webkit-transition: background 1s ease-in;
-moz-transition: background 1s ease-in;
transition: background 1s ease-in;
}

#bo:hover, #bo:focus {
background:#fff;
}

Una sintaxis más completa incluiría, en este orden, la propiedad a la que afecta (background, color, position, border, all (aplica a todo)…), la duración en segundos, el efecto (ease, ease-in, ease-out, ease-in-out, linear…), y el tiempo de espera hasta que comience. Si repetimos, tras una coma, todos los parámetros, podríamos aplicar dos transiciones distintas a dos propiedades diferentes.

#bo {
background:#000;
-webkit-transition: background 1s ease-in 1s;
}

Jugando con la opacidad en CSS

Otro efecto interesante de aplicar, por ejemplo, para dejar entrever el fondo de nuestra página, es el grado de opacidad o transparencia que queramos en un determinado elemento. Para conseguir esto, y que además funcione en todos los navegadores, escribiremos:

#elemento-cuasi-transparente {
    opacity: .3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
}

Las dos primeras sentencias toman valores entre 0 (invisible) y 1 (opaco), mientras que la tercera va desde 0 hasta 100.

Imagen de fondo con CSS3

Establecer un color de fondo es uno de los factores que siempre están en juego cuando diseñamos una página web. Con la misma propiedad, background, podemos establecer imágenes de fondo, así como otros parámetros.

background-color: #fff;
background-image: url('fondo.png');
background-repeat: no-repeat; /* repeat-x, repeat-y */
background-position: right top;

Siguiendo este orden, podremos utilizar una sintaxis reducida:

background-color: #fff url('fondo.png') no-repeat center top;

Ahora bien, el CSS3 nos permite algunas posibilidades más, como definir un tamaño para el fondo, el área de actuación de la imagen, en función del modelo de cajas, el área del color, e incluso múltiples imágenes simultáneamente.

background-size: 100% 100%;
background-origin: content-box; /* padding-box, border-box */
background-clip: content-box;
background-image: url('fondo1.png'), url('fondo2.png');

Colores rgba, otro modo de pintar la web

La clásica manera de dar color a cualquier elemento, como a un fondo, es mediante el código hexadecimal correspondiente a ese color, por ejemplo:

background-color:#000;

Pero existe otra manera de definir esto, otro modelo posible, que es el rgba (siglas de red, green, blue y alpha). Los tres primeros valores son claros, en función de cuál predomine, el resultado final tenderá a uno o a otro de estos colores principales. El valor alpha equivaldría a la opacidad, con la particularidad de que solo aplica al elemento sobre el que lo escribimos, a diferencia de opacity, que aplica a todo. Conviene hacer dos declaraciones en este caso, por si el navegador tuviera dificultades de interpretación.

background-color:rgba(0,0,0);
background-color:rgba(0,0,0,.8);

Un paseo por los bordes y sus estilos

Algo, quizás, básico, pero que no hemos comentado hasta el momento, son los bordes. Tomemos un ejemplo para explicar este atributo:

border: 1px solid #000;

En este ejemplo tendríamos un borde negro continuo de 1 píxel. En realidad, estamos resumiendo en una única sentencia lo que podrían ser 3: border-width, border-style y border-color. También podríamos especificar un borde concreto concatenando border- con top, right, left o bottom.

Centrándonos en el estilo, podríamos dar los siguientes valores: solid (sólido), dotted (punteado), dashed (discontinua), double (doble), groove, ridge, inset, outset (las 4 últimas para acercarse a un efecto «3D»).