Cambios entre CSS y CSS3

Cuando se creó CSS, la idea principal era crear una especificación para separar los contenidos de la página Web HTML de la presentación de ésta con las hojas de estilo, facilitando así el trabajo a la hora de crear páginas Webs. Para ello vamos a ver la evolución de la primera versión de CSS hasta la actual versión, CSS3.

CSS 1.0, el inicio

CSS es una tecnología que sirve para dar estilos visuales a las páginas web, que tuvo una primera versión que se lanzó en el año 1996.

Fue elaborada por Hakon Wium Lie y Bert Bos, que posteriormente fueron los creadores del navegador Opera, que si bien nunca ha sido un navegador muy extendido, tuvo mucha influencia sobre el resto de navegadores.

CSS surgió inicialmente para dar un poco de orden al desorden que había a la hora de dar estilos en los distintos navegadores. Hasta que no surgió CSS, cada navegador daba estilos a las páginas web de una forma diferente.

Su primera versión fue limitada, ya que se limitaba a dar estilos visuales al tipo de letra, dar colores al texto, dar color al fondo, se podía alinear el texto junto con las imágenes y las tablas, se podía asignar margen, borde, padding y posicionar de cierta manera los elementos.

Conforme han ido avanzando los años, fueron apareciendo nuevas propiedades y nuevas mejoras, hasta llegar a la versión que tenemos actualmente, que es CSS3. De aquella primera versión a la actual ha habido muchísimas mejoras.

CSS3

CSS3 es modular, ya que la especificación de estilos fue creciendo tanto, que hubo que desarrollarla modularmente. De hecho es una especificación que se viene desarrollando desde 1999.

Cada módulo de CCS3 tiene su propia madurez, así que la estandarización de los módulos es propio. Podemos tener un módulo que sea ya estándar y otro módulo que esté todavía en un proceso de estandarización. De hecho se estima que no va a haber una versión de CSS4, sino que habrá módulos en su versión 4 y módulos que todavía no habrán progresado.

Entre las cosas que podemos hacer con CSS3 destacamos algunas:

• Permite hacer muy fácilmente cosas como los bordes redondeados, que con versiones anteriores de CSS3 eran bastante difíciles de conseguir.
• Permite dar gradientes de colores, es decir, si queremos dar a una etiqueta o a una parte de la página web un color de fondo, ya no nos vemos limitados a darle un único color, sino que podemos establecer un gradiente, una transición de un color a otro.
• Se pueden transformaciones en muchas de las propiedades de los elementos de la página web e incluso animaciones utilizando solo CSS3.
• Permite maquetar de manera mucho más fácil utilizando contenedores Flex y Grid.
• Permite utilizar las media-queries, que permiten elegir una u otra hoja de estilos dependiendo de las propiedades en la pantalla que tengamos, para que la página web cambie su presentación si se muestra en una pantalla grande, en un móvil, en una tableta e incluso en la televisión.

Test para el navegador

Como hemos comentado, CSS3 no es un estándar aún, sino que ha evolucionado y que cada módulo tiene su propio grado de evolución. Si queremos ver hasta qué punto un navegador soporta CSS3 podemos utilizar la siguiente página web: https://css3test.com/.

En esta página nos indica el porcentaje de soporte tiene el navegador para CSS3 en general y en particular para cada módulo del mismo.

Si quieres profundizar mucho más en CSS3, puedes hacer el Curso de HTML5 y CSS3. En este curso aprenderás  a crear paso a paso páginas Webs profesionales.

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.