تسريع موقع الويب الخاص بك باستخدام اختصارات CSS

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

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

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

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

.sample1 {
الهامش العلوي: 15 بكسل؛
الهامش الأيمن: 20 بكسل؛
الهامش السفلي: 12 بكسل؛
الهامش الأيسر: 24 بكسل؛
الحشو العلوي: 5 بكسل؛
الحشو على اليمين: 10 بكسل؛
الحشو السفلي: 4 بكسل؛
المساحة المتروكة لليسار: 8 بكسل؛
عرض الحدود العلوية: رفيع؛
نمط الحدود الأعلى: صلب؛
لون الحدود العلوي: #000000؛
}

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

.sample1 {.
الهامش: 15 بكسل 20 بكسل 12 بكسل 24 بكسل؛
الحشو: 5px 10px 4px 8px؛
الحدود العلوية: رفيعة صلبة #000000؛
}

لاحظ أن الخاصية المختصرة لها أيضًا خصائص متعددة، كل منها يتوافق مع خاصية عادية يتم دمجها في الخاصية المختصرة. يتم فصل الخصائص بمسافة بيضاء.

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

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

هامش: 5px 5px 5px 5px؛

هامش: 5px؛

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

الهامش: 5px 10px 5px 10px؛

الهامش: 5px 10px؛

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

قائمة خصائص اختصارات CSS

فيما يلي قائمة بخصائص CSS المختصرة والخصائص العامة التي تمثلها.

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

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

على سبيل المثال، أمثلة التعليمات البرمجية التالية متطابقة في المحتوى، ولكن المثال الثاني أكثر دقة:

h1 {
حجم الخط: كبير جدًا؛
وزن الخط: غامق؛
اللون: #FF0000؛
}

h1 {font-size: x-large;font-weight:old color: #FF0000}

إزالة التعليقات

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

h1 { /* نمط العنوان 1*/
حجم الخط: كبير جدًا /* حجم كبير جدًا */
وزن الخط: غامق /* غامق */
اللون: #FF0000 /* أحمر */
}

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