CSS Sprites (الشعارات)

تقنية CSS Sprites هي طريقة لقلل من عدد طلبات HTTP التي يتم إرسالها إلى موارد الصور من خلال دمج الصور في ملف واحد.

ما هو صورة الفانتازية

الصورة الفرعية هي صورة ثنائية الأبعاد، تتكون من دمج الصور الصغيرة في صورة كبيرة تحت إحداثيات X و Y المحددة.

لعرض صورة واحدة من الصور المدمجة، يمكن استخدام CSS background-positionالخصائص، تعريف موقع الصورة التي سيتم عرضها.

مزايا استخدام CSS Image Sprite

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

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

أنظر إلى الأمثلة التالية، سترى فرقًا واضحًا. عند وضع مؤشر الفأرة لأول مرة على أيقونة متصفح Sprite غير النسخة، سيظهر صورة التوقف بعد فترة، لأن صورة التوقف يتم تحميلها من الخادم عند وضع المؤشر الفأرة عليها، لأن الصورة العادية وصورة التوقف هما صورتان مختلفتان.

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

جعل صورة الفانتازية

نحن ندمج 10 صور منفردة في صورة واحدة (mySprite.pngلصنع هذه الصورة الفانتازية. يمكنك استخدام أي أداة تحرير صورة تفضلها لإنشاء صورة فانتازية خاصة بك.

من عرض صورة الفانتازية عرض أيقونة

في النهاية، يمكننا باستخدام CSS عرض جزء فقط من صورة الفانتازية.

أولاً، سنقوم بإنشاء فئة .sprite لتحميل صورة الفانتازية. هذا لتجنب التكرار، لأن جميع العناصر تشترك في نفس الصورة الخلفية.

.sprite {
　　　　background: url("images/mySprite.png") no-repeat;
}

الآن، يجب علينا تعريف فئة لكل عنصر سيتم عرضه. على سبيل المثال، لعرض شعار متصفح إنترنت إكسبلورر، ستكون الصورة الفانتازية كشفرة CSS.

.ie　{}}
　　　　width: 50px; /* عرض الرمز */
　　　　height: 50px; /* ارتفاع الرمز */
　　　　display: inline-block; /* عرض الرمز كـ inline block */
　　　　background-position: 0 -200px; /* موقع الخلفية للرمز في السبرايت */
}

الآن ظهرت المشكلة، كيف يمكننا الحصول على هذه القيم البكسليةbackground-position؟ دعونا نجد الجواب. القيمة الأولى هي الموقعالافقي، والثاني هو الموقعالموقع العمودي، وبما أن زاوية اليسار العليا للشعار تلمس الجانب الأيسر، فإن المسافة الأفقية بينه وبين نقطة البداية (أي زاوية اليسار العليا للسبرايت) هي0، وبما أن هذا الرمز يقع في الموضع5 مواضع،لذا فإن المسافة العلوية بينها وبين نقطة البداية هي 4 × 50px = 200px، لأن كل رمز له ارتفاع50px.

لعرض شعار Internet Explorer، يجب علينا تحريك زاوية اليسار العليا له إلى نقطة البداية، وهي زاوية اليسار العليا لصورة السبرايت (mySprite.png). بالإضافة إلى ذلك، بسبب أن المسافة العلوية للشعار هي200px، لذا نحتاج إلى تحريك الصورة الكاملة للخلفية (mySprite.png) لأعلى200px، مما يتطلب تطبيق القيم السلبية-200px، لأن القيم السلبية تجعلها تتحرك لأعلى، بينما القيم الإيجابية تجعلها تتحرك لأسفل. ولكن لا تحتاج إلى تحريكها أفقياً، لأن زاوية اليسار العليا لشعار Internet Explorer ليس لديها بكسل قبل ذلك.

إنشاء قائمة التوجيه باستخدام صورة السبرايت CSS

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

في هذا المكان، سنستخدم نفس صورة السبرايت (mySprite.png）لإنشاء قائمة التوجيه.

أساس التوجيه HTML

سنبدأ بإنشاء صفحة HTML قائمة غير مرتبةالبدء في قائمة التوجيه.

<ul　class="menu">
　　　　<li　class="firefox"><a　href="#">Firefox</a></li>
　　　　<li　class="chrome"><a　href="#">Chrome</a></li>
　　　　<li class="ie"><a href="#">Explorer</a></li>
　　　　<li class="opera"><a href="#">Opera</a></li>
　　　　<li class="safari"><a href="#">Safari</a></li>
</ul>

تطبيق CSS على التوجيه

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

الخطوة 1: إعادة تعيين بنية القائمة

بصورة افتراضية، HTML قائمة غير مرتبةيظهر كبؤر نصية. نحتاج إلى تعيينها من خلالlist-style-typeالخصائص يتم تعيينها لاستبعاد البؤر النصية الافتراضية none.

ul.menu {
　　　　list-style-type: none;
}
ul.menu li {
　　　　padding: 5px;
　　　　font-size: 16px;
　　　　font-family: "Trebuchet MS", Arial, sans-serif;
}

الخطوة 2: إعداد الخصائص العامة للارتباطات

في هذه الخطوة، سنقوم بتعيين جميع الخصائص المشتركة التي ستشاركها جميع الارتباطات. مثلًا:color،background-image،display،padding،،،

ul.menu li a {
　　　　height: 50px;
　　　　line-height: 50px;
　　　　display: inline-block;
　　　　padding-left: 60px; /* To sift text off the background-image */
　　　　color: #3E789F;
　　　　background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
}

الخطوة 3: إعداد حالة الارتباط الافتراضية

الآن، يجب علينا تعريف فئة لكل عنصر قائمة، لأن كل عنصر في الصورة المقدسة له موضع مختلفbackground-positionعلى سبيل المثال، رمز Firefox يقع في بداية الصورة المقدسة أي في الزاوية العلوية اليسرى، لذا لا تحتاج إلى تحريك صورة الخلفية. لذا، في هذه الحالة، ستكون المواضع العمودي والأفقي للخلفية 0. بشكل مماثل، يمكنك تعريف موضع الخلفية للرموز الأخرى داخل الصورة المقدسة.

ul.menu li.firefox a {
　　　　background-position: 0 0;
}
ul.menu li.chrome a {
　　　　background-position: 0 -100px;
}
ul.menu li.ie a {
　　　　background-position: 0 -200px;
}
ul.menu li.safari a {
　　　　background-position: 0 -300px;
}
ul.menu li.opera a {
　　　　background-position: 0 -400px;
}

الخطوة 4: إضافة حالة التمرير للرابط

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

الموقع العمودي للحالة التمرير = الموقع العمودي للحالة الافتراضية - 50px

بما أن صورة الفأرة عند التمرير فوقها تقع تحت الحالة الافتراضية، فإن طول كل رمز يساوي 50px. لا تحتاج حالة التمرير إلى تحريك أفقي، لأنه لا يوجد بكسل قبل الزاوية العلوية اليسرى للرمز.

ul.menu li.firefox a:hover {
　　　　background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
　　　　background-position: 0 -150px;
}
ul.menu li.ie a:hover {
　　　　background-position: 0 -250px;
}
ul.menu li.safari a:hover {
　　　　background-position: 0 -350px;
}
ul.menu li.opera a:hover {
　　　　background-position: 0 -450px;
}

تم الانتهاء من ذلك! بعد دمج العملية بأكملها، هذا هو شيفرة HTML وCSS النهائية الخاصة بنا: