كيفية استخدام CSS Sprites مع الوضع الفاتح والظلام
CSS العفاريت هي تقنية تستخدم في تطوير الويب لتقليل عدد HTTP الطلبات التي قدمتها صفحة الويب. إنها تتضمن دمج صور صغيرة متعددة في ملف صورة واحد أكبر ثم استخدام CSS لعرض أقسام معينة من تلك الصورة كعناصر فردية على صفحة الويب.
الفائدة الأساسية لاستخدام CSS sprites هي أنها يمكن أن تساعد في تحسين وقت تحميل الصفحة لموقع ويب. في كل مرة يتم فيها تحميل صورة على صفحة ويب ، فإنها تتطلب طلب HTTP منفصل ، مما قد يؤدي إلى إبطاء عملية التحميل. من خلال دمج صور متعددة في صورة رموز متحركة واحدة ، يمكننا تقليل عدد طلبات HTTP اللازمة لتحميل الصفحة. يمكن أن ينتج عن ذلك موقع ويب أسرع وأكثر استجابة ، خاصة للمواقع التي تحتوي على العديد من الصور الصغيرة مثل الرموز والأزرار.
يتيح لنا استخدام CSS sprites أيضًا الاستفادة من التخزين المؤقت للمتصفح. عندما يزور المستخدم موقعًا إلكترونيًا ، سيقوم متصفحه بتخزين صورة الرموز المتحركة مؤقتًا بعد الطلب الأول. هذا يعني أن الطلبات اللاحقة للعناصر الفردية على صفحة الويب التي تستخدم صورة الرموز المتحركة ستكون أسرع نظرًا لأن المتصفح سيحتوي بالفعل على الصورة في ذاكرة التخزين المؤقت الخاصة به.
CSS Sprites لم تكن شائعة كما كانت من قبل
لا تزال النقوش المتحركة CSS مستخدمة بشكل شائع لتحسين سرعة الموقع ، على الرغم من أنها قد لا تكون شائعة كما كانت من قبل. بسبب عرض النطاق الترددي العالي ، ويب بي الأشكال ، ضغط الصورة، شبكات توصيل المحتوى (كندي), تحميل كسولو قوي التخزين المؤقت التقنيات ، لا نرى العديد من الرموز المتحركة لـ CSS كما اعتدنا على الويب ... على الرغم من أنها لا تزال استراتيجية رائعة. إنه مفيد بشكل خاص إذا كانت لديك صفحة تشير إلى عدد كبير من الصور الصغيرة.
مثال CSS Sprite
لاستخدام CSS sprites ، نحتاج إلى تحديد موضع كل صورة فردية داخل ملف صورة sprite باستخدام CSS. يتم ذلك عادةً عن طريق تعيين ملف background-image
و background-position
خصائص كل عنصر على صفحة الويب يستخدم صورة الرموز المتحركة. من خلال تحديد إحداثيات x و y للصورة داخل الكائن ، يمكننا عرض الصور الفردية كعناصر منفصلة على الصفحة. هذا مثال ... لدينا زرين في ملف صورة واحد:
إذا أردنا عرض الصورة على اليسار ، فيمكننا تزويد div بـ arrow-left
كالفئة بحيث تعرض الإحداثيات هذا الجانب فقط:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
وإذا كنا نرغب في عرض السهم الأيمن ، فسنقوم بتعيين فئة لـ div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites للوضع الفاتح والداكن
أحد الاستخدامات المثيرة للاهتمام لهذا هو مع أوضاع الضوء والظلام. ربما يكون لديك شعار أو صورة بها نص غامق غير مرئي على خلفية داكنة. لقد فعلت هذا المثال لزر به مركز أبيض لوضع الإضاءة ومركز مظلم للوضع المظلم.
باستخدام CSS ، يمكنني عرض خلفية الصورة المناسبة بناءً على ما إذا كان المستخدم يستخدم الوضع الفاتح أو الوضع المظلم:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
استثناء: قد لا يدعم عملاء البريد الإلكتروني هذا
لا تدعم بعض عملاء البريد الإلكتروني ، مثل Gmail ، متغيرات CSS ، والتي يتم استخدامها في المثال الذي قدمته للتبديل بين الوضعين الفاتح والداكن. هذا يعني أنك قد تحتاج إلى استخدام تقنيات بديلة للتبديل بين الإصدارات المختلفة من صورة النقوش لأنظمة ألوان مختلفة.
هناك قيد آخر وهو أن بعض عملاء البريد الإلكتروني لا يدعمون بعض خصائص CSS المستخدمة بشكل شائع في CSS sprites ، مثل background-position
. هذا يمكن أن يجعل من الصعب وضع الصور الفردية داخل ملف صورة الرموز المتحركة.