02/04/2014
CSS resets: aplicando estilos desde cero
Las hojas de estilo en cascada (CSS) nos ayudan a separar el contenido de un sitio web de su presentación. En otras palabras, con HTML colocamos en la página texto, video, sonido e imágenes, pero con CSS dotamos a esos elementos de colores, tamaños, bordes, tipografías y otros recursos para enriquecerlos estéticamente.
Sin embargo, los elementos HTML suelen contar con un estilo visual propio independiente de las hojas de estilo. Si se deshabilita el CSS en esta página, se podrá apreciar que los encabezados (h1
, h2
, h3
, etc.) aparecen en negrita y en tamaño más grande que los párrafos; o que las listas son verticales, tienen un margen izquierdo y llevan círculos negros a modo de viñetas. Esto se debe a que los browsers aplican una serie de «estilos base» a cada etiqueta. Si estos estilos no son explícitamente modificados con nuestro propio código CSS, permanecerán como lo indique el browser en cuestión.
Esos estilos «por defecto» pueden traernos algunos dolores de cabeza. Por ejemplo, si quisiéramos construir un menú de navegación desplegable a través de una lista con listas anidadas, quizás necesitaríamos agregar varios estilos para que las listas de primer nivel sean horizontales y las demás verticales, para que los elementos de la lista no lleven viñetas y para que no exista margen entre ellos. Para resolver esos inconvenientes existe la técnica CSS reset, que consiste en «eliminar» los estilos impuestos por los browsers para que podamos trabajar sobre una base limpia. El truco consiste en insertar, antes que cualquier otra, una hoja de estilos que elimine márgenes, tamaños de fuente y otras imposiciones del navegador, haciendo (por ejemplo) que una lista se vea igual a varios párrafos. Siguiendo este enlace podemos descargar varias implementaciones.
El reseteo de CSS nos brinda un mayor control sobre la presentación de la página y genera una base de igualdad entre los navegadores. Sin embargo, también puede obligarnos a volver a declarar varios estilos que sí queremos que se conserven como el navegador lo indica. Por ejemplo, es altamente probable que en otros sectores de la página sí necesitemos listas verticales, indentadas y con viñetas negras. En casos como ese, esta técnica genera una pérdida de tiempo.
0