CSS Academy · Lektion

Autoprefixer och cssnano

Lägg automatiskt till leverantörsprefix med Autoprefixer och minimera CSS-utdata med cssnano.

Lektion 2 av 413 steg

Autoprefixer och cssnano är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är Autoprefixer?

Autoprefixer är ett PostCSS-plugin som automatiskt lägger till vendorprefix (-webkit-, -moz-, -ms-) i CSS-egenskaper utifrån vilka webbläsare ni behöver stödja, med hjälp av data från Can I Use.

Så fungerar Autoprefixer

Ni skriver vanlig CSS utan prefix. Autoprefixer läser konfigurationen för Browserslist och lägger till de prefix som krävs för målwebbläsarna under byggprocessen.

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

Konfigurera Browserslist

Autoprefixer använder Browserslist för att fastställa målwebbläsarna. Definiera dem i .browserslistrc eller package.json:

# .browserslistrc
> 1%
last 2 versions
not dead

Modern CSS kräver få prefix

Från och med 2024 behöver den mesta moderna CSS:en (Grid, Flexbox, anpassade egenskaper och transformationer) inga eller mycket få prefix. Autoprefixer är mest användbart för nya CSS-egenskaper som appearance, user-select och nyare API:er.

Lägga till Autoprefixer i PostCSS

Inkludera autoprefixer i PostCSS-konfigurationen:

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

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

Vad är cssnano?

cssnano är ett PostCSS-plugin som minifierar CSS genom att ta bort blanksteg, kommentarer och överflödiga deklarationer samt tillämpa säkra optimeringar – resultatet blir en så liten CSS-fil som möjligt.

Förinställningar i cssnano

cssnano erbjuder optimeringsförinställningar:

default: säkra minifieringar (tar bort blanksteg, kommentarer och dubbletter)
advanced: aggressiva optimeringar som kan ändra specificiteten (använd med försiktighet)

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

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

Vad cssnano gör

cssnano-optimeringar omfattar:

Ta bort blanksteg och kommentarer
Konvertera färger till det kortaste formatet (#ffffff → #fff)
Slå ihop identiska regler
Ta bort överflödiga egenskaper
Förkorta nollvärden (0px → 0)

Kombinera båda i konfigurationen

En PostCSS-konfiguration för produktion med båda plugins:

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

Source maps med minifiering

Generera alltid source maps när ni använder cssnano i utvecklingsbyggen. De kopplar det minifierade resultatet tillbaka till den ursprungliga CSS-koden för felsökning i DevTools.

Alternativ till cssnano

Andra CSS-minifierare är bland annat clean-css, lightningcss (mycket snabb och Rust-baserad) samt inbyggda minifierare i byggverktyg, till exempel Vites interna CSS-minifierare (som använder esbuild).

Snabbkontroll

Vad avgör vilka vendorprefix Autoprefixer lägger till i er CSS?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Autoprefixer lägger automatiskt till vendorprefix utifrån målwebbläsarna i Browserslist, så att ni inte behöver skriva prefixen manuellt. cssnano minifierar CSS genom att ta bort blanksteg och kommentarer samt tillämpa säkra optimeringar. Använd båda i PostCSS-pipelines för produktion. Modern CSS behöver färre prefix än tidigare – kontrollera alltid era faktiska målwebbläsare.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Autoprefixer och cssnano” gratis?

Ja – hela texten till ”Autoprefixer och cssnano” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Autoprefixer och cssnano”?

Lägg automatiskt till leverantörsprefix med Autoprefixer och minimera CSS-utdata med cssnano. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Autoprefixer och cssnano”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy