Capítulo 1 Introducción

Con la introducción de CSS 3, nunca ha sido tan fácil crear aplicaciones y sitios tan atractivos y completos en HTML. Hay una gran cantidad de extensiones y tecnologías nuevas para CSS 3, entre las que se incluyen las transformaciones en 2D, las transiciones, las transformaciones en 3D y las fuentes web.

El objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con las primeras especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los diseñadores sobre los elementos de la página ha sido más difícil de cubrir. Las especificaciones anteriores del lenguaje tenían muchas utilidades para aplicar estilos a los sitios web, pero los desarrolladores aun continúan usando trucos diversos para conseguir efectos tan comunes o tan deseados como los bordes redondeados o el sombreado de elementos en la página.

CSS 2 ya ofrece un control suficiente para el diseño de los sitios web, pero CSS 3 todavía avanza un poco más en la dirección, de aportar más control sobre los elementos de la página. Así pues, la novedad más importante que aporta CSS 3, de cara a los diseñadores y desarrolladores, consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el código, tanto HTML como CSS.

1.1 Especificación oficial

A diferencia de CSS 2, que fue una gran especificación que definía varias funcionalidades, CSS 3 está dividida en varios documentos separados, llamados "módulos". Cada módulo añade nuevas funcionalidades a las definidas en CSS 2, de manera que se preservan las anteriores para mantener la compatibilidad.

Debido a la modularización del CSS 3, diferentes módulos pueden encontrarse en diferentes estados de su desarrollo, existiendo actualmente alrededor de cincuenta módulos publicados. El estado actual del desarrollo de CSS 3 puede ser consultado en http://www.w3.org/Style/CSS/current-work.

Mientras CSS 3 se convierte en un estandar, los distintos navegadores pueden incluir o no las mejoras propuestas, o incluso añadir las suyas propias. La web Can I use... incluye un listado completo de funcionalidades soportadas por los ditintos navegadores.

1.2 Nuevas funcionalidades

Estas son algunas de las nuevas funcionalidades añadidas en CSS 3:

  • Módulo Selectors Level 3

    • Nuevos selectores por atributos
    • Nuevas pseudo-clases
    • Nuevo selector adyacente
  • Módulo Basic User Interface

    • Propiedad box-sizing
    • Propiedades nav-top, nav-right, nav-bottom, nav-left
    • Propiedades overflow-x, overflow-y
  • Módulo Color

    • Colores HSL
    • Colores HSLA
    • Colores RGBA
    • Opacidad
  • Módulo Media Queries

  • Módulo Backgrounds and Borders

    • Propiedad background-origin
    • Propiedad background-clip
    • Propiedad background-size
    • Propiedad background
    • Propiedad border-color
    • Propiedad border-image
    • Propiedad border-radius
    • Propiedad box-shadow
  • Módulo Image Values and Replaced Content

    • Degradados lineales
    • Degradados radiales
    • Degradados lineales de repetición
    • Degradados radiales de repetición
  • Módulo Multi-column Layout

  • Módulo Animations

  • Módulo Transforms

  • Módulo Transitions

  • Módulo Fonts Level 3

  • Módulo Text Level 3

    • Propiedad text-shadow
    • Propiedad text-overflow
    • Propiedad word-wrap