مدقّق CSS

افحص CSS بحثًا عن أخطاء الصياغة والكتل غير المغلقة والخصائص المجهولة والقيم غير الصالحة بقواعد css-tree. السطر والعمود لكل مشكلة، داخل المتصفح.

مدخل CSS

يفحص الصياغة والخصائص غير المعروفة والقيم غير الصالحة وفق بيانات قواعد css-tree. لا تُفحص الخصائص المخصصة ولا القيم التي تستخدم var().

يعمل بالكامل في متصفحك. لا يتم رفع بياناتك أبدًا.

أدوات ذات صلة

عرض الكل

منسّق JSON مدقّق JSON منسّق XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

ما هو مدقّق CSS؟

يبلّغ مدقّق CSS عن الأخطاء البنيوية (أقواس أو نصوص أو تعليقات أو أقواس دائرية غير مغلقة) وأخطاء التحليل والخصائص المجهولة وقيم الخصائص غير الصالحة والقواعد @ المجهولة، كلٌّ مع سطره وعموده. تعتمد فحوص الخصائص والقيم على بيانات قواعد CSS المرفقة مع css-tree؛ وهو ليس خدمة التحقق من CSS التابعة لـ W3C.

كيفية استخدام مدقّق CSS

الصق CSS في مربع الإدخال.
اضغط تحقق (تتحدّث النتائج أثناء الكتابة).
اقرأ الملخص وقائمة الأخطاء والتحذيرات.
أصلح كل مشكلة بحسب السطر والعمود المعروضين.

مثال

الإدخال

a { colr: red; color: bluee; }

الإخراج

Errors: 2 · Warnings: 0
Line 1, column 5 Unknown property "colr"
Line 1, column 16 Invalid value for "color": bluee

متى تستخدم مدقّق CSS

استخدمه لالتقاط الأخطاء الإملائية مثل colr أو bluee، وإيجاد القوس غير المغلق في ملف طويل، أو فحص CSS المكتوب يدويًا قبل النشر. قد تغيب الخصائص الحديثة جدًا عن بيانات القواعد؛ ولا يُفحص دعم المتصفحات.

كيف يعمل مدقّق CSS

يتحقق ماسح أولًا من توازن {} و() وإغلاق النصوص والتعليقات. ثم تُحلَّل ورقة الأنماط بـ css-tree (المضمّن مع CSSO) الذي يبلّغ عن أخطاء التحليل. وتُطابَق كل تصريحة مع قواعد الخصائص في css-tree عبر lexer.matchDeclaration: الخصائص المجهولة أخطاء، والخصائص المجهولة ذات بادئة المورّد (-moz-foo) تحذيرات، والقيم غير المطابقة للقواعد (مثل margin بخمس قيم) أخطاء. أما الخصائص المخصصة (--x) والقيم التي تستخدم var() أو env() أو attr() فلا يمكن فحصها بشكل ساكن وتُتخطى.