مدقق CSS
السطر، والخاصية، والإصلاح
يقرأ مدقق CSS هذا ورقة الأنماط كما يقرأها المتصفح ويبلّغ عما سيسقطه. كل ملاحظة تحمل رقم السطر، والخاصية المخطئة، وما توقعه المحلل. ولا شيء مما تلصقه يغادر المتصفح.
- مجانيالسعر
- 6الفحوص
- لا شيءالتسجيل
- لا شيءالرفع
مدقق CSS
اقرأ ورقة أنماط وسمِّ كل تصريح سيسقطه المتصفح، مع السطر الذي يقع فيه
لم يُقرأ شيء بعد.
لا شيء يستحق التبليغ. كل اسم هنا يعرفه القارئ، وكل قيمة مما تقبلها تلك الخاصية.
جاهز. الصق ورقة أنماط، أو اضغط أحد أزرار النموذج.
ما يلتقطه مدقق CSS
المتصفح متسامح مع CSS، وهذه هي المشكلة. لذلك يُسقط المتصفح بصمت قاعدة لا يستطيع قراءتها، وتبدو الصفحة معيبة فحسب.
يسمّي مدقق CSS هذا ما سيتخلص منه المتصفح. كل ملاحظة تحمل رقم السطر، والخاصية أو المحدد المخطئ، وسبب توقف المحلل.
يقرأ الورقة بالترتيب، متتبعًا هل هو داخل قاعدة أو نص أو تعليق أو قاعدة @. ولأن الحالة تحدد معنى كل حرف، فالقوس داخل تعليق لا يفتح كتلة أبدًا.
يفحص مدقق CSS هذا ست عائلات من الأخطاء. اثنتان تكسران الملف، والثلاث الأخرى تكلفك تصريحًا دون أن تكسر شيئًا.
كل شيء يجري في هذا التبويب. لذلك لا تختلف ورقة موقع مشمول بشرط سرية عن ورقة عامة هنا.
كيف يقرأ مدقق CSS ورقة الأنماط
يمشي القارئ في النص مرة واحدة. وعند كل حرف يعرف في أي من خمس حالات هو: محدد، أو كتلة تصريحات، أو قيمة، أو نص، أو تعليق.
ومن تلك الحالة يستطيع أن يعرف هل يفتح القوس كتلة. ويعرف هل تبدأ النقطتان قيمة. ويعرف أيضًا هل تُنهي الفاصلة المنقوطة تصريحًا. والبنية نفسها قصيرة. ووحدة بنية CSS هي المكان الذي يكتبها فيه فريق العمل.
ولأن المشي يحفظ حالته، فالقوس الشارد داخل تعليق لا يغيّر شيئًا. أما قارئ يعدّ الحروف فسيعدّه بداية كتلة ويخطئ في كل سطر بعده.
الاستعادة لا تقل أهمية عن الاكتشاف. فحين يلقى المتصفح تصريحًا لا يستطيع تحليله، يقفز إلى الفاصلة المنقوطة التالية ويكمل. لذلك تكلفك القيمة الخاطئة تصريحًا واحدًا لا الملف كله.
وهكذا تبقى قاعدة فقدت تصريحًا شهورًا على موقع حيّ. تستمر الصفحة في العمل بخصائص أقل بواحد، ولا شيء في الطرفية يقول ذلك.
لماذا يستحق السقوط الصامت البحث
الخطأ المطبعي في اسم خاصية هو أرخص خطأ في CSS وأصعبه ملاحظة. حرف واحد زائد ويختفي التصريح.
ولأن بقية القاعدة تظل سارية، يحتفظ العنصر بمعظم تنسيقه. لذلك تبدو الصفحة شبه صحيحة، ويسهل إلقاء لوم الجزء الناقص على شيء آخر.
وينطبق الأمر نفسه على الوحدة. فالطول المكتوب بلا وحدة صحيح في مواضع قليلة وخاطئ في معظمها. لذلك يُسقط المتصفح هامشًا مقداره عشرة بدل عشرة بكسل، فلا يظهر الفراغ الذي كان يفترض أن ينشأ.
يحوّل المدقق ثلاثًا من تلك الحالات إلى ثلاثة سطور مخرجات. هذه هي القيمة كلها: المتصفح يصمت والصفحة لا.
الفحوص الستة ومعنى كل واحد
الفحص الأول هو توازن الأقواس. فالقوس المفتوح بلا مقابل، أو المغلق بلا فاتح، ينال ملاحظة تسمي السطر الذي اختل فيه العدد. وهذا الخطأ الوحيد الذي قد يكلفك بقية الملف كله.
والثاني فاصلة منقوطة ناقصة. ولأن المتصفح يقرأ حينها الخاصية التالية كجزء من القيمة، تبتلع علامة واحدة ناقصة تصريحين. والملاحظة تسمي السطرين معًا.
والثالث خاصية مجهولة. يبلّغ القارئ عن كل ما لا يعرفه كخطأ مطبعي محتمل، ويعرض أقرب اسم مطابق حين يوجد.
والرابع قيمة لا تقبلها الخاصية. لون مكتوب كلمة ليست اسم لون، أو طول مكتوب بنسبة على خاصية لا تقبل النسبة.
والخامس وحدة مكتوبة خطأ. طول بلا وحدة، ووحدة ليست من الوحدات المعروفة، ووحدة على خاصية تقرأ عددًا مجردًا.
والسادس التكرار. المحدد نفسه مرتين في كتلة واحدة، أو الخاصية نفسها مرتين في قاعدة واحدة. ولأن التصريح الأحدث يفوز، يبقى قيمة قديمة تبدو موثوقة ولا تفعل شيئًا.
ما لا تعنيه الصحة
يجيب المدقق عن سؤال واحد: هل سيحلل المتصفح هذا. ولا يستطيع أن يقول هل كانت القاعدة فكرة جيدة.
لذلك قد تجتاز الورقة كل الفحوص وتبقى خاطئة. لون يفشل في التباين، وعرض ثابت ينكسر على شاشة ضيقة، وحجم خط بالبكسل حيث يناسب وحدة نسبية. لا شيء من ذلك بنية.
وينطبق الأمر نفسه على الدعم. فقد تكون الخاصية صحيحة تمامًا ولا تفعل شيئًا لأن المتصفح لم ينفذها. التحقق لا يقول شيئًا عن ذلك، وقراءة النتيجة الخضراء كوعد بالتوافق مضللة.
ولهذا تربط هذه الصفحة بمدقق التباين ومختبر المحددات. فالأداة الثانية تجيب عن السؤال الذي لا يستطيع المدقق الإجابة عنه.
كيف تستخدم مدقق CSS
أربع خطوات، ولا واحدة منها تطلب حسابًا.
- 1
الصق ورقة الأنماط
الصق ملفًا كاملًا أو قاعدة واحدة. ولأن القارئ يأخذ نصًا لا شكلًا مُترجمًا، يكفي جزء ما دامت أقواسه متوازنة.
- 2
اختر درجة الصرامة
ثم اختر هل تكون الخاصية المجهولة خطأ أم تحذيرًا. ولأن الخاصية الجديدة قد تكون سابقة لهذا القارئ، يمررها مستوى التحذير مع ملاحظة.
- 3
اقرأ الملاحظات بالترتيب
ثم انزل في اللوحة. فالملاحظات تتبع ترتيب السطور، لذلك الأولى هي سبب الاثنتين بعدها غالبًا.
- 4
أصلح، ثم أعد التشغيل، ثم انسخ
وأخيرًا عدّل الورقة في محررك وأعد لصقها لتتأكد أن العدد صفر. بعد ذلك انسخ الملف النظيف أو نزّله.
لماذا تستخدم مدقق CSS هذا
خمسة أسباب، وكل واحد يوفر عليك جلسة تصحيح.
يسمي السطر
ولأن كل ملاحظة من مدقق CSS هذا تحمل رقم سطر، تذهب إليه مباشرة بدل قراءة الملف. لذلك تصبح ورقة من مئتي سطر مهمة دقيقتين.
يشرح السبب
ملاحظة مدقق CSS تقول ما توقعه المحلل، لا أنها توقفت فقط. لذلك يكون الإصلاح غالبًا واضحًا من الملاحظة وحدها.
يقرأ كما يقرأ المتصفح
كذلك يتتبع مدقق CSS النصوص والتعليقات وقواعد @ بالطريقة نفسها. لذلك لا ينتج قوس داخل تعليق بلاغًا خاطئًا.
لا شيء يُرفع
الفحص كله يجري في هذا التبويب. لذلك لا تختلف ورقة موقع مشمول بشرط سرية عن ورقة عامة هنا.
يصمت عن الذوق
ولأن البنية هي العمل كله، لا تعلق الأداة على تسميتك ولا على تعشيشك ولا على اختيارك للوحدات. لذلك تعني النتيجة الخضراء أن الكود حُلل، لا أكثر.
عادات تحفظ ورقة الأنماط نظيفة
ست عادات تحفظ ورقة الأنماط مقروءة وسهلة التحقق.
- تصريح واحد في كل سطر وبذلك تظهر الفاصلة المنقوطة الناقصة كسطر أحمر في محررك لا كملاحظة هنا. كما أن القواعد على عدة سطور أسهل بكثير في المقارنة.
- لا تكتب طولًا بلا وحدة أبدًا الصفر وحده يجوز أن يقف بلا وحدة، ولا شيء غيره. ولأن المتصفح يُسقط الطول بلا وحدة، لا يظهر التباعد أصلًا ويصعب تخمين السبب.
- اكتب الخاصية المخصصة مرة واحدة الخاصية المخصصة اسم تخترعه، لذلك يبقى الخطأ المطبعي فيه صامتًا في كل مكان. لذلك أعلنها في أعلى الملف وانسخ الإملاء بدل إعادة كتابته.
- تحقق قبل المضغط لا بعده المضغط يثق بمدخله، لذلك تخرج القاعدة المكسورة مكسورة وأصعب قراءة. ولأن أرقام السطور تبقى في الملف غير المضغوط، افحص ذاك أولًا.
- راقب آخر قاعدة في الكتلة التصريح الأخير هو الموضع الذي يؤذي فيه غياب الفاصلة المنقوطة أقل ما يمكن ويختفي أفضل ما يمكن. ولأن السطر التالي قوس إغلاق، تظل القاعدة تعمل ولا تظهر الملاحظة أبدًا.
- تعامل مع بادئة المزود كأمر عادي الخاصية البادئة صحيحة والقارئ يعرفها. لذلك يكون التحذير منها فحصًا يحتاج تحديثًا لا خطأ يحتاج إصلاحًا.
ست طرق تنكسر بها أوراق الأنماط بصمت
كل واحدة منها تترك الصفحة شبه صحيحة، وهذا ما يجعل البحث بطيئًا.
تصريح ساقط داخل اختصار
احترس هنا. اختصار مثل margin بسط خطأ يفقد السطر كله لا جزءًا واحدًا، لذلك تتحرك أربعة جوانب بدل واحد.
قيمة لا تقبلها الخاصية
نسبة حيث تريد الخاصية طولًا، أو كلمة حيث تريد عددًا. ولأن المتصفح يقفز إلى الفاصلة المنقوطة التالية، ينجو التصريح الذي بعده.
خاصية مكررة في قاعدة واحدة
القيمة الأحدث تفوز، لذلك تبقى قيمة قديمة تبدو موثوقة. لذلك احذفها بدل أن تعلّقها، وإلا وثق بها القارئ التالي.
فاصلة منقوطة ناقصة قبل قوس إغلاق
التصريح الأخير في الكتلة هو الموضع الوحيد الذي لا يكلف فيه الخطأ شيئًا. ولذلك ينجو من المراجعة ولا يظهر إلا حين يضيف أحد تصريحًا بعده.
تعليق غير مغلق
التعليق الذي لا يُغلق يبتلع كل ما بعده، بما في ذلك كل القواعد. لذلك تُعرض الصفحة بلا تنسيق من تلك النقطة، ويبدو الملف سليمًا في المقارنة.
الثقة بنتيجة خضراء عن التوافق
قد تكون الخاصية صحيحة ولا تفعل شيئًا في المتصفح المهم. ولأن التحقق بنية، افحص التوافق لمتصفحك المستهدف على حدة.
أسئلة عن مدقق CSS
هل مدقق CSS هذا مجاني؟
نعم. لا حساب ولا حد ولا خطة مدفوعة. لذلك تتحقق من أي عدد من أوراق الأنماط.
ما الذي يفحصه مدقق CSS؟
ست عائلات: توازن الأقواس، والفواصل المنقوطة الناقصة، والخصائص المجهولة، والقيم التي ترفضها الخاصية، والوحدات المكتوبة خطأ، والتكرار داخل القاعدة الواحدة.
هل يقارن CSS لدي بالمواصفة؟
يفحص البنية التي تضعها وحدة بنية CSS. ويفحص كذلك قائمة بالخصائص المعروفة والقيم التي تقبلها كل خاصية. لذلك قد يشتكي من خاصية جديدة تمامًا حتى تلحق قائمته بها.
لماذا تبدو ورقة الأنماط سليمة وهي تحمل خطأ؟
لأن المتصفح يقفز إلى الفاصلة المنقوطة التالية ويكمل. لذلك يكلفك التصريح الخاطئ تصريحًا واحدًا، وتستمر الصفحة في العرض من دونه.
هل يعدّل ورقة الأنماط لدي؟
لا. القارئ يبلّغ والملف يبقى كما لصقته بالضبط. وأي تعديل تقوم به أنت في محررك.
هل تُرفع ورقة الأنماط إلى مكان ما؟
لا. الفحص كله يجري في هذا التبويب. لذلك تبقى ورقة الأنماط المشمولة بشرط سرية على جهازك.
هل يمكنني التحقق من SCSS أو Less؟
ليس مباشرة. فهي تضيف التعشيش والمتغيرات فوق CSS. لذلك مرّرها أولًا على محوّل المعالج المسبق. ثم تحقق من CSS الصافي الذي يخرج منها.
هل يفحص دعم المتصفحات؟
لا. قد تكون الخاصية صحيحة ولا تفعل شيئًا في المتصفح المهم. التحقق من البنية، والدعم سؤال منفصل.
ما أقرب شيء إلى خطأ حقيقي؟
قوس غير متوازن. لأن المتصفح يقرأ بقية الملف بعدها من العمق الخطأ، لذلك قد يكلف القوس الناقص كل القواعد التي تليه.
هل يشتكي من خاصية بادئة المزود؟
لا، القارئ يعرف الخاصية البادئة ويقبلها. لذلك تمر كتلة بست بادئات لميزة واحدة دون أي ملاحظة.
هل يمكنني التحقق من جزء بدل ملف كامل؟
نعم. قاعدة واحدة أو مجموعة قواعد تكفي ما دامت أقواسها متوازنة. لذلك يشير العدد حينها إلى السطور التي لصقتها لا إلى ملف.
هل يفحص الخصائص المخصصة؟
يتحقق من البنية ومن الاستخدام. والاسم الذي تخترعه لا إملاء له لنتحقق منه. فهو لا يستطيع أن يعرف أن إملاءين كانا يعنيان شيئًا واحدًا.
ما الفرق بين خطأ وتحذير؟
الخطأ يعني أن المتصفح سيسقط التصريح. أما التحذير فيعني أن هذا القارئ لا يعرف الخاصية، وقد يعني ببساطة أنها جديدة.
هل يمكنه إحصاء قواعدي ومحدداتي؟
نعم. يعرض الملخص عدد القواعد والتصريحات والمحددات، وهذا مفيد حين تختصر ملفًا.
هل ينسّق ورقة الأنماط أو يضغطها؟
لا، وهذا مقصود. فالتنسيق والتحقق قراران منفصلان. ومضغط الأداة يتولى المسافات.
لماذا لا تنطبق قاعدة صحيحة لدي بعد؟
السبب المعتاد هو المحدد لا التصريح. لذلك مرّره على مختبر المحددات، فهو يسأل هل يطابق عنصرًا أصلًا.
هل يعمل على الهاتف؟
نعم. تتكدس اللوحات وتلتف الملاحظات. لذلك يمكن فحص سريع بعيدًا عن المكتب، وإن بقيت ورقة طويلة أسهل على لوحة المفاتيح.
هل يمكنني تنزيل الملاحظات؟
نعم. يحفظ التنزيل التقرير في ملف نصي، وهذا مفيد في تذكرة أو تعليق مراجعة.
هل تبقى ورقة الأنماط ملكي؟
بالكامل. لا تدّعي هذه الصفحة أي حق على ملفك، ولا يوجد ذكر يجب إضافته.
هل أحتاج حسابًا أو إضافة؟
لا. لا تسجيل ولا إضافة ولا ملحق للتركيب. لذلك تغلق التبويب حين تصبح الورقة نظيفة.
أدوات تمشي مع هذه
أربع صفحات غالبًا ما يؤدي إليها العمل نفسه.
مضغط CSS
حين تصبح الورقة نظيفة، أزل المسافات. ولأن المتصفح ينزل كل تعليق وكل سطر جديد، اضغط بعد التحقق لا قبله.
افتح الأداة ←مختبر محددات CSS
ثم تحقق هل يطابق المحدد شيئًا. ولأن قاعدة لا تطابق شيئًا تفشل بصمت، فهذا النصف الآخر من العمل نفسه.
افتح الأداة ←منتقي أكواد الألوان
قد يفشل لون صحيح في التباين. لذلك اقرأ النسبة قبل أن تثبّت اللوحة.
افتح الأداة ←محوّل معالج CSS المسبق
إن كان المصدر SCSS أو Less، حوّله أولًا إلى CSS صافٍ. ثم يجد المدقق ما يقرأه.
افتح الأداة ←
اعثر على التصريح الذي أسقطه المتصفح
الصق ورقة الأنماط، واقرأ الملاحظات بترتيب السطور، ثم أصلح أول ملاحظة وأعد التشغيل. لا شيء يُرفع ولا شيء يتغير على جهازك. غالبًا تكون الورقة نظيفة قبل أن يبرد الشاي.