Validator CSS
Periksa CSS untuk kesalahan struktural dan sintaks — kurung kurawal dan tanda kurung yang tidak seimbang, string dan komentar yang tidak diterminasi, blok aturan kosong, dan properti atau nilai yang kehilangan pasangannya. Tidak memvalidasi tata bahasa nilai properti CSS.
Input
Output
| Baris | Tipe | Pesan |
|---|---|---|
| No data yet | ||
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-validator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": "body {\n color: #333;\n margin: 0;\n}\n"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-validator` tool (CSS Validator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-validator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Validator CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang diperiksa oleh validasi CSS ini?
Tempel CSS dan dapatkan laporan baris demi baris dari masalah struktural dan sintaks — jenis kesalahan yang memecahkan penguraian, bukan jenis yang menghasilkan warna yang salah. Secara khusus, ia memeriksa:
- Kurung kurawal yang tidak seimbang (
{/}) — blok aturan yang dibuka tetapi tidak pernah ditutup, atau kurung penutup yang tersisa tanpa pembuka yang cocok. - Tanda kurung yang tidak seimbang dalam nilai, seperti
calc(100% - 10pxyang kehilangan tanda kurung penutup)nya. - String literal yang tidak diterminasi — pembuka
'atau"tanpa penutup yang cocok sebelum baris berakhir atau file berakhir. String CSS tidak dapat mencakup beberapa baris kecuali pemisah baris diloloskan dengan garis miring terbalik. - Blok komentar
/* comment */yang tidak diterminasi — pembuka komentar tanpa*/penutup. - Blok aturan kosong (
selector {}) — ditandai sebagai peringatan, karena secara teknis CSS yang valid tetapi hampir selalu sisa atau kode mati. - Properti tanpa nilai (
color: ;) atau nilai tanpa properti (: red;).
Setiap temuan mencantumkan nomor baris, apakah itu kesalahan atau peringatan, dan pesan dalam bahasa biasa. Jika tidak ada dari yang di atas ditemukan, Anda mendapatkan hasil "Valid CSS — tidak ada masalah struktural yang ditemukan".
Apa yang TIDAK diperiksa
Ini adalah pemindai struktural ringan, bukan pengurai CSS lengkap. Ini tidak memvalidasi tata bahasa nilai sebenarnya CSS — tidak akan menangkap color: notacolor;, unit yang tidak valid, nama properti yang salah eja, atau nilai yang tidak didukung untuk properti tertentu, karena itu memerlukan pengetahuan tentang spesifikasi CSS3 lengkap dan terus berkembang untuk setiap properti. Untuk tingkat validasi itu, gunakan DevTools browser Anda (panel Styles memudar dan menandai properti/nilai yang tidak dikenalinya) atau linter khusus seperti Stylelint.
Siapa targetnya?
- Pengembang yang mencari
}atau)yang hilang yang secara diam-diam memecahkan sisa lembar gaya. - Siapa pun yang menempelkan CSS dari sumber yang tidak familiar (cuplikan, pembuatan AI, salin-tempel dari dokumen) yang menginginkan pemeriksaan akal sehat cepat sebelum menggunakannya.
- Pemeriksa kode yang memindai blok aturan kosong yang mungkin tidak disengaja.
Cara menggunakannya
- Tempel CSS Anda ke dalam kotak input — hasil diperbarui langsung saat Anda mengetik.
- Baca tabel Baris/Tipe/Pesan: kesalahan adalah kerusakan struktural yang patut diperbaiki segera; peringatan (seperti blok aturan kosong) layak diperhatikan tetapi tidak akan memecahkan rendering.
- Salin atau unduh hasilnya sebagai CSV jika Anda perlu membagikannya.
FAQ
Apakah akan menangkap kesalahan ketik seperti bakground-color?
Tidak — nama properti yang tidak dikenal adalah pemeriksaan semantik, bukan struktural. Browser akan mengabaikan properti yang tidak dikenali; alat ini hanya memberi tahu Anda ketika CSS itu sendiri tidak dapat diurai dengan benar.
Mengapa ia menandai blok aturan kosong sebagai peringatan alih-alih kesalahan?
selector {} adalah CSS yang valid — browser menguraikannya dengan baik — tetapi tidak melakukan apa pun, jadi hampir selalu merupakan kesalahan (deklarasi yang lupa, atau kode mati yang ditinggalkan setelah pengeditan).
Apakah itu mendukung CSS bersarang atau blok @media?
Ya — pelacakan kurung kurawal/kurung/string/komentar berfungsi pada kedalaman bersarang apa pun, jadi @media, @supports, dan blok pemilih bersarang semuanya diperiksa dengan cara yang sama.
Privasi
Validasi terjadi sepenuhnya di browser Anda. CSS Anda tidak pernah diunggah atau dikirim ke mana pun.