(ب) تأليف رمز خدمات الدعم المركزية فوراً من أجل أساليب المواقع الشبكية الأنظف والقابلة للقراءة والسهلة المديونية.
مقدّمة
شيفرة CSS المصغَّرة أو المضغوطة يدويًّا سريعة على المتصفّح في التنزيل، لكنّها عسيرة على القارئ البشري — يلتصق كلّ شيء ببعضه بلا فواصل أسطر ولا إزاحة، وغالبًا بلا تعليقات. والتجميل يفعل عكس التصغير: يأخذ الشيفرة في حالتها المضغوطة ويعيد بناء فواصل الأسطر والمسافات والإزاحة التي تجعلها مقروءة من جديد، دون أن يغيّر ما تفعله أيّ قاعدة. ويهمّ هذا كلّما احتاج إنسانٌ لا متصفّح أن ينظر في الشيفرة فعلًا: ليتعلّم منها أو يراجعها أو يجد قاعدة بعينها داخلها.
كيف تنسّق هذه الأداة شيفرتك
لصق الشيفرة والنقر على «تجميل» يعيد بناء الكود بواقع قاعدة واحدة لكلّ كتلة: كلّ محدِّد في سطره، وتحته خصائصه مُزاحة، خاصّية في كلّ سطر. أمّا قيم الخصائص نفسها — الألوان والوحدات والكتابة المختصرة — فتبقى تمامًا كما لصقتها؛ ولا يتغيّر إلّا التباعد والبنية. وثمّة تفصيلان يستحقّان المعرفة في طريقة التعامل مع المحدِّدات والقيم:
- المحدِّدات المجمّعة تبقى معًا. القاعدة ذات المحدِّدات المتعدّدة المفصولة بفواصل، مثل
.card, .card-highlight, .card-featured { ... }، تُحفظ في سطر محدِّدات واحد بدل تقسيمها سطرًا لكلّ محدِّد كما تفعل بعض أدوات التنسيق. - القيم التي تتضمّن نقطتين تُعالَج معالجةً صحيحة. فالنقطتان الأوليان في كلّ تصريح هما وحدهما الفاصل بين الخاصّية وقيمتها، وبذلك لا تُقطع في الموضع الخطأ قيمةٌ تحوي هي نفسها نقطتين — وأشيع صور ذلك عنوان ويب مثل
background: url(http://example.com/img.png).
وتُحذف التعليقات ضمن هذه العملية، وهو ما يجدر الانتباه له إن كانت ورقة الأنماط تتضمّن إشعار ترخيص أو نسبة — انظر الملاحظة أدناه.
ما ينبغي معرفته قبل الاستعمال
تعمل هذه الأداة جيّدًا مع شيفرة CSS مباشرة ومسطّحة — قائمة بسيطة من المحدِّدات وخصائصها. ولها حدّان بعينهما يجدر معرفتهما قبل لصق شيفرة من الواقع:
- القواعد المتداخلة لا تُنسَّق تنسيقًا صحيحًا. إن تضمّنت شيفرتك استعلام
@mediaأو كتلة@keyframesأو أيّ قاعدة متداخلة داخل كتلة أخرى، فالأرجح أن يخرج القسم المحيط بها مشوَّشًا لا مُزاحًا بنظافة. فهذه الأداة تعيد بناء البنية بمطابقة الأقواس المعقوفة الفاتحة والغالقة زوجًا زوجًا، ولا تتعقّب عمق القوس داخل كتلة أخرى — ولذلك يختلط محتوى القاعدة المتداخلة داخل@mediaبكتلة@mediaنفسها بدل أن يبقى متداخلًا كما ينبغي. فإن كانت ورقة أنماطك تستعمل استعلامات الوسائط أو الإطارات المفتاحية، فافحص ذلك القسم من الناتج بعناية، أو جمّل نسخةً أُزيلت منها الأجزاء المتداخلة. - تُحذف كلّ التعليقات بلا استثناء. فخلافًا لأداة CSS Minifier في هذا الموقع، التي تُبقي التعليقات المكتوبة إشعاراتِ ترخيص أو نسبة، يجرّد هذا المجمِّل الشيفرة الملصوقة من كلّ تعليق فيها. وإن كانت ورقة أنماطك تتضمّن ترويسة ترخيص لا بدّ من بقائها، فاحفظ نسخةً منها قبل التجميل.
ولا يؤثّر أيّ من هذين في ما تفعله الشيفرة — فالقواعد والقيم الكامنة لا تتغيّر؛ وإنّما الأمر كلّه في مقدار البنية الذي يُعاد تنسيقه تنسيقًا صحيحًا إلى صورة مقروءة.
متى تكون هذه هي الأداة المناسبة
- قراءة شيفرة CSS مصغَّرة لغيرك بقصد التعلّم منها. فالاطّلاع على ورقة أنماط موقع حقيقي عبر أدوات المطوّر في المتصفّح يُظهر غالبًا شيفرة مضغوطة غير مقروءة — ولصقها هنا وتجميلها يتيح دراسة كيفية بناء تخطيط أو مكوّن دراسةً حقيقية، وهو استعمال أصيل في الثقافة الرقمية يتجاوز مجرّد تمرير شيفرتك أنت على الأداة.
- مراجعة شيفرة CSS سلّمها طالب. فالشيفرة المنسوخة والملصوقة بين المحرّرات تفقد أحيانًا تنسيقها الأصلي؛ وتجميلها قبل القراءة يجعل المراجعة والتغذية الراجعة أسرع.
- تتبّع خلل في تخطيط لا يعمل. فمسح شيفرة كثيفة غير منسَّقة بحثًا عن القاعدة التي تسبّب المشكلة أصعب — وتنسيقها أولًا يجعل رؤية الخلل الحقيقي أيسر في العادة.
أمّا إن كانت الشيفرة التي تعمل عليها تعتمد على استعلامات @media أو كتل متداخلة أخرى واحتجت تنسيقًا موثوقًا، فالمنسّق المدمج في محرّر الشيفرة أنسب من هذه الأداة — انظر الحدّ المذكور أعلاه. وأمّا ورقة الأنماط المسطّحة الخالية من القواعد المتداخلة، وهي تغطّي كثيرًا من أعمال تصميم الويب في مستوى المبتدئين، فهذه الأداة طريق سريع إلى ناتج مقروء دون تثبيت أيّ شيء.
مثال
تجد طالبةٌ شيفرة CSS في موقع قوالب مثيرةً للاهتمام، وتريد أن تفهم كيف بُني تخطيط البطاقات فيه. وورقة الأنماط المنشورة مصغَّرة في سطر واحد كثيف، فتلصقها في هذه الأداة وتجمّلها قبل أن تتمكّن من قراءتها أصلًا. عندها تتفكّك القواعد إلى بنية مقروءة، فيصير بالإمكان رؤية أيّ محدِّد يتحكّم بأيّ جزء من التخطيط، وكيف تُضبط المسافات بـ margin وpadding، وأيّ الألوان يتكرّر عبر التصميم. وإن تضمّنت الورقة المنسوخة استعلامات @media للسلوك المتجاوب، فذلك القسم يحتاج نظرةً ثانية بعد ذلك — انظر «ما ينبغي معرفته قبل الاستعمال» أعلاه.
أسئلة شائعة
هل يغيّر التجميل ما تفعله الشيفرة؟
لا. لا يتغيّر إلّا التباعد وفواصل الأسطر والإزاحة — أمّا المحدِّدات والخصائص والقيم فتبقى كما هي.
ماذا يحدث للتعليقات في شيفرتي؟
تُحذف. فهذه الأداة لا تُبقي تعليقات الترخيص أو النسبة كما تفعل CSS Minifier — احفظ نسخةً أولًا إن كنت تحتاج الإبقاء على واحد منها.
هل تنسّق الشيفرة ذات استعلامات الوسائط تنسيقًا صحيحًا؟
ليس على نحو موثوق. فالقواعد المتداخلة داخل @media أو @keyframes أو ما يشبههما قد تخرج مشوَّشة — افحص ذلك الجزء من الناتج، أو استعمل منسّق محرّر الشيفرة لأوراق الأنماط التي تعتمد كثيرًا على التداخل.
هل لي أن أجمّل شيفرة مصغَّرة نسختها من موقع آخر؟
نعم — وهو استعمال شائع ومشروع لتعلّم كيفية بناء الصفحات. لكن انتبه إلى شروط الموقع المصدر إن كنت تنوي إعادة استعمال الشيفرة فعلًا لا دراستها فحسب.
هل تُحفظ شيفرتي في مكان ما؟
لا. تُعالَج الشيفرة الملصوقة لإنتاج الناتج المنسَّق ولا تُخزَّن بعد ذلك؛ ولا يُسجَّل إلّا أنّ الأداة استُعملت، لا الشيفرة نفسها.
هل تُقسَّم المحدِّدات المجمّعة إلى أسطر منفصلة؟
لا. القاعدة المكتوبة بعدّة محدِّدات مفصولة بفواصل تبقى في سطر محدِّدات واحد، مطابقةً لما كُتبت عليه أصلًا.
ما الأدوات ذات الصلة التي يمكنني استعمالها؟
استعمل CSS Minifier لضغط الشيفرة من جديد استعدادًا للنشر، أو JavaScript Beautifier وHTML Beauty لسائر أعمال تنسيق الشيفرة.
