Consulta de Estados con CSS (Experimental)

3 minuto(s)

CSS viene evolucionando constantemente y con el paso de los años ha venido acumulando muchas funciones, reglas, propiedades, etc., que hacen que el desarrollo frontend sea más divertido, pero también más complejo, por suerte existen grandes comunidades y documentaciones que pueden servir de apoyo a los desarrolladores. En las últimas semanas el equipo de Chromium esta trabajan en una nueva característica llamada consulta de estados, en este Post hablaremos sobre la Consulta de Estados con CSS (Experimental), vamos con ello.

Código de un Proyecto — CSS es muy importante en el desarrollo web

Asimismo, te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida” y “Consejos Para Entrenar Tu Memoria de Programador” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Consulta de Estados con CSS (Experimental).

Hace unos meses la consulta de contenedores fue admitidad por los principales navegadores, los cuales nos permiten consultar un contenedor en función de su ancho o width:


.card-envoltura {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 380px) {
  .card {
    display: flex;
    align-items: center;
  }
}

.card-envoltura {

container-type: inline-size;

container-name: card;

}

@container card (min-width: 380px) {

.card {

display: flex;

align-items: center;

}

También tenemos las consultas de estilos que nos permiten consultar un contenedor y verificar si una variable CSS persiste:


.envoltura-especial {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Agrega acá los estilos para el modo oscuro */
  }
}

.envoltura-especial {

--theme: dark;

container-name: stats;

}

@container stats style(--theme: dark) {

.stat {

/* Agrega acá los estilos para el modo oscuro */

}

Las consultas de estilos, al menos hasta la fecha de este post aún están disponibles en Chrome Canary, pero en unos meses puede ser lanzado para todos los navegadores.

Consulta de Estados con CSS (Experimental)

Supongamos que tenemos un menú en una página web, cuando el usuario va bajando o hace scroll hacia abajo el menú se queda fijo en la parte superior de arriba, esto significa que al menú se le ha aplicado la propiedad/valor position: sticky.

Cambio de estado de un menú de una página web — Los cambios de estados permitirán detectar el cambio de un elemento

El ejemplo anterior es lo que el equipo de Chromiun esta haciendo y experimentando, dentro de esta página de bugs podemos ver que hasta el momento la consulta de estado funciona así:

Definimos un tipo de contenedor como sticky
Usamos la consulta state
Comprobamos si stuck: direction está activo.

Esto significa que cuando el menú es fijo, debemos actualizar la propiedad padding o talvez esconder o mostrar algo, tu decides.

Pero también podremos detectar el cambio de estado de otros elementos y no solo de un menú.

Si vamos al código CSS la consulta de estado del menú sería mas o menos así:


.pagina {
  container-name: sticky-header;
  container-type: sticky;
}

.menu {
  position: sticky;
  top: 0;
}

@container state(stuck: top) {
  .menu__bottom {
    display: none;
  }

  .menu__actions {
    display: none;
  }
}

.pagina {

container-name: sticky-header;

container-type: sticky;

}

.menu {

position: sticky;

top: 0;

}

@container state(stuck: top) {

.menu__bottom {

display: none;

}

.menu__actions {

display: none;

}

Probablemente la sintaxis actual cambie, aun no estoy seguro si usaremos sticky para container-type y stuck para la consulta, esto lo veremos con el paso de los meses y en su lanzamiento oficial.

Eso es todo por el momento, si tienes alguna duda o deseas aportar, recuerda ecribirlo en la caja de comentarios en la parte de abajo.

Conclusión

En este artículo has podido conocer varios aspectos acerca de la consulta de estados que hasta la fecha de este post se encuentra en experimento por parte del equipo de Chromiun, esperemos atento para ver que nuevas características son lanzadas en los próximos meses.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Experimental
29-06-2023
30-06-2023
Crear un Post - Eventos Devs - Foro

Consulta de Estados con CSS (Experimental)

Consulta de Estados con CSS (Experimental)

Conclusión

Nota(s)

Todas Nuestras Páginas y Categorías:

Partners