Vistiendo la web: CSS

¡Bienvenidos un día más a nuestro blog queridos rooters! Estamos en fechas de introducción de tecnologías, si bien hace escasos días nos sumergimos en HTML/5, hoy os traigo, probablemente, a uno de sus mejores amigos: CSS¡Counter Strike Source, por fin un post hablando de videojuegos! Aunque fue uno de mis juegos favoritos, no, no significa eso.

what

Introducción al CSS

El CSS (Cascade StyleSheets), o Hoja de estilo en cascada, es un lenguaje que sirve para establecer patrones de diseño a nuestra página HTML. Todas, absolutamente todas las páginas que conocéis utilizan hojas de estilo.

Las hojas de estilo nacieron para separar la parte estructural de una web de la parte gráfica. Esta parte gráfica presenta características como colores, tipografías, ancho de los contenedores… entre otros cientos de propiedades. Con esta separación se consigue una mejora en la accesibilidad del documento, además de proveer de mayor flexibilidad y control en la especificación del diseño, permitir que varios archivos HTML accedan al mismo estilo, así como reducir la complejidad y repetición del código.

Por lo tanto, a pesar de que el código CSS puede incluirse dentro de la etiqueta <head>, recomiendo encarecidamente hacer un archivo .css independiente y enlazarlo desde nuestro HTML.

Contexto histórico y actual

Empezó a crearse a mediados de los años 90 para promocionar un estándar de «programación de diseño web» (¿vale? entre comillas y en cursiva). Es lo que se conoció como CSS1: la primera especificación recomendada por la W3C.

CSS1

Se publica en 1995 y se abandona en 2008, ofrecía funcionalidades como:

  • Propiedades de las fuentes: tipografía, tamaño…
  • Colores, fondos y bordes.
  • Atributos de texto, espacio entre palabras, letras, líneas…
  • Alineaciones: centrar imágenes, tablas…
  • Márgenes
  • Presentación de listas – ¡como esta! –

CSS2

La W3C desarrolló la versión 2 y se publicó como recomendación en 1998, siendo abandonada el mismo año que su antecesora. Además de las propiedades de CSS1, esta nueva versión ofrecía:

  • Las funcionalidades propias de las capas (<div>) como de posicionamiento relativo/absoluto/fijo, niveles (z-index), etcétera.
  • El concepto de «media types«.
  • Soporte para las hojas de estilo auditivas
  • Texto bidireccional, sombras, etcétera.

CSS2.1

Fue la primera revisión de CSS2, que después de unos cuantos rechazos, finalmente fue aprobada como recomendación por la W3C en 2011

CSS3

Es la versión más actual estable. Los trabajos sobre CSS3 empezaron a la vez que se publicó la recomendación oficial de CSS2. Fue a partir de 2011 cuando la W3C comenzó a publicar como recomendaciones oficiales algunos módulos desarrollados de CSS3: Selectores, Espacios de nombres y Color.

css3_logo

CSS4

La cuarta versión de las hojas de estilo en cascada se encuentra en desarrollo desde hace unos años. Como siempre, se incluirán nuevos selectores que nos harán la vida más fácil – o no -.

¿Qué puedo hacer con él?

Las posibilidades son prácticamente infinitas, el límite lo pondrá nuestra imaginación, o la del diseñador de turno. Podemos utilizarlo desde maquetar una estructura simple de nuestra web, colocar contenedores en su sitio, ajustar tamaños de letra, establecer la gama de colores… hasta alguna creación fabulosa como esta:

1

Nosotros centraremos nuestros rooties en CSS3, que es el más extendido y mejor soportado por los navegadores hoy en día.

El presente del CSS: SASS y LESS

A medida que la web sigue avanzando más personas están recurriendo a los pre-procesadores CSS (si sigues escribiendo código CSS puro me temo que estás perdiendo la mitad tu vida detrás de ese ordenador), por esto existen LESS y SASS,  no hay duda de que ambos son los preferidos por la comunidad, también está stylus pero este lo dejaremos más de lado de momento.

SASS y LESS son preprocesadores de CSS es una herramienta que nos permite escribir pseudo-código CSS que luego será convertido a CSS real. Ese pseudo-código se conforma de variables, condiciones, bucles o funciones. Podríamos decir que tenemos un lenguaje de programación que genera CSS.

sass-vs-less

El objetivo de estos preprocesadores es tener un código más sencillo de mantener y editar. Los preprocesadores incluyen características tales como variables, funciones, mixins, anidación o modularidad.

Sin duda, dedicaremos un rootie completo a hablar únicamente de SASS y LESS, ya que bien lo merecen.

Espero que os haya gustado esta introducción a las hojas de estilo, estad atentos para más avances.

Hasta la próxima y… yo me voy por mi izquierda { left: -99999px; }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *