Pemeriksa dan Validator Kesalahan CSS Terbaik

Q: What is the best CSS error checker?

The best CSS error checker depends on your workflow stage. For a fast, no-install browser check, the Aback Tools CSS Validator reports syntax errors, invalid properties, and malformed selectors with line numbers in under a second. For automated project-wide linting, stylelint is the industry standard - it checks syntax, enforces style conventions, and catches browser-compatibility issues. For runtime errors that only appear in a specific browser, DevTools in Chrome or Firefox shows strikethrough declarations and console warnings for rejected CSS.

Q: How do I check CSS for errors online?

Paste your stylesheet or a specific rule block into the Aback Tools CSS Validator - it processes your code entirely in your browser with no upload required and reports errors with line numbers and plain-language descriptions. For W3C compliance specifically, the official W3C CSS Validation Service at jigsaw.w3.org accepts URLs, file uploads, or direct input. Both tools catch syntax errors and invalid properties; the Aback Tools validator reports errors faster and works without a network request to an external server.

Q: What does a CSS validator actually check?

A CSS validator checks for structural syntax errors (unclosed braces, missing semicolons, malformed selectors), invalid property names (typos like colr instead of color), invalid property values (color: redd), and well-formedness issues like a rule block that opens with { but never closes. It does not check whether a property is supported in a specific browser version - that requires a separate compatibility database like Can I Use. Browser-compatibility checking is handled by tools like stylelint with a browserslist configuration.

Q: What are the most common CSS errors?

Missing semicolons at the end of property declarations are the most frequent - a missing semicolon on one line causes the next declaration to be interpreted as a continuation, cascading into multiple errors. Unclosed curly braces are second - a missing } causes everything after it to be parsed incorrectly. Typos in property names (such as backgroud instead of background) produce unknown-property errors. Invalid values - like a hex color with five characters or a unit-free length - are also common, especially in hand-authored stylesheets.

Q: What is the difference between a CSS validator and a CSS linter?

A CSS validator checks your code against the CSS specification - it flags syntax errors and invalid properties that the spec does not allow. A CSS linter (like stylelint) goes further and enforces stylistic rules and best practices that are valid CSS but considered problematic: overuse of !important, overly specific selectors, vendor prefixes that are no longer needed, shorthand properties that could replace individual declarations, and ordering conventions. Validation and linting are complementary - run the validator first to catch hard errors, then the linter for style quality.

Q: How do I fix "unexpected token" errors in CSS?

Unexpected token errors usually mean the parser encountered a character it did not expect in the current position. The most common causes are a missing semicolon on the previous line (so the parser reaches the next property name still inside the value context), a missing or extra curly brace that misaligns the nesting, or a media query with a missing parenthesis. Start from the line reported by the validator and look one or two lines above it for the missing delimiter.

Q: Can stylelint catch browser compatibility errors?

Yes, with the right plugins. The stylelint-no-unsupported-browser-features plugin checks your CSS properties and values against the browser support data from Can I Use, based on your browserslist configuration. If you declare a property like backdrop-filter and your target browsers do not fully support it, the plugin flags it. This goes beyond what a basic CSS validator covers - it is checking runtime compatibility rather than spec conformance, which is a separate and equally important dimension of CSS quality.

Q: Should I run CSS validation in CI/CD?

Yes. Adding a CSS linting step to your CI pipeline prevents syntax errors and style regressions from reaching production. Configure stylelint with a .stylelintrc.json file at your project root and add a lint script to package.json. In GitHub Actions, add a job step that runs npm run lint:css - any error causes the workflow to fail and blocks the pull request. For a lightweight first check without installing any dependencies, paste changed CSS into the Aback Tools CSS Validator before raising a pull request.

Perbandingan pemeriksa dan validator kesalahan CSS terbaik: validator online, linter CLI, DevTools, dan ekstensi IDE - tangkap kesalahan sintaks, spesifisitas, dan kompatibilitas.

Devvrat Hans

Tutorials & How-Tos29 April 202612 menit baca2,700 kata

On this page

Kesalahan CSS menipu dengan cara yang unik. Titik koma yang hilang secara diam-diam merusak lima deklarasi berikutnya. Salah ketik pada nama properti tidak menghasilkan kesalahan konsol - browser begitu saja mengabaikannya. Selektor yang terlalu spesifik memenangkan kaskade di satu browser dan kalah di browser lain. Menangkap masalah-masalah ini membutuhkan alat yang tepat pada tahap yang tepat dalam alur kerja Anda: validator online untuk pemeriksaan cepat, linter untuk kualitas seluruh proyek, dan analisis spesifisitas untuk bug kaskade yang tidak terlihat oleh pemeriksa sintaks.

No. 1Penyebab kesalahanTitik koma hilang memimpin daftar

< 1 dtkWaktu validasiLokal di browser, tanpa unggah

0Peringatan konsolKesalahan CSS senyap tak meninggalkan jejak

Apa yang dideteksi pemeriksa kesalahan CSS

Pemeriksaan kesalahan CSS beroperasi pada dua tingkat yang berbeda. Yang pertama adalah validasi sintaks - memastikan CSS Anda benar secara struktural menurut spesifikasi CSS: kurung kurawal seimbang, selektor terbentuk baik, nama properti dikenali, dan nilai valid untuk propertinya. Yang kedua adalah lint kualitas - mencari CSS valid yang secara teknis benar tetapi bermasalah dalam praktik: penyalahgunaan `!important`, spesifisitas berlebihan, prefiks vendor usang, dan properti yang saling bertentangan dalam kaskade.

Kesalahan sintaks vs. masalah kualitas

Kesalahan sintaks membuat browser berhenti mengurai aturan yang terpengaruh dan membuangnya sepenuhnya. Masalah kualitas seperti selektor yang terlalu spesifik atau deklarasi redundan lolos parser tetapi menimbulkan masalah kaskade atau utang pemeliharaan. Kedua kategori butuh alat, tetapi alat yang berbeda. Validator menangkap kategori pertama; linter seperti stylelint menangkap keduanya.

Kesalahan sintaks: blok `{` tidak tertutup, `;` hilang di akhir baris, nama properti tidak valid, nilai cacat
Properti tidak valid: salah ketik seperti `backgroud`, `colr`, `margn` - browser membuangnya diam-diam
Nilai tidak valid: `color: redd`, `margin: 10`, warna hex dengan jumlah karakter salah
Kaskade dan spesifisitas: penyalahgunaan `!important`, selektor yang selalu kalah dari pesaing
Kesalahan kompatibilitas: properti yang tidak didukung dalam rentang browser target Anda

Note

Browser tidak melempar kesalahan konsol untuk sebagian besar CSS tidak valid - mereka membuang aturannya diam-diam. Satu-satunya sinyal yang terlihat adalah dekorasi garis tengah di DevTools. Inilah yang membuat validator CSS esensial: kesalahannya tak terlihat saat runtime tetapi sangat nyata dalam pengaruhnya pada rendering.

Kesalahan CSS paling umum

Kesalahan yang sama muncul berulang kali di basis kode segala ukuran. Mengetahui kategori yang paling sering membuat Anda menemukannya lebih cepat saat review dan mengonfigurasi linter untuk menangkapnya otomatis sebelum mencapai branch utama.

Titik koma yang hilang

Titik koma yang hilang di akhir deklarasi CSS tidak hanya merusak aturan itu - membuat parser menggabungkan nama properti berikutnya ke dalam nilai deklarasi saat ini. Deklarasi berikutnya dilewati seluruhnya, dan pesan kesalahan bisa menunjuk ke aturan berikutnya alih-alih titik koma yang hilang. Efek berantai ini berarti satu `;` yang hilang bisa menonaktifkan beberapa deklarasi sebelum parser pulih.

