مقدمة لمعنى ومزايا وعيوب CSS Sprites لتخطيط CSS

تقنية CSS Sprites في وقت مبكر من عام 2005، نشر Dave Shea، مالك CSS Zengarden، شرحًا تفصيليًا لهذه التقنية في ALA.

في الأصل، تم توزيعها فقط بين مشغلات CSS كطريقة إنتاج. لاحقًا، ظهرت 14 قاعدة لمواقع الويب ذات التحميل السريع وتم تداولها بين الفنيين. القاعدة الأولى، تقديم طلبات HTTP أقل، ذكرت CSS Sprites. لذلك أصبح هذا العفريت الصغير مشهورًا، وحتى أدوات التوليد عبر الإنترنت ظهرت، وهو أمر لا يمكن إيقافه. في الآونة الأخيرة، ذكرت العديد من المدونات المحلية CSS Sprites، والمثال الأكثر شهرة هو الرسوم المتحركة أدناه google.co.kr. في الإصدار الأخير من YUI، تم استخدام CSS Sprites أيضًا، حيث تمت تغطية جميع صور CSS الزخرفية تقريبًا بصورة 40 × 2000. استخدم فيسبوك، أحد مواقع التواصل الاجتماعي الكبرى، مؤخرًا صورة مقاس 22×1150 لتغطية كافة الأيقونات. وفجأة، أصبحت CSS Sprites موجودة في كل مكان.

كيف تعمل CSS Sprites

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

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

لنستخدم sprite.png الخاص بـ YUI كمثال. إذا كان لدينا مثل هذا الجزء من التعليمات البرمجية، فإن الحد الأقصى يمثل التكبير بينما يمثل الحد الأدنى التصغير، ونحن بحاجة إلى مطابقتهما مع الصور الجميلة المقابلة (حتى يكون موقعنا جذابًا):

يستخدم كلا الفئتين نفس الصورة:

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

هذه المرة نجحنا!

مزايا CSS Sprites

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

عيوب CSS Sprites

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

نظرًا لأن موضع الصورة يجب أن يكون ثابتًا على قيمة مطلقة، يتم فقدان المرونة مثل المركز.

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

ملخص العفاريت CSS

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