Le Cascade Style Sheets(CSS) Container Query sono una nuova funzionalità dei CSS. Sono nate per superare i limiti delle media query tradizionali nei fogli di stile e permettere una migliore manutenibilità del codice CSS.
Cosa sono le media query in CSS
Le media query rappresentano uno degli strumenti che ti permette di creare Web Application responsive, cioè che si adattano al dispositivo utilizzato per accedervi. Tipicamente tale adattamento avviene utilizzando la variabile della larghezza della finestra di visualizzazione del browser (viewport width), per es.
@media (min-width: 600px) {
.article {
flex-direction: row;
text-align: left;
}
}
Tale modo di adattare il design ha funzionato bene per diversi anni, ma ora c’è la necessità, per via della complessità delle Web Application e dei design, di avere un codice più modulare e manutenibile. Cosa vuol dire?
Quando adatti il tuo design alle dimensioni del viewport sei costretto ad aggiungere continuamente codice per definire nel dettaglio cosa avverrà con un determinato tipo di componente quando magari le colonne del design saranno 2, 3, 4. Cioè più il contesto è specifico più devi aggiungere codice per processarlo correttamente. Questo tipo di approccio può andare bene ( come lo è stato per diversi anni) per design semplici, ma quando si vuole realizzare una User Experience(UX) di livello ed ottenere la migliore User Interaction, questa modalità ne rende complicata la gestione e manutenzione.
Le CSS Container Query
Le CSS Container Query superano il limite delle componenti che devono essere visualizzate differentemente in diversi contesti, scegliendo di applicare il design corretto non in base alle dimensioni della finestra ma in base alle dimensioni del container in cui quel determinato elemento insiste.
In pratica l’elemento sarà sempre uguale in base alle dimensioni del container e non in base alle dimensioni della finestra permettendo di rendere il codice quanto di più semplice ci sia. Questo è un esempio
@container (min-width: 600px) {
.article {
flex-direction: row;
text-align: left;
}
}E ne potete trovare altri qui.
Nella maniera indicata la componente “article” si comporterà sempre nella stessa maniera in qualsiasi contesto si trovi perchè abbinata al suo container. Per un approfondimento sull’argomento puoi visitare il portale di sviluppo di Mozilla.
Glue Labs e CSS
Ti supportiamo nella realizzazione di Web Design e nello sviluppo di Applicazioni Web. Grazie all’esperienza maturata in tantissimi settori, con numerosi Clienti e con un solido gruppo aziendale ti forniamo formazione avanzata e servizi chiavi in mano per cogliere le opportunità di progresso e di business. Contattaci subito e senza impegno per maggiori informazioni.
