CSS práctico

En los or�genes de la Web y en sus primeras versiones, HTML era un lenguaje f�cil de aprender y muy reducido en cuanto a sus tags y estructura. Estamos hablando de los a�os 1990 al 1993. Todo cambi� cuando empezaron a surgir los primeros navegadores que eran capaces de representar recursos gr�ficos como a�adido a la informaci�n textual.

As�, el n�mero de sitios web comenz� a crecer y con �l, el n�mero de tags que la especificaci�n HTML contemplaba. El objetivo era construir sitios web cada vez m�s atractivos visualmente hablando, con lo que HTML deb�a incluir nuevos tags destinados a conseguir diversos efectos visuales.

Con todos estos cambios que la web hab�a sufrido, nos encontramos con que un lenguaje que en sus inicios hab�a sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualizaci�n" (HTML 4 es la m�s viva representaci�n de esta realida). Encontramos tags com <B>, <U> o <I> que definen estilos de visualizaci�n sin aportar nada a la estructura del documento representados.

Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag FONT. Con el uso de este tag podemos hacer que una zona que corresponde a la cabecera o t�tulo de una p�gina, y que deber�a expresarse con un H1, pase ahora a estar definida mediante el tag FONT. Con este cambio se pierder totalmente la estructura del documento.

La realidad ahora es que el mayor n�mero de los sites realizados con HTML 4 consiguen que el volumen de informaci�n de visualizaci�n sea muy superior al de la informaci�n verdaderamente relevante. Esto parece, cuanto menos precoupante.

Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura:

  • La indexaci�n por los buscadores es mucho m�s complicada (Google asigna un peso mucho mayor a una p�gina que utliza H1 para definir sus secciones, que a los campos META del documento).

  • Se reduce la acesibilidad. Actualmente existen aplicaciones que permiten la lectura de p�ginas web como ayuda a los discapacitados (persona ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder a una p�gina sin una m�nima estructuraci�n, el resultado puede ser lamentable.

  • La estructura de la p�gina y la informaci�n contenida en la misma es mucho m�s sencilla de mantener. Actualmente, ciertos aspectos del c�digo HTML pueden hacer que una misma p�gina tenga visualizaciones distintas en distintos navegadores. Estos herrores de dise�o son dificilmente depurables cuando la p�gina contiene una estructura de tags complicada y sin ninguna estructuraci�n. Por otra parte, un cambio en un tipo de fuente supone el redise�o de todas las p�ginas de un site al tener que sustituir todos los valores para el tag FONT.

Todos estos problemas han sido seguidos muy de cerca por el W3C, el cual comenz� a trabajar en 1995 en CSS.

Principales caracter�sticas aportadas por CSS en contraposici�n a los elementos de visualizaci�n presentes en la especificaci�n de HTML 4:

  • Estilo enriquecido. CSS permite la creaci�n de documentos visualmente mucho m�s ricos que lo que HTML nunca permitir�. No en vano CSS est� pensado �nica y exclusivamente para asistir al dise�ador a la hora de dar estilo a un documento estrucuturado.

  • F�cil de utilizar. La utilizaci�n de hojas de estilo CSS hace que el dise�ador pueda reducir sustancialmente su carga de trabajo al dise�ar todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visuales que plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por p�ginas y p�ginas del site.

  • Reutilizaci�n en m�ltiples p�ginas. Una hoja de estilo que recoja aspectos visuales comunes a varias p�ginas puede ser reutilizada en cualquier secci�n del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo as� consistente para todas las p�ginas. As�, si deseamos modificar un estilo que es com�n a todo el site, s�lo necesitar�amos modificar una l�nea de nuestro fichero CSS (con la aproximaci�n cl�sica que ofrece HTML, deber�amos modificar todas y cada una de las p�ginas).

  • Reutilizaci�n en m�ltiples p�ginas. Una hoja de estilo que recoja aspectos visuales comunes a varias p�ginas puede ser reutilizada en cualquier secci�n del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo as� consistente para todas las p�ginas. As�, si deseamos modificar un estilo que es com�n a todo el site, s�lo necesitar�amos modificar una l�nea de nuestro fichero CSS (con la aproximaci�n cl�sica que ofrece HTML, deber�amos modificar todas y cada una de las p�ginas).

Figura 1. Hoja de estilos personal
Figura 2. Hoja de estilos personal
Ejemplo 1. Fichero personal.css
a {
color: white; background-color: black;
}
  • Reduce el tama�o del c�digo HTML enviado. Al centralizar los estilos ya no es necesario la utilizaci�n de tags como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el c�digo de una p�gina.

  • Nos prepara par el futuro. Debemos ser conscientes que muchos tags como FONT, BASEFONT, U, STRIKE, S, CENTER, han sido marcados por el W3C como "deprecated", es decir, que se desaconseja su uso ya que ser�n eliminados en un futuro de la especificaci�n. De igual menera HTML retornar� progresivamente a sus or�genes, volviendo a ser un lenguaje para la estrucuturaci�n de informaci�n. Esta es la via de XML, cuya primera aproximaci�s es el lenguaje de marcas XHTML.

Aspectos con los que CSS no se ha enfrentado en su primera especificaci�n:

  • En CSS1 no se habla casi nada acerca de las tablas. Por ejemplo, seg�n lo que se v� en la especficaci�n parece evidente que se podr�n definir m�rgenes para las celdas de una tabla (se pueden definir m�rgenes para todos los elemento), pero no es as�. CSS2 introduce un nuevo conjunto de propiedades para la interacci�n con tablas. De hecho, la omisi�n del tratamiento de tablas en la primera especificaci�n de CSS, intenta marcar que las tablas no son un elemento que se deba utilizar para disponer el resto de elementos en la p�gina.

  • As�, para el posicionamiento de los elementos se deben utilizar estilos y no tablas. Aunque CSS2 tiene tres cap�tulos enteros dedicados al posicionamiento de elementos.

  • CSS1 no trata la posibilidad de disponer de fuentes descargables. Aunque CSS2 introduce alg�n aspecto sobre el soporte de fuentes, es un tema que no queda resuelto. Parece que ser� otros estandar como SVG (Scalable Vector Graphics), el que tendr� en su mano la soluci�n.

  • En CSS1 no se definen los posibles medios de presentaci�n de CSS, siendo la pantalla el �nico medio disponible. Con el fin de conseguir hojas de estilo que adapten su visualizaci�n al medio en que ser�n presentadas, CSS2 define el soporte para que se aplique una hoja de estilos u otra en funci�n del medio seleccionado (screen, print o aural).

Implementaciones:

  • Las peores son las que realizaron en su dia "Microsoft Internet Explorer 3.x" y "Netscape Navigator 4.x".

  • Mejoraron en cierta medida su soporte con las versiones de "Microsoft Internet Explorer 4.x and 5.x".

  • Actualmente, el mejor soporte de CSS lo tiene Opera y Mozilla (en menor medida).

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP