CSS Academy · Pelajaran

Autoprefixer dan cssnano

Tambahkan awalan vendor secara otomatis dengan Autoprefixer dan perkecil keluaran CSS dengan cssnano.

Pelajaran 2 dari 413 langkah

Autoprefixer dan cssnano adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu Autoprefixer

Autoprefixer adalah plugin PostCSS yang secara otomatis menambahkan awalan vendor (-webkit-, -moz-, -ms-) ke properti CSS berdasarkan peramban yang perlu Anda dukung, menggunakan data dari Can I Use.

Cara Kerja Autoprefixer

Anda menulis CSS standar tanpa awalan. Autoprefixer membaca konfigurasi Browserslist Anda dan menambahkan awalan yang diperlukan untuk peramban target selama proses pembangunan.

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

Konfigurasi Browserslist

Autoprefixer menggunakan Browserslist untuk menentukan peramban target. Tentukan konfigurasinya dalam .browserslistrc atau package.json:

# .browserslistrc
> 1%
last 2 versions
not dead

CSS Modern Membutuhkan Sedikit Awalan

Pada 2024, sebagian besar CSS modern (Grid, Flexbox, properti kustom, transformasi) tidak membutuhkan awalan atau hanya membutuhkan sedikit awalan. Autoprefixer paling berguna untuk properti mutakhir seperti appearance, user-select, dan API yang lebih baru.

Menambahkan Autoprefixer ke PostCSS

Sertakan autoprefixer dalam konfigurasi PostCSS Anda:

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

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

Apa Itu cssnano

cssnano adalah plugin PostCSS yang meminimalkan CSS dengan menghapus spasi kosong, komentar, dan deklarasi berulang, serta menerapkan optimisasi yang aman—sehingga menghasilkan berkas CSS sekecil mungkin.

Prasetel cssnano

cssnano menyediakan prasetel optimisasi:

default: minifikasi aman (menghapus spasi kosong, komentar, dan duplikat)
advanced: optimisasi agresif yang dapat mengubah spesifisitas (gunakan dengan hati-hati)

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

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

Fungsi cssnano

Optimisasi cssnano mencakup:

Menghapus spasi kosong dan komentar
Mengonversi warna ke bentuk terpendek (#ffffff → #fff)
Menggabungkan aturan yang identik
Menghapus properti yang berulang
Memperpendek nilai nol (0px → 0)

Menggabungkan Keduanya dalam Konfigurasi

Konfigurasi PostCSS untuk produksi dengan kedua plugin:

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

Peta Sumber dengan Minifikasi

Selalu buat peta sumber saat menggunakan cssnano dalam versi pengembangan. Peta tersebut memetakan keluaran yang diminimalkan kembali ke CSS sumber untuk penelusuran kesalahan di DevTools.

Alternatif untuk cssnano

Minifier CSS lainnya mencakup: clean-css, lightningcss (berbasis Rust dan sangat cepat), serta minifier bawaan alat pembangunan seperti minifier CSS internal Vite (yang menggunakan esbuild).

Pemeriksaan Singkat

Apa yang menentukan awalan vendor yang ditambahkan Autoprefixer ke CSS Anda?

Jawab di pelajaran interaktif

Ringkasan

Autoprefixer secara otomatis menambahkan awalan vendor berdasarkan peramban target Browserslist Anda, sehingga Anda tidak perlu menulis awalan secara manual. cssnano meminimalkan CSS dengan menghapus spasi kosong dan komentar, serta menerapkan optimisasi yang aman. Gunakan keduanya dalam alur PostCSS produksi. CSS modern membutuhkan lebih sedikit awalan daripada sebelumnya—verifikasikan dengan target peramban yang sebenarnya Anda gunakan.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Autoprefixer dan cssnano” gratis?

Ya — teks lengkap “Autoprefixer dan cssnano” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Autoprefixer dan cssnano”?

Tambahkan awalan vendor secara otomatis dengan Autoprefixer dan perkecil keluaran CSS dengan cssnano. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Autoprefixer dan cssnano” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy