02/04/2014

CSS resets: aplicando estilos desde cero

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

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce