# Container queries nei Themes?

**URL:** <https://meta.discourse.org/t/container-queries-in-themes/299366>\
**Category:** Development\
**Created:** [14 Marzo 2024, 4:48pm UTC](https://meta.discourse.org/t/container-queries-in-themes/299366 "2024-03-14T16:48:25Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [15 Marzo 2024, 10:47pm UTC](https://meta.discourse.org/t/container-queries-in-themes/299366/2 "2024-03-15T22:47:12Z")

</div>

Ho appena fatto un rapido test e posso confermare che le query sui contenitori funzionano nei temi… una cosa che noterò è che sono molto più difficili da ragionare rispetto alle media query. Un paio di noi nel team sono stati inizialmente confusi da questo.

Non sono semplicemente media query sui contenitori, ma hanno un set separato di requisiti. Il problema più grande è:

> Il contenimento delle dimensioni disattiva la capacità di un elemento di ottenere informazioni sulle dimensioni dai suoi contenuti, il che è importante per le query sui contenitori per evitare loop infiniti.

da [container-type - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/container-type)

Quindi non è possibile utilizzare una query sui contenitori con un contenitore che ha una larghezza dinamica. È necessario impostare una larghezza statica sul contenitore. Questo limita in modo significativo ciò che ci si aspetterebbe di poter fare con loro, sfortunatamente.

> **Ecco una prova di concetto davvero goffa che dimostra che funzionano**
>
> ```scss
> @media screen and (min-width: 500px) {
> .fk-d-button-tooltip {
> width: 300px;
> background: green;
> container-type: inline-size;
> }
> }
> 
> @media screen and (min-width: 1000px) {
> .fk-d-button-tooltip {
> width: 500px;
> background: yellow;
> container-type: inline-size;
> }
> }
> 
> @container (min-width: 400px) {
> #create-topic {
> background: blue !important;
> }
> }
> 
> ```
> 
> Contenitore inferiore a 400px:
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/0/d/8/0d8c704aea4e2b2a7ad8c7530be1ff72964b5689.png)
> 
> Contenitore superiore a 400px:
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/1/c/a/1cac943d1ab472fddbf6b8426d9347665f20ff81.png)

---

_[View the full topic](https://meta.discourse.org/t/container-queries-in-themes/299366)._