Lo Nuevo en CSS. 2022.
Desde las cuevas del I+D del departamento de Ui Develop, este que os habla, Jose Antonio Sánchez Vega 👨🏻🚀 le gustaría comentaros alguna de las novedades que nos está deparando este 2022 en relación a nuestra queridísima hoja de estilo en cascada.
Muchas de estas novedades la veníamos esperando como agua de Mayo y es que estas nuevas propiedades nos ayudaran bastante a los que día a día nos peleamos con el CSS.
ASPECT-RATIO.
¿Quién no ha echado de menos una propiedad que de relación al aspecto de una imagen y que por lo tanto permite mantener la proporción de un elemento? Pues ya tenemos disponible la propiedad ASPECT-RATIO.
Que recuerdos me trae este problema cuando desde el departamento trabajábamos en la maquetación de periódicos digitales y teníamos que luchar con la proporción añadiendo padding por un lado y por otro después de toquetear su contenedor padre. En la actualidad y por ahora únicamente en Chrome ya podemos aplicar la propiedad directamente en la imagen.
Scroll Snap.
Son unas propiedades que cambiara la forma de crear los slider. Estas propiedades harán que dejemos de utilizar pesadas librerias jquery,react…. para la creación de este componente tan utilizado. Ademas, su experiencia de usuario es expectacular por lo que animo a probarlo en vuestros proyectos.
Container query
Aun en prototipo y por lo cual poco compatible con los navegadores pero tiene mucha pinta de convertirse en una de esas propiedades que revolucionen la hoja en cascada y ,sobre todo, que nos quiten más de un dolor de cabeza con el responsive de nuestros proyectos.
El container query en diferencia a los media query que ya conocemos, permitirán dar estilos a elementos en función del tamaño de su padre y no del viewport como lo hacíamos hasta ahora. De esta manera conseguiremos que los componentes se adapten a su contexto.
:where y :is
Sobre pseudo clases también hay novedades y es que se amplía la gama de condiciones que podremos disponer desde ya en nuestro css.
Sumándose a las ya conocidas :not() , :only-child , :empty , :only-of-type … llegan para quedarse :where y :is . Dos Pseudo clases que harán que nuestro código sea más limpio ya que simplificará codigo de nuestro css y si a esto le añadimos el valor de poder anidar con otras pseudo clases nos da como resultado una de las propiedades más interesantes de para la reducción de selectores.
:focus
No nos salimos de las pseudo clases ya que también se presenta como novedad :focus-visible.
la clase :focus puede ser una de las clases más despreciada y muchos de nosotros la quitamos o la hemos quitado alguna vez por el simple motivo de no gustar el borde que se añade en los enlaces o en los input cuando pulsamos en ellos, provocando de esta manera un grave error en la accesibilidad de la web.
Pues bien , esta clase :focus-hover nos facilitara el trabajo puesto que hará que sea el navegador quien decida cuando poner el foco, por ejemplo, cuando estemos tabulando desde teclado.
Subgrid
Dejo para lo último una de las propiedades estrella dentro de estas novedades de css y es que se está procesando algo grande con subgrid. Un paso más a las posibilidades que ya nos ofrece la propiedad grid. Y es que con estas nuevas propiedades de subgrid podremos heredar de su rejilla padre, o lo que es lo mismo, nos dará múltiples posibilidades para la creación de la estructura de una pagina
En definitiva, el css sigue evolucionando con nuevas y mejores propiedades que a la vez de hacer más fácil el trabajo de un maquetador, le inyecta una dosis de potencia a este lenguaje tan infravalorado, pero a la vez tan querido por los que lo usamos a diario.
