كيفية استخدام منسّق CSS
- الصق CSS مصغّراً أو غير مرتّب.
- اختر المسافة البادئة وما إذا كنت تريد ترتيب الخصائص.
- انسخ ورقة الأنماط المقروءة.
مزايا منسّق CSS
- تصريح واحد في كل سطر مع مسافة بادئة متسقة
- محدّد واحد في كل سطر لقوائم المحدّدات (اختياري)
- كتل @media و@supports و@layer و@keyframes المتداخلة
- توحيد التباعد حول النقطتين والفواصل والمجمّعات (combinators) و!important
- ترتيب أبجدي اختياري للخصائص
- الحفاظ على التعليقات والسلاسل النصية وقيم url() وcalc()
مثال على منسّق CSS
توسيع CSS مصغّر
الإدخال:
a,a:hover{color:#1266f0;text-decoration:none}@media(max-width:600px){a{display:block}}النتيجة:
a,
a:hover {
color: #1266f0;
text-decoration: none;
}
@media (max-width: 600px) {
a {
display: block;
}
}الأسئلة الشائعة حول منسّق CSS
هل تُدعم @media و@supports وقواعد @ المتداخلة؟
نعم. تُزاح الكتل المتداخلة بمستوى واحد لكل عمق، وتُوحَّد مقدمات قواعد @ (مسافات بعد النقطتين والفواصل).
ما وظيفة خيار «ترتيب الخصائص» (Sort properties)؟
يرتّب التصريحات داخل كل قاعدة أبجدياً. وتُرتَّب الخصائص المخصصة (--name) مع البقية. عطّله للاحتفاظ بالترتيب الأصلي.
هل يُفسد قيم url() أو calc()؟
لا. تُحفظ السلاسل النصية ومحتويات url(…) وتعابير calc()؛ ولا يُوحَّد إلا التباعد المحيط بها.
هل يصلح CSS غير الصالح؟
لا. تُنسَّق الأقواس غير المتوازنة بأفضل جهد ممكن مع عرض تحذير، لكن لا يُحذف شيء ولا يُعاد كتابته.