Kurung kurawal tak tertutup

Kurung buka yang tidak ditutup membuat parser memperlakukan semua yang sesudahnya sebagai isi blok aturan yang sama. Semua selektor berikutnya menjadi nama properti yang tidak valid, dan setiap aturan berikutnya efektif dibuang sampai parser menemukan kurung tutup yang berpasangan dengan yang terbuka. Pada stylesheet besar, satu kurung yang hilang bisa diam-diam merusak puluhan aturan tak berkaitan yang muncul setelahnya.

Salah ketik pada nama properti dan nilai

`background-colour` (ejaan Inggris), `font-weight: blod`, `display: flexbox` - setiap pengembang CSS pernah menerbitkan salah satunya setidaknya sekali. Browser membuangnya tanpa komentar. Menjalankan validator pada stylesheet Anda sebelum commit hanya lima detik dan menghilangkan seluruh kategori ini.

Diamnya browser terhadap aturan CSS yang tidak valid bukan konfirmasi bahwa aturan diterapkan - itu konfirmasi bahwa aturan dibuang.
- Prinsip debugging kesalahan CSS

Cara memeriksa kesalahan CSS secara online

Pemeriksa kesalahan CSS online adalah opsi tercepat untuk file individual, potongan kode, atau pemeriksaan cepat pra-commit yang tidak memerlukan penyiapan linter tingkat proyek. Alur kerjanya sama apa pun alat yang Anda pakai.

Tempel CSS Anda ke Validator CSS

Buka Validator CSS dan tempel stylesheet lengkap Anda atau blok aturan spesifik yang ingin diperiksa. Validator memproses kode Anda secara lokal di browser tanpa unggah ke server. Setiap kesalahan sintaks, properti tidak valid, dan blok tak tertutup dilaporkan dengan nomor baris dan deskripsi berbahasa sederhana tentang apa yang salah.

Perbaiki kesalahan yang dilaporkan dari atas ke bawah

Kesalahan CSS berantai - satu masalah di bagian atas file bisa menghasilkan beberapa kesalahan yang dilaporkan di bawahnya. Perbaiki kesalahan mulai dari baris terlapor pertama ke bawah dan validasi ulang setelah setiap perbaikan. Ini mencegah Anda membuang waktu untuk kesalahan yang hilang begitu penyebab utamanya selesai.

Periksa konflik spesifisitas

Setelah CSS Anda valid secara sintaks, jalankan melalui Pemeriksa Konflik Spesifisitas CSS. Masalah spesifisitas bukan kesalahan sintaks - mereka masalah kaskade di mana satu aturan valid mengesampingkan yang lain diam-diam. Pemeriksa ini mengidentifikasi selektor yang selalu kalah dari aturan pesaing dan menandai deklarasi `!important` yang menandakan masalah spesifisitas di suatu tempat dalam kaskade.

Minifikasi untuk produksi setelah bebas kesalahan

Setelah validasi dan lint, jalankan stylesheet Anda melalui Minifier CSS sebelum deploy. Minifikasi menghapus komentar, spasi, dan karakter redundan, mengurangi ukuran file dan memperbaiki waktu muat halaman. Minifikasi hanya kode yang sudah lolos validasi - meminifikasi CSS yang bermasalah bisa membuat keluarannya lebih sulit di-debug.

Validator CSS

Periksa stylesheet CSS apa pun untuk kesalahan sintaks, properti tidak valid, blok tak tertutup, dan selektor cacat - laporan dengan nomor baris, berjalan sepenuhnya di browser Anda.

Open tool

Perbandingan pemeriksa kesalahan CSS

Tidak ada satu alat pemeriksa kesalahan CSS yang cocok untuk semua skenario. Setiap pendekatan punya kekuatan berbeda: validator online cepat dan tanpa gesekan, linter CLI menyeluruh dan bisa diotomasi, DevTools menangani kesalahan runtime, dan plugin IDE memberi umpan balik saat Anda mengetik.

