El año de 2020 ha sido un año para recordar, pero también ha habido muchos temas y elementos que seguramente prefieres olvidar. Hemos tenido una pandemia, catástrofes naturales, catástrofes sociales y personales. Si alguno de estos problemas te ha afectado, ¡aquí te envío mucha fuerza!
Olvidar CSS, aprender CSS
Uno de los temas que también deberás olvidar, o querrás olvidar o reconsiderar, está relacionado con todo lo que sabías sobre CSS antes del año 2020 — y una buena parte de 2019.
Resulta que en 2020 el CSS, Content Style Sheets, u hojas de estilo en cascada en español, ha dejado de parecerse a lo que llevabas años implementado en tus proyectos de desarrollo de sitios y aplicaciones web.
Algunos ejemplos
Si antes estabas acostumbrado a usar puntos de interrupción de CSS para que el contenido de tu sitio web respondiera de acuerdo con el ancho del dispositivo, ahora puedes aprovechar las propiedades de cuadrilla, Grid de CSS para crear plantillas dinámicas y responsivas para el mismo efecto, y con menos líneas de código.
También podrías utilizar CSS-in-JS para colocar tus estilos en tus componentes. De esta forma no tendrías que depender de hojas de estilos globales y puedes desarrollar sistemas de diseño temables.
De la misma forma, Tailwind CSS se ha consolidado en 2020, en el sector, gracias a su uso de CSS de “utility-first”, animando a reconsiderar el uso de frameworks famosos y poderosos, ¡y también a reconsiderar el uso de nombres de clases semánticas! :o
Nuevas características y adopción
Miremos juntos algunas de estas novedades del mundo del CSS y su adopción en 2020, y nos basaremos en la encuesta sobre el estado del CSS en 2020 realizada por Sacha Greif y Raphël Benitte. Además, repasaremos qué significan alguna de ellas para tus procesos de desarrollo web con CSS.
Según la encuesta de Greif&Benitte, la adopción de las nuevas funciones se está retrasando un poco a medida que la comunidad va absorbiendo las nuevas propiedades.
Media Queries
Entre 3 de las propiedades de Media Queries que probablemente no conozcas, prefers-color-scheme, prefers-reduced-motion, y color-gamut prefers-color-scheme es la más conocida entre los desarrolladores y es también la más usada con un ratio de 35.3%.
¿Para qué sirve cada una de estas propiedades?
Prefers-color-scheme
La característica prefers-color-scheme de media queries se utiliza para detectar si el usuario ha solicitado que el sistema utilice un tema de color claro u oscuro.
Prefers-reduced-motion
La función prefers-reduced-motion de media queries se utiliza para detectar si el usuario ha solicitado que el sistema minimice la cantidad de movimiento no esencial que utiliza.
Color-gamut
La propiedad color-gamut se puede usar para probar la gama aproximada de colores que admite el agente del usuario y el dispositivo de salida.
Tipografia
En relación a la tipografía, propiedades como @font-face o las propiedades de salto de línea siguen siendo las más usadas tal como la propiedad font-display que tiene una ratio de uso del 69.2%. Propiedades como line-clamp, o font-variant no llegan a un 50% de ratio.
¡Echemos un vistazo a lo que significan!
@font-face
@font-face es una regla-arroba (regla-at) de CSS que especifica una fuente personalizada con la que mostrar el texto; la fuente se puede cargar desde un servidor remoto o desde una fuente instalada localmente en la propia màquina del usuario.
Propiedades de salto de línea
La propiedad de salto de línea establece cómo dividir líneas de texto en chino, japonés o coreano cuando se trabaja con signos de puntuación, por ejemplo.
Font-display
El descriptor font-display determina cómo se muestra una fuente en función de si está descargada y cuando está lista para usar.
Diseño y plantillas
Según la encuesta, Flexbox sigue siendo la propiedad más conocida y utilizada con un ratio de 98%, pero propiedades como Grid, como hemos comentado antes, se merecen también tu atención ya que tienen un ratio de utilización del 74.1%. La propiedad position:sticky con ratio de utilización de 81.4%, o la propiedad de diseño de varias columnas (multi-column layout) con ratio de uso de 59.2. Otras propiedades como exclusiones, modos de escritura, subgrid o propiedades lógicas de CSS no llegan al 50% de uso.
Repasemos qué son algunas de las características más importantes.
Grid
CSS Grid Layout se destaca por dividir una página en regiones principales o definir la relación en términos de tamaño, posición y capa entre partes “de un control construido a partir de primitivas HTML”.
Flexbox
CSS Flexible Box Layout es un módulo de CSS que define un modelo de caja de CSS optimizado para el diseño de la interfaz de usuario y el diseño de elementos en una dimensión. En este modelo, los elementos secundarios de un contenedor flexible se pueden colocar en cualquier dirección y se pueden “flexionar” sus tamaños, creciendo para llenar espacios no utilizados o encogiendo para evitar desbordar al padre.
Multi-column Layout
CSS Multi-column Layout es un módulo de CSS que agrega soporte para diseños y plantillas de múltiples columnas. Se incluye el soporte para establecer el número de columnas en un diseño, así como cómo el contenido debe fluir de una columna a otra, y los tamaños de los espacios entre las columnas y las líneas divisorias de las columnas.
Position:sticky
La propiedad position de CSS establece cómo se coloca un elemento en un documento. Las propiedades superior(top), derecha(right), inferior(bottom) e izquierda(left) determinan la ubicación final de los elementos posicionados. Un elemento con position:sticky se posiciona según la posición de scroll (desplazamiento) del usuario.
Formas y gráficos
Referente a las formas y gráficos, los filtros y efectos son de los más usados con un ratio de utilización del 73.4%, pero propiedades como object-fit (80.1%), clip-path (61.1%), blend-mode (55.3%) o backdrop-filter (52.9%) también tienen mucho peso en la comunidad.
Repasemos qué son algunas de las características más importantes.
Object-fit
La propiedad de CSS object-fit (ajuste de objeto) establece cómo se debe cambiar el tamaño del contenido de un elemento reemplazado, como un <img> o <video>, para que se ajuste a su contenedor.
Filtros y efectos
La propiedad filter de CSS aplica efectos gráficos como desenfoque o cambio de color a un elemento. Los filtros se utilizan para ajustar imágenes, fondos o bordes.
Clip-path
La propiedad clip-path (ruta de recorte) crea una región de recorte que establece qué parte de un elemento debe mostrarse. Se muestran las partes que están dentro de la región, mientras que las que están fuera se ocultan.
Blend-mode
El tipo de datos de CSS <blend-mode> describe cómo deben aparecer los colores cuando los elementos se superponen. Se utiliza en las propiedades background-blend-mode y mix-blend-mode.
Animaciones y Transformaciones
Las Transiciones (95.5%), Transformaciones (95.7%) y animaciones (92.7%) siguen siendo muy importantes en el desarrollo web moderno. Un poco lejos queda la perspectiva, con un ratio de utilización de 61.2%.
Recordemos qué son exactamente estas propiedades.
Transiciones
El módulo Transiciones de CSS es un módulo que te permite crear transiciones graduales entre los valores de propiedades de CSS específicas. Puedes controlar el comportamiento de estas transiciones especificando su función de temporización, duración y otros atributos.
Transformaciones
CSS Transforms es un módulo que define cómo los elementos diseñados con CSS se pueden transformar en un espacio bidimensional o tridimensional.
Animaciones
CSS Animations es un módulo que te permite animar los valores de las propiedades de CSS a lo largo del tiempo, usando fotogramas clave. Puedes controlar estas animaciones especificando su función de sincronización, duración, número de repeticiones, etc…
Interacciones
En el apartado de interacciones la propiedad pointer-events es claramente la más importante con un ratio de uso del 85.1%, mientras que otras propiedades como touch-action, scroll-snap, event-scroll-behavior, o overflow-anchor no llegan al 50% de uso.
Si no recuerdas qué son exactamente estas propiedades, podemos repasarlas.
Pointer-events
La propiedad pointer-events establece bajo qué circunstancias un elemento gráfico puede convertirse en el objetivo de eventos de puntero (pointer-events).
Scroll Snap
CSS Scroll Snap es un módulo de CSS que introduce posiciones de ajuste de desplazamiento (scroll), que imponen las posiciones de scroll. Mira estos ejemplos. Verás que con scroll-snap puedes bloquear la ventana gráfica en ciertos elementos o ubicaciones después de que un usuario haya terminado de desplazarse.
Otras características
calc() sigue teniendo un uso bastante elevado con un ratio de utilización del 94.2%, pero otras características como variables (78.5%), will-change (63.6%), funciones de comparaciones de CSS (57.9%), @supports (57.3%). Lejos queda la propiedad Contain (34.2%), y peor aún la CSS Houdini (5.7%).
¿Qué significan algunas de estas propiedades?
Variables
CSS Custom Properties for Cascading Variables es un módulo que permite la creación de propiedades personalizadas que se pueden utilizar más de una vez.
Will-change
La propiedad will-change indica a los navegadores cómo se espera que cambie un elemento. Los navegadores pueden configurar optimizaciones antes que se cambie un elemento.
CSS Houdini
CSS Houdini es un conjunto de APIs de bajo nivel que expone partes del motor de CSS, dando a los desarrolladores el poder de extender el CSS, al conectarse con el proceso de maquetación y diseño del motor de renderizado de un navegador. Houdini te permite crear nuevas funciones de CSS sin esperar a que se implementen de forma nativa en los navegadores. Puedes saber más sobre Houdini en la documentación de Mozilla.
Conclusión
Estas son solamente algunas de las propiedades, y cambios que ha experimentado CSS en los últimos años y sobretodo en 2020. Si hace años que trabajas con CSS, te recomiendo revisarlas bien (a nivel de compatibilidad de navegadores) y hacer pruebas antes de implementarlas en tus proyectos en producción.
Pienso que estas nuevas propiedades añaden mucho valor al desarrollo web y al lenguaje CSS, sobretodo porque ayudan a reducir la verbosidad. También creo que la comunidad de CSS debería replantear la verdadera utilidad de algunas de estas propiedades a nivel general, ya que algunas de ellas los desarrolladores web, o no las conocen, o no las utilizan.
Sin embargo, si eres desarrollador te animo a probarlas y si es posible, a mejorarlas, pues como puedes ver CSS es un lenguaje de diseño gráfico cada día más dinámico y esto es gracias a tí.
¿Qué te parecen las nuevas propiedades de CSS y su adopción por parte de los desarrolladores? ¡Coméntalo abajo!
Fuentes:
