CSS Academy · Pelajaran

Reset dan Normalisasi CSS

Hapus gaya bawaan peramban yang tidak konsisten dengan reset CSS dan lembar gaya normalisasi.

Reset dan Normalisasi CSS adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Masalahnya: Bawaan Peramban yang Tidak Konsisten

Setiap peramban memiliki lembar gaya agen pengguna bawaan dengan gaya default untuk tajuk, margin, padding, daftar, dan elemen formulir. Bawaan ini berbeda di setiap peramban sehingga menyebabkan tampilan yang tidak konsisten.

Pengaturan Ulang CSS

Pengaturan ulang CSS menghapus semua bawaan peramban sehingga memberi Anda lembar kosong. Pengaturan ulang Eric Meyer yang terkenal menetapkan margin, padding, dan banyak properti ke nol atau none.

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

Normalisasi CSS

Normalize.css menggunakan pendekatan berbeda: alih-alih menghapus semua bawaan, ini membuat bawaan peramban menjadi konsisten dan memperbaiki bug yang telah diketahui, sekaligus mempertahankan bawaan yang berguna seperti ukuran tajuk.

Perbandingan Pengaturan Ulang dan Normalisasi CSS

Perbandingan:

Pengaturan ulang: lembar kosong, Anda menentukan semuanya, lebih banyak pekerjaan
Normalisasi: dasar yang konsisten dengan bawaan yang berguna tetap dipertahankan, lebih sedikit kode khusus

Pengaturan Ulang CSS Modern

Pengaturan ulang modern yang populer (oleh Josh Comeau) menargetkan bawaan yang paling berdampak:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

Gambar sebagai Blok

Menjadikan gambar display: block menghilangkan celah sebaris bawaan (yang disebabkan oleh line-height) di bagian bawah gambar di dalam kontainer:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

Pola Pengaturan Ulang Daftar

Hapus penanda daftar dan indentasi saat menata navigasi khusus atau daftar antarmuka pengguna:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

Pengaturan Ulang Elemen Formulir

Elemen formulir (input, button, textarea) tidak mewarisi font secara default di banyak peramban. Perbaikan yang umum:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Preflight milik Tailwind

Tailwind CSS menyertakan pengaturan ulangnya sendiri yang disebut Preflight, yang dibangun di atas modern-normalize. Jika Anda menggunakan Tailwind, pengaturan ulang sudah diterapkan secara otomatis.

Tempat Menempatkan Pengaturan Ulang

Selalu tempatkan lembar gaya pengaturan ulang/normalisasi Anda pertama, sebelum gaya komponen atau utilitas apa pun. Urutan kaskade memastikan gaya Anda menimpa pengaturan ulang tanpa konflik spesifisitas.

Pertimbangan Pengaturan Ulang Khusus

Buat pengaturan ulang minimal Anda sendiri yang disesuaikan dengan proyek, bukan menyertakan pengaturan ulang pihak ketiga secara penuh. Sertakan hanya aturan yang Anda perlukan agar ukuran muatan CSS tetap kecil.

<p>Base font-size and line-height set on the root element affect the whole page.</p>

Pemeriksaan Singkat

Apa perbedaan utama antara pengaturan ulang CSS dan normalisasi CSS?

Ringkasan

Gaya bawaan peramban tidak konsisten. Pengaturan ulang CSS menghapus semua bawaan; normalize.css membuatnya konsisten. Pengaturan ulang modern berfokus pada aturan yang paling berdampak, seperti box-sizing: border-box, gambar dengan lebar maksimum, dan font yang diwariskan untuk elemen formulir. Selalu muat pengaturan ulang terlebih dahulu.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Reset dan Normalisasi CSS” gratis?

Ya — teks lengkap “Reset dan Normalisasi CSS” 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 “Reset dan Normalisasi CSS”?

Hapus gaya bawaan peramban yang tidak konsisten dengan reset CSS dan lembar gaya normalisasi. 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 4 dari 4.

Berapa lama pelajaran “Reset dan Normalisasi CSS” 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