Content Marketing

كيفية استخدام 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 للصورة داخل الكائن ، يمكننا عرض الصور الفردية كعناصر منفصلة على الصفحة. هذا مثال ... لدينا زرين في ملف صورة واحد:

مثال CSS Sprite

إذا أردنا عرض الصورة على اليسار ، فيمكننا تزويد 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 رمز غامق فاتح

باستخدام 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. هذا يمكن أن يجعل من الصعب وضع الصور الفردية داخل ملف صورة الرموز المتحركة.

Douglas Karr

Douglas Karr هو CMO من أوبن إنسايتس ومؤسس Martech Zone. ساعد دوغلاس العشرات من الشركات الناشئة الناجحة في MarTech، وساعد في العناية الواجبة بأكثر من 5 مليارات دولار في عمليات الاستحواذ والاستثمارات في Martech، ويستمر في مساعدة الشركات في تنفيذ وأتمتة استراتيجيات المبيعات والتسويق الخاصة بها. دوغلاس هو أحد خبراء التحول الرقمي المعترف بهم عالميًا وخبير ومتحدث في MarTech. دوغلاس هو أيضًا مؤلف منشور لدليل Dummie وكتاب عن قيادة الأعمال.

مقالات ذات صلة

العودة إلى الزر العلوي
اغلاق

كشف Adblock

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