CSS Minifier

Wat is CSS-minificatie?

CSS-minificatie is het proces van het verwijderen van alle onnodige tekens uit een stylesheet zonder het gedrag ervan te veranderen. Dit betekent het verwijderen van witruimte, regelafbrekingen, opmerkingen en overbodige syntaxis zoals afsluitende puntkomma's en overbodige aanhalingstekens. De browser parseert geminificeerde CSS identiek aan het origineel. De W3C CSS Syntax Module definieert de grammatica; witruimte tussen tokens is optioneel, behalve waar het identifiers van elkaar scheidt. Minificatie maakt hier gebruik van door alles samen te voegen tot het minimale aantal vereiste tekens.

Een online CSS-minifier neemt uw opgemaakte stylesheet en produceert een compacte versie die geoptimaliseerd is voor overdrachtsgrootte. Typische besparingen liggen tussen 15% en 40%, afhankelijk van hoeveel witruimte en hoeveel opmerkingen de bron bevat. Voor een stylesheet van 50 KB betekent dit 7–20 KB minder bytes die bij elke paginaweergave over het netwerk worden verstuurd. Gecombineerd met gzip- of Brotli-compressie op de server verkleint minificatie de uiteindelijke overdrachtsgrootte verder, omdat de gecomprimeerde uitvoer van al-geminificeerde CSS kleiner is dan het comprimeren van het opgemaakte origineel.

Minificatie is een standaardstap in front-end bouwpijplijnen. Hulpmiddelen zoals cssnano, clean-css en esbuild voeren minificatie uit als onderdeel van het bouwproces. Maar tijdens de ontwikkeling moet u vaak een enkel fragment minificeren voor tests, een kritiek CSS-blok inline plaatsen of controleren hoeveel een stylesheet krimpt voordat u het toevoegt aan een bundelconfiguratie. Dat is waar een browser-gebaseerde CSS-minifier van pas komt: plak CSS, ontvang de geminificeerde uitvoer, kopieer hem en ga door.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Waarom deze CSS Minifier gebruiken?

Plak een willekeurige CSS en ontvang geminificeerde uitvoer in milliseconden. Geen buildtool-configuratie, geen CLI-opdrachten, geen account vereist.

Toepassingen van de CSS Minifier

CSS-minificatietechnieken

Een CSS-minifier past verschillende transformaties toe om de bestandsgrootte te verkleinen. Elke transformatie richt zich op een ander type redundantie in de bron. De onderstaande tabel geeft de belangrijkste technieken en hun typische besparing op een opgemaakte stylesheet:

De besparingspercentages variëren per invoer. Zwaar becommentarieerde bestanden profiteren meer van het verwijderen van opmerkingen, terwijl al-compacte bestanden een kleinere winst zien. De meest betrouwbare winst komt van het verwijderen van witruimte en het optimaliseren van afkortingen. Geavanceerde minifiers zoals cssnano voegen ook dubbele selectors samen, klappen longhand-eigenschappen in tot afkortingen (margin-top + margin-right + margin-bottom + margin-left tot margin) en verwijderen overschreven declaraties.

Minificatie versus Gzip-compressie

Minificatie en compressie vullen elkaar aan — ze zijn niet uitwisselbaar. Ze werken op verschillende lagen en stapelen bovenop elkaar:

Codevoorbeelden

CSS programmatisch minificeren in verschillende talen en omgevingen:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Veelgestelde vragen