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

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

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

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

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

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

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

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

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

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

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

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

الهامش: 5 بكسل؛

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

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

الهامش: 5 بكسل 10 بكسل؛

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

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

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

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

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

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

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

h1 {حجم الخط: x-كبير؛ لون الخط: #FF0000}

حذف التعليقات

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

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

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