مقدمة إلى CSS Sprites
تتم ترجمته عادةً باسم "خياطة صور CSS" أو "تحديد موضع نسيج CSS". لا تعد CSS Sprites تقنية جديدة، فقد تطورت بشكل ناضج نسبيًا في تطوير الويب. ويمكن العثور على ظل CSS Sprites في كل مكان على صفحات الويب الخاصة بالشركات التابعة لشركة Alibaba. لكن CSS Sprites ليست قاعدة ذهبية، ولكن في كثير من الحالات، لها مزايا معينة، أهم شيء هو أنها يمكن أن تقلل الحمل على الخادم وتحسن سرعة تحميل صفحات الويب. مع تطور تصميم الويب في اتجاه أكثر تعقيدًا وإبداعًا، بدأ المصممون في التفكير في استخدام أساليب غير Javascript لإنشاء تأثيرات تمرير الماوس والتمرير على القائمة. في هذا الوقت، ظهر CSS Sprite.
بصراحة، تقوم CSS Sprites بدمج بعض صور الخلفية في صفحة الويب في ملف صورة، ثم تستخدم مجموعة CSS "صورة الخلفية" و"تكرار الخلفية" و"موضع الخلفية" لتحديد موضع الخلفية. يمكن للموضع استخدام الأرقام لتحديد موضع صورة الخلفية بدقة.
عند تحميل الصفحة، بدلاً من تحميل كل صورة على حدة، يتم تحميل الصورة المدمجة بأكملها مرة واحدة. يعد هذا تحسينًا رائعًا، فهو يقلل بشكل كبير من عدد طلبات HTTP، ويقلل ضغط الخادم، ويقلل التأخير الزمني المطلوب لتحميل الصور عند التمرير، مما يجعل التأثير أكثر سلاسة وبدون توقف مؤقت.
مقالات ذات صلة بـ CSS Sprites
تطبيق CSS العفاريت
وفي هذا الصدد، فإن أداء تاوباو أفضل، واسمحوا لي أن أتخذ تاوباو كمثال.
مثال 1: التنقل في صفحة قناة تاوباو
تقديم:
مخطط العفاريت:
