منسق CSS

يقرأ منسق CSS ورقة الأنماط ويعيد كتابتها بمسافات ومسافة بادئة وفواصل أسطر متسقة بحيث يكون من السهل قراءتها وصيانتها. يقوم بتوزيع CSS في بنيته الأساسية من القواعد والمحددات والإعلانات والقواعد والتعليقات، ثم يطبع تلك البنية مرة أخرى باستخدام تخطيط يمكن التنبؤ به: إعلان واحد لكل سطر، ومساحة واحدة بعد كل نقطتين، وكل كتلة متداخلة ذات مسافة بادئة بمستوى أعمق من الأصل. تظل قواعد النمط متطابقة، ولكن الملف الذي يصل كسطر طويل غير منقطع يصبح شيئًا يمكنك مسحه ضوئيًا وتحريره.

تعمل نفس الأداة بشكل عكسي مثل أداة تصغير CSS. يؤدي تصغير الشرائط إلى كل مسافة وعلامة تبويب وفاصل أسطر وتعليق (اختياريًا) لا يحتاجه المتصفح، مما يؤدي إلى طي ورقة الأنماط إلى أصغر مكافئ بايت مقابل بايت. غالبًا ما تنخفض ورقة الأنماط جيدة التنسيق بسعة 6 كيلو بايت إلى أقل من 4 كيلو بايت بمجرد اختفاء المسافة البيضاء، مما يعني عددًا أقل من البايتات عبر الشبكة وطلاء أول أسرع. تجميل أثناء الكتابة وتصحيح الأخطاء؛ تصغير النسخة التي تشحنها إلى الإنتاج.

يفهم هذا المنسق أجزاء CSS التي تتعثر في البرامج النصية الساذجة للبحث والاستبدال. تحافظ قواعد at المتداخلة مثل @media و@supports على وضع مسافة بادئة لقواعدها الداخلية بشكل صحيح، ويتم الاحتفاظ بكتل @keyframes ذات الخطوات المئوية، ويتم ترك القيم الحرفية للسلسلة في المحتوى وقيم عنوان url () تمامًا كما هي مكتوبة، ويتم الاحتفاظ بالتعليقات أو إزالتها عند الطلب. يتم تشغيل كل شيء بالكامل في متصفحك، لذلك لا يتم تحميل ورقة الأنماط الخاصة بك، بما في ذلك أي رموز تصميم خاصة أو أسماء فئات داخلية، أبدًا، وتستمر الأداة في العمل بعد تحميل الصفحة حتى بدون أي اتصال.

يُظهر اختبار صغير ما يفعله منسق CSS عبر الإنترنت. لصق @media (العرض الأقصى: 600px){.nav a،.nav button{padding:8px 12px;color:#333}} والنقر فوق Beautify بمسافتين. يفتح استعلام الوسائط كتلته الخاصة، وينتقل زر .nav a و.nav إلى سطرين منفصلين بمستوى واحد، وكل إعلان يقع على سطر خاص به مع مسافة بعد النقطتين. تقرأ شارة الحجم 73 B → 98 B، +34%، لأن المسافة البادئة تضيف بايت. انقر فوق Minify على هذا الإخراج ويعود إلى 73 بايت الأصلية.