0Pricing
CSS Academy · Lektion

Autoprefixer und cssnano

Fügen Sie mit Autoprefixer automatisch Vendor-Präfixe hinzu und minimieren Sie die CSS-Ausgabe mit cssnano.

Autoprefixer und cssnano ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Autoprefixer?

Autoprefixer ist ein PostCSS-Plugin, das CSS-Eigenschaften automatisch Vendor-Präfixe (-webkit-, -moz-, -ms-) hinzufügt. Grundlage dafür sind die Browser, die Sie unterstützen müssen, sowie Daten von Can I Use.

So funktioniert Autoprefixer

Sie schreiben standardmäßiges CSS ohne Präfixe. Autoprefixer liest Ihre Browserslist-Konfiguration und fügt während des Build-Prozesses die erforderlichen Präfixe für Ihre Zielbrowser hinzu.

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Browserslist-Konfiguration

Autoprefixer verwendet Browserslist, um die Zielbrowser zu bestimmen. Definieren Sie sie in .browserslistrc oder package.json:

# .browserslistrc
> 1%
last 2 versions
not dead

Modernes CSS benötigt nur wenige Präfixe

Seit 2024 benötigt das meiste moderne CSS (Grid, Flexbox, benutzerdefinierte Eigenschaften, Transformationen) keine oder nur wenige Präfixe. Autoprefixer ist besonders für neue Eigenschaften wie appearance, user-select und neuere APIs nützlich.

Autoprefixer zu PostCSS hinzufügen

Binden Sie autoprefixer in Ihre PostCSS-Konfiguration ein:

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

Was ist cssnano?

cssnano ist ein PostCSS-Plugin, das CSS minimiert, indem es Leerzeichen, Kommentare und redundante Deklarationen entfernt und sichere Optimierungen anwendet. Dadurch entsteht eine möglichst kleine CSS-Datei.

cssnano-Voreinstellungen

cssnano bietet Optimierungsvoreinstellungen:

  • default: sichere Minimierungen (entfernt Leerzeichen, Kommentare und Duplikate)
  • advanced: aggressive Optimierungen, die die Spezifität verändern können (mit Vorsicht verwenden)
// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

Was cssnano macht

Zu den Optimierungen von cssnano gehören:

  • Leerzeichen und Kommentare entfernen
  • Farben in die kürzeste Form umwandeln (#ffffff → #fff)
  • Identische Regeln zusammenführen
  • Redundante Eigenschaften entfernen
  • Nullwerte verkürzen (0px → 0)

Beide in der Konfiguration kombinieren

Eine PostCSS-Produktionskonfiguration mit beiden Plugins:

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

Source Maps bei der Minimierung

Erzeugen Sie bei der Verwendung von cssnano in Entwicklungs-Builds immer Source Maps. Sie ordnen die minimierte Ausgabe wieder dem Quell-CSS zu und erleichtern so das Debugging in den DevTools.

Alternativen zu cssnano

Weitere CSS-Minimierer sind: clean-css, lightningcss (sehr schnell und auf Rust basierend) sowie in Build-Werkzeuge integrierte Minimierer wie der interne CSS-Minimierer von Vite (der esbuild verwendet).

Kurzer Test

Wodurch wird bestimmt, welche Vendor-Präfixe Autoprefixer zu Ihrem CSS hinzufügt?

Zusammenfassung

Autoprefixer fügt auf Grundlage der Zielbrowser Ihrer Browserslist automatisch Vendor-Präfixe hinzu, sodass Sie Präfixe nicht manuell schreiben müssen. cssnano minimiert CSS, indem es Leerzeichen und Kommentare entfernt und sichere Optimierungen anwendet. Verwenden Sie beide Plugins in PostCSS-Produktionspipelines. Modernes CSS benötigt weniger Präfixe als früher – überprüfen Sie dies anhand Ihrer tatsächlichen Zielbrowser.

Häufig gestellte Fragen

Ist die Lektion „Autoprefixer und cssnano“ kostenlos?

Ja — der vollständige Text von „Autoprefixer und cssnano“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Autoprefixer und cssnano“?

Fügen Sie mit Autoprefixer automatisch Vendor-Präfixe hinzu und minimieren Sie die CSS-Ausgabe mit cssnano. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Autoprefixer und cssnano“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Was PostCSS macht und wie es funktioniert
  2. Autoprefixer und cssnano
  3. Eigene PostCSS-Plugins
  4. PostCSS in Vite und Webpack
← Zurück zu CSS Academy