Alat	Apa yang diperiksa	Kecepatan	Penyiapan	Terbaik untuk
Validator CSS Aback Tools	Sintaks, props/nilai tak valid	Instan	Tidak ada	Pemeriksaan ad-hoc cepat
Validator CSS W3C	Kepatuhan spesifikasi W3C	Cepat	Tidak ada	Kepatuhan standar
stylelint CLI	Sintaks + gaya + konvensi	Cepat	Rendah	Lint seluruh proyek
DevTools browser	Kegagalan parse runtime	Instan	Tidak ada	Bug khusus browser
Ekstensi CSS VS Code	Umpan balik sintaks inline	Instan	Rendah	Pemeriksaan saat menyunting
Stylelint + browserslist	Sintaks + kompatibilitas	Sedang	Sedang	Pipeline CI/CD

Validator online vs. linter CLI

Validator online adalah pilihan tepat ketika Anda butuh jawaban cepat tanpa mengonfigurasi apa pun. Mereka langsung menangkap kesalahan sintaks fatal dan tanpa penyiapan proyek. Linter CLI seperti stylelint adalah pilihan tepat untuk kualitas proyek berkelanjutan - berjalan di setiap file, menegakkan konvensi yang konsisten lintas tim, dan terintegrasi dengan hook pre-commit serta pipeline CI untuk mencegah regresi otomatis.

Layanan validasi CSS W3C

Validator resmi W3C di `jigsaw.w3.org/css-validator` memeriksa CSS terhadap spesifikasi W3C dan menjadi rujukan otoritatif kepatuhan standar. Ia menerima URL, unggahan file, atau masukan langsung. Keterbatasan utamanya adalah latensi - validasi memerlukan perjalanan jaringan ke server W3C. Untuk iterasi cepat, validator lokal browser seperti Validator CSS Aback Tools lebih praktis saat pengembangan; validator W3C lebih tepat untuk audit standar formal sebelum rilis besar.

Tip

Untuk alur debugging CSS tercepat: gunakan [Validator CSS](/tools/data/validators/css-validator) untuk menangkap kesalahan sintaks, [Visualizer Spesifisitas CSS](/tools/data/validators/css-specificity-visualizer) untuk memahami bobot selektor, dan DevTools untuk melihat aturan mana yang benar-benar diterapkan browser. Bersama-sama, tiga alat ini mencakup semua kategori kesalahan CSS dari saat parse hingga render.

Kesalahan spesifisitas dan kaskade

Kesalahan spesifisitas adalah kategori paling licik dalam CSS karena tidak menghasilkan pesan kesalahan di mana pun - CSS-nya valid, terurai dengan benar, diterapkan browser, lalu diam-diam aturan lain memenangkan kaskade. Elemen terlihat salah, tidak ada kesalahan yang dilempar, dan penyebabnya tak terlihat tanpa analisis spesifisitas.

Cara kerja spesifisitas CSS

Setiap selektor CSS punya skor spesifisitas yang dinyatakan sebagai tiga angka (gaya inline, ID, kelas/atribut/pseudokelas). Ketika dua aturan menarget elemen dan properti yang sama, yang berskor lebih tinggi menang terlepas dari urutan sumber. Selektor ID (`#nav`) berspesifisitas (0,1,0) dan selalu mengalahkan selektor kelas (`.nav`) berspesifisitas (0,0,1), bahkan jika aturan kelas muncul lebih belakang di stylesheet. Memahami skor-skor ini esensial untuk mendiagnosis mengapa gaya yang diharapkan tidak diterapkan.

Masalah !important

`!important` mengesampingkan kaskade spesifisitas normal sepenuhnya. Ia dirancang sebagai jalan keluar untuk kebutuhan pengesampingan yang sungguh-sungguh - pengesampingan aksesibilitas, reset gaya user-agent - tetapi sering dipakai jalan pintas debugging ketika aturan tidak memenangkan kaskade karena alasan yang diharapkan. Setiap `!important` yang ditambahkan sebagai tambal sulam membuat konflik spesifisitas berikutnya lebih sulit diselesaikan, sering membutuhkan `!important` lain untuk mengesampingkan yang pertama. Pemeriksa Konflik Spesifisitas CSS mengidentifikasi setiap `!important` di stylesheet Anda bersama selektor pesaing yang menyebabkannya.

Memvisualkan skor spesifisitas

Visualizer Spesifisitas CSS menerima daftar selektor CSS dan menaikannya berdasarkan tripel spesifisitasnya, menunjukkan tepat selektor mana yang akan menang ketika dua aturan bersaing. Tempel selektor dari aturan yang sedang Anda debug - visualizer langsung menampilkan pemenangnya tanpa mengharuskan Anda menghitung tripel secara manual. Ini sangat berguna pada basis kode lama di mana selektor menumpuk selama bertahun-tahun dan perilaku kaskade tidak lagi bisa diprediksi dengan sekilas pandang.

Lint CSS dalam CI/CD

Validator CSS yang dipakai manual sebelum commit adalah kebiasaan berguna. Linter CSS yang berjalan otomatis pada setiap pull request adalah jaminan yang andal. Bedanya adalah keterulangan: manusia melewati langkah di bawah tekanan tenggat; pipeline CI tidak.

Menyiapkan stylelint

Instal stylelint dan konfigurasi standar sebagai dependensi dev dengan npm install --save-dev stylelint stylelint-config-standard. Buat berkas .stylelintrc.json di akar proyek dengan extends mengarah ke stylelint-config-standard. Tambahkan skrip lint ke package.json: "lint:css" mengarah ke stylelint pada file CSS Anda. Jalankan npm run lint:css secara lokal untuk memverifikasi penyiapan, lalu tambahkan perintah yang sama sebagai langkah CI dalam pipeline Anda.

Warning

Sintaks konfigurasi stylelint berubah signifikan antar versi mayor. Jika Anda bermigrasi dari stylelint 13 atau 14 ke 15+, konvensi penamaan aturan dan API plugin berubah. Tinjau panduan migrasi sebelum meningkatkan versi agar linter tidak diam-diam berhenti memeriksa aturan yang sebelumnya ditegakkan.

Menangkap kesalahan kompatibilitas browser di CI

Plugin `stylelint-no-unsupported-browser-features` memeriksa CSS Anda terhadap data Can I Use berdasarkan konfigurasi `browserslist` Anda. Tetapkan rentang browser target Anda di berkas `.browserslistrc` dan plugin akan menandai properti atau nilai apa pun di luar jendela dukungan itu. Ini menangkap masalah kompatibilitas sebelum pengujian QA - sangat berguna bagi tim yang menarget browser Android lama atau versi Internet Explorer enterprise tertentu.

Stylelint di GitHub Actions

Tambahkan job workflow yang berjalan pada pull request yang menyentuh file `.css` atau `.scss` apa pun. Job dasar menjalankan `npm ci`, lalu `npm run lint:css`. Langkah lint keluar dengan kode bukan nol pada kesalahan apa pun, menggagalkan workflow dan memblokir merge. Untuk proyek berbasis Sass, tambahkan konfigurasi `stylelint-config-standard-scss` dan paket sintaks kustom `postcss-scss` agar stylelint dapat mengurai file `.scss`.

Pemeriksa Konflik Spesifisitas CSS

Deteksi konflik spesifisitas, risiko pengesampingan kaskade, dan penyalahgunaan !important pada selektor CSS Anda - lokal di browser tanpa penyiapan apa pun.

Open tool

Praktik terbaik pencegahan kesalahan CSS

Pencegahan kesalahan CSS paling efektif terjadi sebelum kesalahan masuk - melalui konfigurasi editor, konvensi yang konsisten, dan perubahan kecil bertahap yang lebih mudah divalidasi daripada commit besar sekaligus.

Penyiapan editor untuk pemeriksaan real-time

Instal ekstensi stylelint untuk VS Code (`stylelint.vscode-stylelint`) agar kesalahan lint terlihat sebagai garis bawah merah saat mengetik - sebelum menyimpan atau commit. Padukan dengan ekstensi CSS Peek untuk bernavigasi ke deklarasi, dan CSS IntelliSense bawaan VS Code yang memperingatkan properti tak dikenal saat diketik. Atur editor Anda memformat CSS saat menyimpan dengan Prettier melalui perintah `prettier --write '**/*.css'` untuk menyeragamkan spasi dan gaya kutip secara otomatis.

VS Code: pasang ekstensi stylelint untuk penyorotan kesalahan inline dan CSS IntelliSense untuk validasi properti
Prettier: jalankan saat menyimpan untuk menyeragamkan spasi, kutip, dan urutan deklarasi sebelum lint
Metodologi BEM atau utility-class: konvensi penamaan yang konsisten mengurangi konflik spesifisitas secara desain
Custom properties CSS: memakai variabel alih-alih nilai berulang mengurangi kesalahan akibat salah ketik
Pengisolasian komponen: CSS Modules atau shadow DOM mencegah kaskade merembes antar komponen

Alur validasi pre-commit

Konfigurasikan hook pre-commit dengan lint-staged untuk menjalankan stylelint hanya pada file CSS yang di-stage untuk commit. Paket `lint-staged` menjalankan linter hanya terhadap file yang di-stage, membuat hook tetap cepat bahkan di proyek besar. Jika linter melaporkan kesalahan, commit diblokir dan Anda melihat daftar kesalahan sebelum kode meninggalkan mesin Anda. Untuk pemeriksaan visual cepat sebelum staging, tempel aturan yang berubah ke Validator CSS.

Tip

Saat memperkenalkan validasi CSS ke proyek yang sudah punya banyak kesalahan lama, gunakan flag `--fix` stylelint untuk masalah yang bisa diperbaiki otomatis dan komentar `/* stylelint-disable */` untuk sementara menekan masalah warisan yang dikenal tanpa memblokir pipeline CI. Tackle masalah yang ditekan secara bertahap, bukan sekaligus.

Key takeaways

Kesalahan CSS itu senyap - browser membuang aturan tidak valid tanpa peringatan konsol, sehingga validator adalah satu-satunya cara andal menemukannya.
Titik koma hilang dan kurung tak tertutup adalah kesalahan CSS paling umum - keduanya berantai ke bawah dan menghasilkan beberapa laporan kesalahan dari satu kesalahan.
Gunakan Validator CSS untuk pemeriksaan sintaks cepat dan Pemeriksa Konflik Spesifisitas CSS untuk masalah kaskade - keduanya mencakup kategori kesalahan berbeda.
stylelint adalah linter CLI standar untuk kualitas CSS seluruh proyek - konfigurasikan dengan `stylelint-config-standard` dan jalankan di setiap pipeline CI.
Visualizer Spesifisitas CSS menampilkan skor selektor sebagai tripel tiga angka, membuat bug kaskade terlihat tanpa perhitungan manual.
Konflik spesifisitas dan penyalahgunaan `!important` adalah kesalahan kualitas yang lolos validasi sintaks - hanya pemeriksa spesifisitas khusus yang mengungkapnya.
Siapkan stylelint dengan lint-staged sebagai hook pre-commit untuk menangkap kesalahan CSS sebelum meninggalkan mesin Anda - menggabungkan pencegahan dengan validator browser-lokal yang cepat untuk pemeriksaan ad-hoc.

Pertanyaan yang Sering Diajukan