Le Container Queries sono state introdotte da circa tre anni, ma sorprendentemente molti sviluppatori continuano a utilizzare i vecchi approcci basati sulle media query, spesso ancora lavorando con i pixel come breakpoint!💥

Eppure, le container queries rappresentano una vera e propria "manna dal cielo", semplificando l'applicazione di stili CSS in base alle dimensioni del contenitore invece che della viewport.

Le media query rimangono uno strumento prezioso quando si tratta di definire stili per proprietà globali, come la dimensione della viewport o per la gestione del tema. Tuttavia, quando vogliamo che il design si adatti alla dimensione di un elemento specifico, la soluzione più elegante e flessibile è rappresentata dalle container queries.

Nel mio esempio, ho configurato la classe .wrapper come contenitore principale con l'istruzione container-type: inline-size e ho utilizzato la regola CSS @container (min-width: 12rem) per i suoi elementi figli. In questo modo, quando la sidebar viene utilizzata modifica le dimensioni del contenitore padre e il layout dei figli cambia.

Questa impostazione, permette ai componenti di adattarsi dinamicamente ai cambiamenti del contenitore padre, offrendo una maggiore flessibilità rispetto alle classiche media query che sarebbe necessario cambiare viewport.

<Slider label="Larghezza del contenitore padre"
    className={styles["wrapper"]}>
    <div className={styles["container"]}>
        <div className={styles["button"]}>
            <Google className={styles["icon"]} aria-hidden="true" />
            <span className={styles["text"]}>Google</span>
        </div>
        <div className={styles["button"]}>
            <Angular className={styles["icon"]} aria-hidden="true" />
            <span className={styles["text"]}>Angular</span>
        </div>
    </div>
</Slider>

.wrapper {
  container-type: inline-size;
 
  .container {
    &:before {
      content: none;
    }
 
    .button {
      .icon {
        color: #d1fae5;
        width: 100%;
        height: 100%;
      }
      .text {
        display: none;
      }
    }
    @container (min-width: 12rem) {
      &:before {
        content: "\21E8";
        position: absolute;
      }
      .button {
        display: flex;
        flex-direction: column;
        align-items: center;
 
        .icon {
          border-radius: 0.5rem;
          background: linear-gradient(to top left, #16a34a, #4ade80);
        }
 
        .text {
          font-weight: bold;
        }
      }
    }
  }
}

E a proposito di linguaggi, hai notato che TikTok ha annunciato Lynx? Solamente loro potevano scegliere un "gatto grande" come logo del loro linguaggio di programmazione!😹

Con la funzionalità di React DevTools, puoi monitorare in tempo reale quali componenti vengono renderizzati. Questo ti aiuta a identificare i render inutili e a ottimizzare le prestazioni della tua applicazione.

Vi basta aprire il tab "Components" nell'Inspector, andare nelle impostazioni del tab "General" e attivare "Highlight updates when components render".

In questo modo, ogni volta che un componente viene aggiornato e rifatto il rendering, verrà evidenziato automaticamente!

Nel video, puoi vedere un esempio su una pagina di Airbnb, dove vengono evidenziati i componenti che vengono renderizzati quando modifico il numero di ospiti.