Combinatore CSS
Unisci due file CSS in uno solo
File CSS 1
File CSS 2
CSS combinato
Esempi di combinazione CSS
Incolla due file CSS — uno in ogni editor di input — e lo strumento li unisce in un unico foglio di stile:
Reset/base + stili dei componenti
Clicca su Esempio per caricare CSS di esempio in entrambi gli editor e vedere il risultato unito immediatamente.
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 ti offre un editor a doppio input direttamente nel tuo browser.
Incolla il tuo primo file CSS nell'editor in alto a sinistra e il secondo nell'editor in basso a sinistra (oppure usa Carica su ogni pannello). Il pannello di destra combina automaticamente entrambi gli input. Tutto funziona 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 il tuo primo file CSS nell'editor in alto a sinistra e il secondo file nell'editor in basso a sinistra. Ogni pannello ha il suo pulsante Carica per caricare file .css singolarmente. Usa Esempio per caricare dati di esempio in entrambi gli editor contemporaneamente.
Esamina l'output combinato
Il pannello di destra combina automaticamente entrambi gli input. Il file 1 appare per primo, seguito dal file 2. 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 con due pannelli di input dedicati. 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.
Cosa succede se entrambi i file hanno lo stesso selettore?
Lo strumento li mantiene entrambi così come sono. È sicuro perché la cascata CSS fa sì che l'ultima regola prevalga a parità di specificità — esattamente come i browser gestiscono più fogli di stile. Se hai bisogno di deduplicazione 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.
Come carico i file?
Ogni pannello di input ha il suo pulsante Carica. Cliccalo per selezionare un file .css per quel pannello. Il file 1 va nell'editor in alto a sinistra, il file 2 in quello in basso a sinistra.
L'ordine dei file è importante?
Sì. Il file 1 appare per primo nell'output, poi il file 2. Le regole successive sovrascrivono quelle precedenti quando la specificità è uguale. Disponi i tuoi file di conseguenza.