Sintassi

Esempi di sintassi corretta:

• @container (min-width: 600px): applica le regole se il contenitore è largo almeno 600px.

• @container sidebar (max-width: 400px): applica regole a un contenitore nominato sidebar solo se largo al massimo 400px.

Tipi di query supportate:

• width / height: come nelle media queries.
• inline-size / block-size: per layout più flessibili (es. verticali).
• aspect-ratio, orientation, resolution (meno usati, ma supportati).

Nota: Il contenitore deve avere impostato container-type per poter usare @container.

Esempio Direttiva: @container

Codice Esempio: @container

CODE: CSS

1. .card-wrapper {

2.   container-type: inline-size;

3.   width: 100%;

4.   max-width: 800px;

5.   border: 2px solid #ccc;

6.   padding: 1rem;

7. }

9. .card {

10.   background: #f5f5f5;

11.   padding: 1rem;

12.   font-size: 16px;

13.   border-radius: 8px;

14.   text-align: center;

15. }

17. @container (min-width: 600px) {

18.   .card {

19.     display: flex;

20.     justify-content: space-between;

21.     font-size: 20px;

22.     background: #d4edda;

23.   }

24. }

Contenuto Esempio: @container

  
  <style>
    .card-wrapper {
      container-type: inline-size;
      width: 100%;
      max-width: 800px;
      border: 2px solid #ccc;
      padding: 1rem;
    }

    .card {
      background: #fff;
      padding: 1rem;
      font-size: 16px;
      border-radius: 8px;
      text-align: center;
    }

    @container (min-width: 600px) {
      .card {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        background: #d4edda;
      }
    }
  </style>

  <div class="card-wrapper">
    <div class="card">
      Questo contenuto cambia layout se il contenitore supera i 600px di larghezza.
    </div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser