Introducción a CSS3

Algunos navegadores comienzan a implementar CSS3, así que es hora de empezar a conocer algunas diferencias y mejoras con respecto a CSS2.

09/6/08 - Desde que CSS comenzó han pasado muchos años y ya vamos por la especificación de CSS3, que incorpora una serie de novedades que vamos a tratar de resumir en este artículo.

Qué es CSS

Si no sabes lo que es CSS probablemente te interesaría comenzar leyendo nuestro manual de CSS o la sección de CSS a fondo. No obstante, cabría decir que CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.

Con CSS3, más control sobre la forma

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 las webs, 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 1 ya significó un avance considerable a la hora de diseñar páginas web, aportando mucho mayor control de los elementos de la página. Pero como todavía quedaron muchas otras cosas que los diseñadores deseaban hacer, pero que CSS no permitía especificar, éstos debían hacer uso de trucos para el diseño. Lo peor de esos trucos es que muchas veces implica alterar el contenido de la página para incorporar nuevas etiquetas HTML que permitan aplicar estilos de una manera más elaborada. Dada la necesidad de cambiar el contenido, para alterar al diseño y hacer cosas que CSS no permitía, se estaba dando al traste con alguno de los objetivos para los que CSS fue creado, que era el separar por completo el contenido de la forma.

CSS 2 incorporó algunas novedades interesantes, que hoy ya utilizamos habitualmente, 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 desarrolladores de webs, 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 de las web.

Propiedades nuevas en CSS3

He aquí una lista de las principales propiedades que son novedad en CSS3.

Bordes

• border-color
• border-image
• border-radius
• box-shadow

Fondos

• background-origin
• background-clip
• background-size
• hacer capas con múltiples imágenes de fondo

Color

• colores HSL
• colores HSLA
• colores RGBA
• Opacidad

Texto

• text-shadow
• text-overflow
• Rotura de palabras largas

Interfaz

• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left

Selectores

• Selectores por atributos

Modelo de caja básico

• overflow-x, overflow-y

Otros

• media queries
• creación de múltiples columnas de texto
• propiedades orientadas a discurso o lectura automática de páginas web
• Web Fonts

Este listado de nuevas propiedades de CSS3 lo he sacado de: http://www.css3.info/preview/. Es un sitio en inglés, pero puede estar bien visitar para ir conociendo más detalles sobre CSS3.

En futuros artículos daremos algunas claves y explicaciones sobre varias de estas propiedades, al menos las más interesantes, con especificaciones detalladas, así como ejemplos que sirvan para ir conociendo esta nueva especificación de CSS.

+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario no revisado

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en CSS

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba