Generatore CSS
Container Query
Crea visivamente le query @container CSS con la GUI. Include impostazioni container-type/name, breakpoint, 6 preset e anteprima live. Converti facilmente le media query. Nessuna registrazione richiesta.
Impostazioni Contenitore
Preset
Breakpoint
Anteprima Live
Codice Generato
🔄 Media Query → Container Query
Potrebbe piacerti anche
Informazioni sul Generatore CSS Container Query
Il Generatore CSS Container Query è uno strumento per sviluppatori che ti consente di creare visivamente le query "@container", il nuovo standard nel responsive design, utilizzando un'interfaccia grafica. Mentre le media query dipendono dalla larghezza del viewport, le container query dipendono dalla larghezza dell'elemento genitore, consentendo un cambio di layout flessibile per ogni componente.
Questo strumento gestisce senza problemi le impostazioni container-type/name, l'aggiunta di breakpoint e le anteprime dal vivo. Include anche un convertitore in blocco per le media query esistenti, semplificando la transizione alla nuova specifica. Tutto viene eseguito in modo sicuro all'interno del tuo browser.
Come Usare
Configura Contenitore e Aggiungi Breakpoint
Imposta il selettore del contenitore e container-type (solitamente inline-size). Quindi fai clic su "Aggiungi Breakpoint" e inserisci gli stili CSS da applicare quando il contenitore raggiunge una dimensione specifica. Puoi anche iniziare da un preset.
Test in Anteprima Live
Trascina il bordo destro dell'area di anteprima per ridimensionare il contenitore e verificare che gli stili cambino correttamente ai tuoi breakpoint. Puoi anche testare con HTML personalizzato dal tuo progetto.
Esporta e Converti il Codice
Copia il codice CSS generato nel tuo progetto. Usa il "Convertitore di Media Query" per sostituire facilmente la sintassi @media esistente con @container, risparmiando tempo di migrazione.
Glossario Container Query
- Container Query (@container)
- Una funzione CSS per modificare gli stili in base alle dimensioni di un elemento genitore specifico (contenitore) anziché del viewport.
- container-type
- Proprietà che definisce un elemento come contenitore per le query. inline-size ha come target l'asse orizzontale; size ha come target entrambi gli assi.
- container-name
- Proprietà per nominare esplicitamente un contenitore, utile quando più contenitori sono nidificati.
- Containment
- Un concetto richiesto per le container query, che isola il layout/calcolo degli stili di un elemento dal resto del DOM.
- Inline-axis
- L'asse lungo il quale scorre il testo. Nella scrittura orizzontale, questo corrisponde alla larghezza.
- Media Query (@media)
- Tradizionale funzione CSS che applica gli stili in base alle dimensioni del viewport o alle caratteristiche del dispositivo.
- cqw / cqh / cqi / cqb
- Unità relative per le container query che rappresentano l'1% della larghezza/altezza/dimensione inline/dimensione blocco del contenitore, simili a vw/vh.
Domande Frequenti
- Q.I dati che inserisco vengono inviati a un server?
- No. Questo strumento viene eseguito interamente lato client (nel tuo browser). Il tuo codice HTML/CSS e il codice generato non vengono mai inviati a server esterni.
- Q.Dovrei usare le media query o le container query?
- Usa le media query per le macro-impaginazioni (struttura della pagina come intestazioni, barre laterali) e le container query per le micro-impaginazioni (componenti come schede, pulsanti) che dovrebbero ottimizzare il loro layout in base allo spazio disponibile.
- Q.Qual è la compatibilità dei browser?
- È supportato in tutti i principali browser moderni dal 2023, tra cui Chrome 105, Safari 16 e Firefox 110. I browser legacy non sono supportati, ma è possibile implementare dei fallback eleganti.
- Q.Ci sono avvertenze quando si usa container-type: size?
- Quando si usa size, viene applicato il contenimento sull’asse del blocco (altezza). Se non imposti un’altezza esplicita, l’elemento potrebbe collassare a zero altezza. L’utilizzo di inline-size è generalmente raccomandato.
- Q.Come viene isolata l’anteprima HTML personalizzata?
- Utilizziamo Shadow DOM per isolare l’area di anteprima, assicurandoci che il CSS dello strumento non interferisca con il markup nell’anteprima.
Casi d’Uso
Componenti Card Riutilizzabili
Perfetto per progettare interfacce utente a scheda indipendenti che si adattano a un’area principale a 3 colonne o a una barra laterale a 1 colonna.
Integrazione con CMS e Widget
Crea blocchi per CMS come WordPress che adattano automaticamente il loro layout indipendentemente dalla larghezza dell’area del widget.
Interfacce Dashboard Complesse
Ideale per ottimizzare dinamicamente il posizionamento di grafici e statistiche all’interno di pannelli della dashboard ridimensionabili.
Modernizzazione del Codice Legacy
Usa il convertitore per trasformare enormi blocchi di media query in container query gestibili e basati su componenti.
Documentazione Tecnica CSS Container Query
Le CSS Container Query si ottengono combinando la regola @container e la proprietà container-type. Questo è un approccio fondamentalmente diverso dalle media query tradizionali.
Differenza dalle Media Query
Le media query (@media) cambiano gli stili in base alle dimensioni del viewport. Le container query (@container) cambiano gli stili in base alle dimensioni del contenitore genitore. Posizionare lo stesso componente in una barra laterale e nel contenuto principale richiedeva una gestione separata delle media query, ma le container query applicano automaticamente il layout corretto.
Valori di container-type
inline-size consente di interrogare solo lungo l'asse orizzontale (inline) ed è la scelta più comune. size interroga sia gli assi orizzontali che verticali ma richiede il contenimento dell'altezza. normal è il valore predefinito ed esclude l'elemento dalle container query.
Supporto Browser
Supportato in Chrome 105+, Safari 16+, Firefox 110+ e Edge 105+. Completamente supportato in tutti i browser moderni dal 2023. I browser non supportati ignorano in modo sicuro le regole @container (miglioramento progressivo).
Invia feedback
Facci sapere la tua opinione per aiutarci a migliorare lo strumento.
Il feedback è temporaneamente sospeso
Il server è occupato o la protezione antispam è attiva. Riprova più tardi.