يمكن لاختصارات CSS تقليل حجم ملفات CSS بشكل فعال

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

استخدام الطبيعة المختصرة لـ CSS

خصائص CSS المختصرة هي أسماء خصائص خاصة تُستخدم لاستبدال مجموعات متعددة من الخصائص ذات الصلة. على سبيل المثال، خاصية الحشو هي اختصار لـ padding-top، وpadding-right، وpadding-bottom، وpadding-left.

يتيح لك استخدام الخصائص المختصرة ضغط أزواج خصائص/سمات متعددة في سطر واحد من التعليمات البرمجية في ورقة أنماط CSS. على سبيل المثال، خذ بعين الاعتبار الكود التالي:


يمكن أن يؤدي استبدالها ببعض خصائص الاختصار إلى تقليل الكود إلى ما يلي، والتأثير الفعلي للاثنين هو نفسه تمامًا:


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


وبالمثل، يمكنك تمثيل أزواج الخصائص العلوية/السفلى واليمين/اليسار باستخدام خاصيتين تتبعان خصائص هامش الحدود أو التباعد.


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

الخلفية: مرفق الخلفية، لون الخلفية، صورة الخلفية، موضع الخلفية، تكرار الخلفية
الحدود: لون الحدود، نمط الحدود، عرض الحدود
الحد السفلي (الحد السفلي): لون الحد السفلي، نمط الحد السفلي، عرض الحد السفلي
الحدود اليسرى (الحدود اليسرى): لون الحدود اليسرى، نمط الحدود اليسرى، عرض الحدود اليسرى
الحدود اليمنى (الحدود اليمنى): لون الحدود اليمنى، نمط الحدود اليمنى، عرض الحدود اليمنى
Border-top (الحد العلوي): لون الحد العلوي، نمط الحد العلوي، عرض الحد العلوي
إشارة (إشارة صوتية): إشارة مسبقة، إشارة لاحقة
الخط: الخط، حجم الخط، نمط الخط، وزن الخط، متغير الخط، ارتفاع الخط، تعديل حجم الخط، تمديد الخط
نمط القائمة: صورة نمط القائمة، موضع نمط القائمة، نوع نمط القائمة
الهامش (الفارغ): الهامش العلوي، الهامش الأيمن، الهامش السفلي، الهامش الأيسر
المخطط التفصيلي: لون المخطط التفصيلي، نمط المخطط التفصيلي، عرض المخطط التفصيلي
الحشو: الفجوة العلوية، الفجوة اليمنى، الفجوة السفلية، الفجوة اليسرى
وقفة: وقفة بعد، وقفة قبل

تقليل المساحة البيضاء

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


حذف التعليق

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


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