Combinatore CSS
Unisci più file CSS in uno solo
File CSS di input
CSS combinato
Esempi di combinazione CSS
Unisci più blocchi CSS in un file. Usa i commenti per separare le sezioni:
Reset, base e componenti
Il combinatore concatena tutti i blocchi. Usa Esempio in alto per caricare altri dati.
Cos'è un Combinatore CSS?
I progetti CSS spesso suddividono gli stili in più file—reset, base, componenti, utility. Un combinatore CSS li unisce in un unico file per la produzione. Meno richieste HTTP significano tempi di caricamento più veloci. La specifica W3C CSS definisce il linguaggio; strumenti di build come Vite e Webpack lo fanno in fase di build. Questo strumento lo fa su richiesta nel tuo browser.
Incolla più blocchi CSS o carica diversi file .css. Lo strumento li concatena in un unico output. Funziona interamente nel tuo browser—nulla viene inviato a un server. Per formattare il risultato, usa il Formattatore CSS. Per minificare, usa il Minificatore CSS.
Come usare questo strumento
Incolla o carica CSS
Incolla più blocchi CSS nell'editor di sinistra (separa con commenti come /* filename.css */), oppure clicca su Carica per selezionare più file .css. Usa Esempio per caricare dati di esempio.
Esamina l'output combinato
Il pannello di destra mostra il CSS unito. L'ordine è preservato. Per la validazione, usa il Validatore CSS. Per aggiungere prefissi vendor, usa il Prefissatore CSS.
Copia o scarica
Usa Copia o Scarica per salvare il CSS combinato. Per convertire prima SCSS o Less, usa SCSS in CSS o Less in CSS.
Quando la combinazione CSS è utile
I progetti legacy o i siti artigianali possono avere molti file CSS. Combinarli riduce le richieste e semplifica il deployment. Bootstrap e Tailwind usano pipeline di build; questo strumento offre una rapida opzione manuale. Per estrarre CSS dall'HTML, usa l'Estrattore CSS.
Per formattare l'output combinato, usa il Formattatore CSS. Per gli stili inline (es. email), usa CSS a Inline. Per convertire tra preprocessori, usa CSS a SCSS o CSS a Less.
Domande Frequenti
I miei dati sono privati?
Sì. La combinazione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.
Rimuove i duplicati?
Questo strumento concatena i file. Non elimina le regole duplicate né unisce i selettori. Per un'ottimizzazione avanzata, usa strumenti di build come cssnano o PostCSS.
E @import?
Lo strumento combina il testo così com'è. Non risolve gli URL di @import. Includi o incolla manualmente il contenuto importato se necessario.
Posso caricare più file?
Sì. Usa il pulsante Carica e seleziona più file .css. Vengono combinati nell'ordine selezionato.
L'ordine dei file è importante?
Sì. Le regole successive sovrascrivono quelle precedenti quando la specificità è uguale. Disponi i file nell'ordine in cui vuoi che la cascata si applichi.