Lo que vas a encontrar...
Si ha estado siguiendo los últimos desarrollos de CSS, probablemente esté muy entusiasmado con el futuro del desarrollo web receptivo. Las solicitudes de contenedores son una de las mejores adiciones a CSS de las que hablan la mayoría de los desarrolladores front-end. Si no está familiarizado con las consultas de contenedores, puede leer más en el enlace de arriba.
Gran parte del entusiasmo en torno a las consultas sobre contenedores se ha centrado en las consultas sobre el tamaño de los contenedores. Pero hay un aspecto aún más emocionante de las consultas de contenedores que la mayoría de los desarrolladores desconocen: las consultas de estilo contenedor. En este artículo, veremos todo lo que necesita saber sobre las consultas de estilo.
Este artículo asume que tiene conocimientos básicos de al menos un lenguaje de programación, preferiblemente CSS, y tiene acceso a un navegador experimental como Chrome Canary.
En este artículo, cubriremos:
Sin más preámbulos, vamos.
¿Qué son las consultas de estilo?
Las consultas de contenedores funcionan como consultas de medios, pero le permiten consultar un componente directamente en función de su tamaño o estilo en lugar de la ventana gráfica del dispositivo. Si desea obtener más información sobre cómo consultar un contenedor en función de su tamaño, consulte el enlace anterior. La mayoría de los desarrolladores usan consultas de contenedores para consultar un contenedor en función de su tamaño, así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.card { /* query the inline-direction size of this parent */ container-type: inline-size; display :block; background: blue; } @container (min-width: 600px) { .card { /* styles to apply when the card container is greater than or equal to 600px */ display: flex; background: green; } } |
El código anterior consulta el contenedor del mapa en función de su tamaño y los efectos solo cambian cuando el mapa tiene 420 px de ancho o más.
Las consultas de estilo funcionan de la misma manera, pero le permiten consultar los valores calculados o el estilo de un elemento principal en un contenedor de consulta y luego aplicar los estilos a los elementos secundarios en función de su elemento principal.
En términos más simples, puede usar consultas de estilo para consultar un contenedor en función de su estilo en lugar de solo su tamaño. Así es como funciona:
|
1 2 3 4 5 6 7 |
@container style(color: purple) { /* styles to apply when the card container has a color of purple */ .card { /* To change the background to green: */ background: green; } } |
El código anterior cambiará el fondo de un mapa o sección a verde si la sección principal es de color púrpura. A diferencia de las consultas de tamaño, en las que debe establecer un elemento como contenedor de consulta con la etiqueta de tipo de contenedor, todos los elementos se consideran un contenedor de consulta para las consultas de estilo a menos que se especifique lo contrario.
A continuación, veremos dónde y cuándo usar consultas de estilo.
Dónde y cuándo usar consultas de estilo CSS
Las consultas de estilo CSS pueden consultar estilos no heredables de un contenedor principal y aplicar dicho estilo a los elementos secundarios. Los estilos CSS no heredables incluyen alto, ancho, borde, margen, relleno, etc. Para ver cómo funciona esto, vamos a crear un mapa:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://blog.logrocket.com/new-css-style-queries/style.css"> </head> <body> <div class="card"> <div class="cardheader"> <img src="https://images.unsplash.com/photo-1657664042448-c955b411d9d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" class="card-img" alt=""> </div> <div class="card-body"> <h5 class="title">A card</h5> <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint facere, neque fugit rem recusandae libero aliquid do</p> <button class="btn">Get started</button> </div> </div> </body> </html> |
Ahora, diseñemos el mapa:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.card{ width:400px; padding: 20px; border-radius: 4px; border: solid 3px red; background-color: blueviolet; border-color: red; } .card-header{ margin: -20px -20px 0 -20px; } .card-img{ width: 100%; height: auto; } .title { font-size: 1.5rem; margin-bottom: 0.5rem; } .btn{ border: solid 2px; width: 100%; padding: 0.75rem 1rem; border-radius: 4px; background-color: lightblue; color: black; font-weight: 600; cursor: pointer; border-color: black; } .btn:hover{ background-color: brown; } |
El código anterior se verá así:
Si queremos que el botón herede el color del borde del mapa, ejecutaremos el siguiente código:
|
1 2 3 4 5 |
@container style(border-color: red) { .btn { border-color: red; } } |
El resultado se verá así:
Más artículos interesantes de LogRocket:
A diferencia de las consultas de tamaño, las consultas de estilo no tienen un caso de uso sólido. Claro, se ven geniales, son nuevos y hacen que su código se vea mejor, pero aún no solucionan ningún problema específico. Casi todo lo que hacen las consultas de estilo se puede hacer con una clase o un atributo de datos.
Por ejemplo, la funcionalidad anterior se puede lograr apuntando directamente al botón y configurando su borde de color rojo o creando variables personalizadas y agregándolas al estilo del botón.
Sin embargo, las consultas de estilo pueden brillar cuando se combinan con consultas de tamaño, lo que solo es realmente útil cuando se usan variables de orden superior (propiedades personalizadas). Aquí un ejemplo :
|
1 2 3 |
@container card (min-width: 600px) and style(--responsive: true) { /* styles for responsive components at a minimum width of 600px */ } |
El uso de consultas de estilo con consultas de tamaño le permitirá aplicar una lógica específica, lo que dará como resultado un estilo más flexible propiedad del componente. Es un truco útil que podemos ver que se vuelve popular si las solicitudes de estilo terminan siendo enviadas.
Problemas con las consultas de estilo
Tal como está, todavía queda mucho trabajo por hacer en las solicitudes de estilo antes de que se envíen, si es que alguna vez lo hacen. Las consultas de estilo han recibido muchas críticas negativas de los probadores beta, pero el mayor problema es la falta de especificidad para las propiedades CSS no personalizadas.
Por ejemplo, nadie entiende cómo se comportará style(width: calc(…)) o cómo tratarán las consultas de estilo con propiedades abreviadas como style(color:Heredar). Estos problemas pueden generar problemas significativos en los procesos de codificación y pueden impedir que los desarrolladores utilicen consultas de estilo.
Si bien puede haber soluciones para estos problemas en proceso, es probable que las solicitudes de estilo no se envíen con las solicitudes de tamaño hasta que se resuelvan estos problemas, ya que las solicitudes de tamaño del contenedor aún conservan muchas características sin consultas de estilo.
Actualmente no hay polyfills disponibles para consultas de estilo. El único polyfill que existe para consultas de contenedor solo cubre consultas de tamaño de contenedor, pero aún no se ha hecho nada para consultas de estilo de contenedor en el momento de escribir este artículo.
Si quiere hacerle un favor al mundo CSS y crear un polyfill para las solicitudes de estilo, aquí hay una guía que puede usar.
Conclusión
Si bien las consultas de estilo pueden no ser lo mejor que le puede pasar al diseño web receptivo desde las consultas de medios, todavía tienen mucho potencial. Todavía pueden volverse valiosos para los desarrolladores si todos sus problemas se resuelven cuando se envían.
