CSS en el 2022

Css en el 2022
No hay comentarios

CSS en el 2022: 3 actualizaciones que todo desarrollador debe conocer

Conoce 3 de las actualizaciones del lenguaje CSS que se irán habilitando a lo largo del año 2022

  1. Container queries

Las consultas de contenedor o container queries le permiten diseñar elementos en función del tamaño del elemento principal, muy diferente de las consultas de medios o media queries basadas en ventanas gráficas o view port. Estas nuevas consultas ahora permiten que los componentes se adapten a su contexto.

Para su uso, un elemento debe especificarse como un container, que puede tener valores de ancho, alto, tamaño en línea o tamaño de bloque utilizando las propiedades del contenedor.

CSS en el 2022

Una vez que se define un elemento de contenedor, @container se puede usar como una consulta de medios para aplicar los estilos que desee cuando se cumplan las reglas.

Este ejemplo muestra que cuando el ancho del contenedor supera los 50 em, se convierte en un diseño horizontal con flexbox.

Actualmente no hay soporte de navegador para usar consultas de contenedores, algunos como Chrome dicen que se puede habilitar a través de chrome://flag para usar esta propiedad, pero su implementación es inconsistente.

Puede mantenerse al día con su adopción entre navegadores en Can I Use (https://caniuse.com/?search=%40container ), una función que está ganando mucho impulso, por lo que es posible que pronto la vea implementada en su navegador favorito.

  1. :has()

:has() es una nueva pseudoclase que le permite seleccionar un elemento en función de sus descendientes. Por ejemplo, puede aplicar diferentes estilos a una imagen en una figura, dependiendo de si tiene una leyenda de figura o no. Si lo piensas bien, las posibilidades son infinitas.

Suponiendo que tiene un contenedor llamado .container como elemento principal, si este contenedor tiene un h1 como elemento secundario, entonces el fondo debe ser verde. Este tipo de caso de uso es resuelto por esta pseudoclase mediante:

Actualmente solo es compatible con Safari versión 15.4 y Safari Technology Preview.

Puede aprender cómo adoptar esta función en los principales navegadores en Can I Use.

  1. Subgrid

El uso de Subgrid permite que los elementos hereden de su cuadrícula principal, ya sea fila o columna. Usando subgrid, puede alinear elementos con diferentes longitudes sin definir una altura fija.

Si desea utilizar una subgrid, debe configurar el elemento principal como un elemento de cuadrícula tradicional. En los elementos secundarios del elemento, la cuadrícula secundaria se puede usar en las propiedades grid-template-columns o grid-template-rows para que herede la cuadrícula principal.

Solo Firefox lo admite desde 2019.

Puede ver cómo se está desarrollando esta función en otros navegadores en Can I Use (https://caniuse.com/?search=subgrid ).

Para las personas que apenas se están adentrando al mundo del desarrollo web, es interesante ver cómo las características de los lenguajes van evolucionando y como otras características, como media queries o pseudoelementos, iniciaron siendo solo propuestas que con el tiempo se fueron aceptando e integrando.

¿Cuál de estas características le gusta más? La idea es crear sus proyectos lo más eficiente posible y tenemos la opción perfecta.

,
Compartir en:
Artículos relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Rellena este campo
Rellena este campo
Por favor, introduce una dirección de correo electrónico válida.
Tienes que aprobar los términos para continuar

Últimos artículos

Menú
Abrir chat
¡Hola! ¿En qué te puedo ayudar?
¡Hola! 👋🏼
¿En qué puedo ayudarte?