Autor: loretahur

Una de las gracias que tiene el CSS es presentar un mismo contenido de diferentes formas. Por tanto, podemos crear diferentes presentaciones dependiendo del dispositivo en el que se vaya a visualizar nuestra página. Por ejemplo, no será lo mismo mostrar una página en un ordenador convencional que en una PDA.

Para ello tenemos una serie de valores que aplicar a las etiquetas <style> o <link> con el parámetro media.

Si a media le damos el valor:

• all: ese fichero CSS será cargado para todos los dispositivos
• screen: para monitores de ordenador normales (valor por defecto)
• print: para impresión
• aural: sintetizadores de voz
• handheld: asistentes personales (PDA’s)
• braille: máquinas capaces de reproducir formato braille para personas invidentes
• embossed: para imprimir texto en braille
• projection: proyectores y transparencias
• tty: terminales
• tv: televisores

Puede ser un solo valor o varios separados por comas.

Veamos un ejemplo en el que dependiendo de si han accedido a nuestra página a través de un ordenador o a través de una PDA, cargamos una hoja de estilos u otra:

<style type="text/css" media="screen">
  @import "estilos_normal.css";
</style>
<style type="text/css" media="handheld">
  @import "estilos_pda.css";
</style>


Pero también podemos hacer esto dentro de una única hoja de estilos con la regla @media. Ésta permite aplicar diferentes estilos dentro de una misma hoja dependiendo del medio. Ejemplos:

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}

Con este sugerente título no me voy a poner a hablar de malos tratos hacia el HTML ni nada parecido ;-). No os impacientéis porque ya pronto entraremos en harina, pero antes me gustaría que quedasen claros los conceptos fundamentales.

Uno de esos conceptos es el funcionamiento de los navegadores: ¿cómo tratan éstos a nuestras páginas web?.

En este interesante artículo de Anieto2k se explica lo siguiente:

Un navegador recibe la página web en la que se encuentra la referencia al fichero CSS que debe cargar (aquí explicábamos de cuántas formas se podía incluir ese código CSS).

El navegador carga todo el código HTML y posteriormente pasa a aplicar los estilos CSS. Para ello sigue un orden secuencial leyendo el fichero desde el principio hasta el final y aplicando los estilos según van apareciendo. Por tanto, cada asignación de estilos se sobrepone a la anterior, (es como en las películas de Los Inmortales, el último estilo es el que prevalece sobre los anteriores).

Para verlo más claro tiraremos de ejemplos:

elemento {
border:3px red solid;
border:2px blue solid;
}

Aquí, al elemento se le aplica un borde rojo de 3px y posteriormente otro azul de 2px que será el que se muestre.

Hay varias versiones:

• CSS1: fue la primera especificación que desarrolló el World Wide Web Consortium (W3C). Las hojas de estilo CSS1 describen el formato del texto y de los componentes de una página (fuente, color, tamaño, etc.).

• CSS2: permite ubicar elementos de XHTML en diferentes capas o layers, cuyo posicionamiento no tiene que seguir el flujo HTML (plantea el modelo de cajas donde cada bloque se define como una caja que se coloca en un lugar concreto). CSS2 incluye a CSS1 (salvo pequeños detalles).

• CSS3: aún está en desarrollo por el W3C y los navegadores apenas son capaces de «entenderlo«.

Los navegadores modernos implementan CSS1 bastante bien. En CSS2, sin embargo, existen diferencias de interpretación según marcas y versiones (una página se mostrará diferente en un navegador Internet Explorer y en un navegador Firefox). De CSS3 ya ni hablamos (por ahora no encontraremos mucho soporte para esta versión).

Material de apoyo:

• Especificación de CSS1
• Especificación de CSS2

1. Porque es más limpio tener por separado el contenido (HTML) y por otro la presentación (CSS). Cuando tengamos que hacer un cambio en la apariencia de nuestras páginas, será fácil localizar el elemento en nuestro css o si el cambio es el contenido, será menos farragoso hacerlo en el html.
2. Porque para cambiar el formato de las cabeceras, por ejemplo, sólo tendremos que definir en el fichero de CSS una única vez la etiqueta <h1> y no tantas veces como aparezcan cabeceras en el html.
3. Porque el HTML es muy limitado para lograr una maquetación atractiva de las páginas web (posicionamiento lineal). Sin embargo, con CSS2 podremos posicionar elementos a nuestro antojo.
4. Porque nos permitirá mantener una cierta consistencia entre todas nuestras páginas. Es decir, si tenemos 100 páginas, que todas tengan el mismo formato.
5. Porque nos permite una carga más rápida de nuestras páginas. La explicación es la siguiente: cuando el usuario accede por primera vez a nuestra web, se descarga el fichero .css y el .html. Cada vez que pinche en cada uno de los apartados de la página, deberá recargar el código HTML pero ya no el .css porque lo tiene en su caché.
6. Porque es más accesible que el HTML. Antes de que apareciese el css, los diseñadores debían hacer uso de tablas para aplicarle forma a las páginas. Estas son muy poco accesibles puesto que en navegadores de voz, el usuario es bombardeado con un sinfín de números que representan las celdas.
7. Porque es un estándar y los estándares son el camino para que todos podamos ver Internet de la misma manera (independientemente de nuestra versión o marca de navegador).
8. Porque como su propio nombre indica, se trata de definir las características en cascada. Es decir, empezaremos definiendo la página entera y luego vamos refinando hasta el elemento más simple: la etiqueta. Es decir, puede que muchas cosas tengan las mismas características y eso definido en HTML supone muchísimo código, mientras que en css apenas son unas líneas
9. Porque con HTML sólo podíamos definir atributos en las páginas con pixels y porcentajes. Con CSS podemos definir utilizando muchas más unidades como: pixels (px) y porcentajes (%), como antes; pulgadas (in); puntos (pt); centímetros (cm)