CSS-bestanden invoer

Gecombineerde CSS

CSS-combinatie voorbeelden

Voeg meerdere CSS-blokken samen in één bestand. Gebruik commentaar om secties te scheiden:

Reset, basis en componenten

Invoer (meerdere CSS-blokken)

De combiner concateneert alle blokken. Gebruik Voorbeeld hierboven om meer gegevens te laden.

Wat is een CSS Combiner?

CSS-projecten splitsen stijlen vaak over meerdere bestanden—reset, basis, componenten, utilities. Een CSS Combiner voegt ze samen in één bestand voor productie. Minder HTTP-verzoeken betekent snellere laadtijden. De W3C CSS-specificatie definieert de taal; build-tools zoals Vite en Webpack doen dit bij build-tijd. Dit hulpmiddel doet het on-demand in uw browser.

Plak meerdere CSS-blokken of upload verschillende .css-bestanden. Het hulpmiddel concateneert ze tot één uitvoer. Het draait volledig in uw browser—er wordt niets naar een server gestuurd. Voor formatteren van het resultaat de CSS Formatter. Voor minificeren de CSS Minificeerder.

Hoe dit hulpmiddel te gebruiken

1

Plak of upload CSS

Plak meerdere CSS-blokken in de linker editor (scheid met commentaar zoals /* filename.css */), of klik op Uploaden om meerdere .css-bestanden te selecteren. Gebruik Voorbeeld om voorbeeldgegevens te laden.

2

Bekijk de gecombineerde uitvoer

Het rechterpaneel toont de samengevoegde CSS. De volgorde blijft behouden. Voor validatie de CSS Validator. Voor vendor-prefixes de CSS Prefixer.

3

Kopiëren of downloaden

Gebruik Kopiëren of Downloaden om de gecombineerde CSS op te slaan. Voor eerst SCSS of Less converteren SCSS naar CSS of Less naar CSS.

Waar CSS-combinatie helpt

Legacy-projecten of handgemaakte sites kunnen veel CSS-bestanden hebben. Ze combineren vermindert verzoeken en vereenvoudigt deployment. Bootstrap en Tailwind gebruiken build-pipelines; dit hulpmiddel biedt een snelle handmatige optie. Voor CSS extraheren uit HTML de CSS Extractor.

Voor formatteren van de gecombineerde uitvoer de CSS Formatter. Voor inline-stijlen (bijv. e-mail) CSS naar Inline. Voor converteren tussen preprocessors CSS naar SCSS of CSS naar Less.

Veelgestelde vragen

Zijn mijn gegevens privé?

Ja. Combinatie draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.

Verwijdert het duplicaten?

Dit hulpmiddel concateneert bestanden. Het dedupliceert geen regels of merge selectors. Voor geavanceerde optimalisatie gebruikt u build-tools zoals cssnano of PostCSS.

Hoe zit het met @import?

Het hulpmiddel combineert de tekst zoals die is. Het lost geen @import-URL's op. Voeg geïmporteerde inhoud indien nodig handmatig toe of plak.

Kan ik meerdere bestanden uploaden?

Ja. Gebruik de knop Uploaden en selecteer meerdere .css-bestanden. Ze worden gecombineerd in de geselecteerde volgorde.

Is de volgorde van bestanden belangrijk?

Ja. Latere regels overschrijven eerdere wanneer de specificiteit gelijk is. Rangschik bestanden in de volgorde waarin u wilt dat de cascade van toepassing is.

Gerelateerde hulpmiddelen

Meer info: W3C CSS, MDN CSS, Vite, Webpack.