CSS-sammenslåing
Slå sammen to CSS-filer til én
CSS-fil 1
CSS-fil 2
Sammenslått CSS
Eksempler på CSS-sammenslåing
Lim inn to CSS-filer — én i hver inndataeditor — og verktøyet slår dem sammen til ett stilark:
Reset/base + komponentstiler
Klikk Eksempel for å laste eksempel-CSS i begge editorene og se det sammenslåtte resultatet med en gang.
Hva er CSS-sammenslåing?
CSS-prosjekter deler ofte stiler på flere filer — reset, base, komponenter, hjelpeklasser. En CSS-sammenslåer slår dem sammen til én produksjonsfil. Færre HTTP-forespørsler gir raskere lasting. W3C CSS-spesifikasjonen definerer språket; byggeverktøy som Vite og Webpack gjør dette ved bygg. Dette verktøyet gir deg en rask dobbel-inndataeditor rett i nettleseren.
Lim inn din første CSS-fil i den øvre venstre editoren og den andre i den nedre venstre editoren (eller bruk Last opp på hvert panel). Høyre panel kombinerer begge inndataene automatisk. Alt kjører i nettleseren din — ingenting sendes til server. For å formatere resultatet, bruk CSS-formaterer. For minifisering, CSS-minifiserer.
Slik bruker du verktøyet
Lim inn eller last opp CSS
Lim inn din første CSS-fil i den øvre venstre editoren og den andre filen i den nedre venstre editoren. Hvert panel har sin egen Last opp-knapp for å laste .css-filer enkeltvis. Bruk Eksempel for å laste eksempeldata i begge editorene samtidig.
Gjennomgå sammenslått utdata
Høyre panel kombinerer begge inndataene automatisk. Fil 1 vises først, etterfulgt av fil 2. For validering, bruk CSS-validator. For leverandørprefiks, CSS-prefiks.
Kopier eller last ned
Bruk Kopier eller Last ned for å lagre det sammenslåtte CSS-et. For å konvertere SCSS eller Less først, bruk SCSS til CSS eller Less til CSS.
Hvor CSS-sammenslåing hjelper
Eldre prosjekter eller håndlagde sider kan ha mange CSS-filer. Å slå dem sammen reduserer forespørsler og forenkler utrulling. Bootstrap og Tailwind bruker byggløp; dette verktøyet gir et raskt manuelt alternativ med to dedikerte inndatapaneler. For å hente CSS fra HTML, bruk CSS-uttrekker.
For å formatere det sammenslåtte resultatet, bruk CSS-formaterer. For inline-stiler (f.eks. e-post), CSS til inline. Mellom preprocessorere: CSS til SCSS eller CSS til Less.
Ofte stilte spørsmål
Er dataene mine private?
Ja. Sammenslåing skjer helt i nettleseren din. Ingen data sendes til server.
Hva skjer hvis begge filene har samme selektor?
Verktøyet beholder begge som de er. Dette er trygt fordi CSS-kaskaden gjør at den siste regelen vinner ved lik spesifisitet — akkurat slik nettlesere håndterer flere stilark. Trenger du avansert deduplisering, bruk byggeverktøy som cssnano eller PostCSS.
Hva med @import?
Verktøyet kombinerer teksten som den er. Det løser ikke @import-URL-er. Lim inn importert innhold manuelt ved behov.
Hvordan laster jeg opp filer?
Hvert inndatapanel har sin egen Last opp-knapp. Klikk den for å velge en .css-fil for det panelet. Fil 1 går i den øvre venstre editoren, fil 2 i den nedre venstre.
Er rekkefølgen på filene viktig?
Ja. Fil 1 vises først i utdataen, deretter fil 2. Senere regler overstyrer tidligere når spesifisitet er lik. Ordne filene dine deretter.