نحوه استفاده از CSS Sprites با حالت روشن و تاریک

CSS sprites تکنیکی است که در توسعه وب برای کاهش تعداد استفاده می شود HTTP درخواست های ارائه شده توسط یک صفحه وب آنها شامل ترکیب چندین تصویر کوچک در یک فایل تصویری بزرگتر و سپس استفاده از CSS برای نمایش بخش های خاصی از آن تصویر به عنوان عناصر جداگانه در صفحه وب هستند.

مزیت اصلی استفاده از CSS sprites این است که می توانند به بهبود زمان بارگذاری صفحه برای یک وب سایت کمک کنند. هر بار که یک تصویر در یک صفحه وب بارگذاری می شود، به یک درخواست HTTP جداگانه نیاز دارد که می تواند روند بارگذاری را کند کند. با ترکیب چندین تصویر در یک تصویر اسپرایت، می‌توانیم تعداد درخواست‌های HTTP مورد نیاز برای بارگذاری صفحه را کاهش دهیم. این می تواند منجر به یک وب سایت سریعتر و پاسخگوتر شود، به خصوص برای سایت هایی که تصاویر کوچک زیادی مانند آیکون ها و دکمه ها دارند.

استفاده از CSS sprites همچنین به ما این امکان را می دهد که از مزیت کش مرورگر استفاده کنیم. هنگامی که یک کاربر از یک وب سایت بازدید می کند، مرورگر او تصویر sprite را پس از اولین درخواست ذخیره می کند. این بدان معناست که درخواست‌های بعدی برای عناصر منفرد در صفحه وب که از تصویر sprite استفاده می‌کنند بسیار سریع‌تر خواهد بود زیرا مرورگر قبلاً تصویر را در حافظه پنهان خود دارد.

CSS Sprites به اندازه گذشته محبوب نیستند

CSS sprites هنوز هم معمولاً برای بهبود سرعت سایت استفاده می شود، اگرچه ممکن است مانند گذشته محبوب نباشند. به دلیل پهنای باند بالا، وب سایت فرمت ها ، فشرده سازی تصویر، شبکه های تحویل محتوا (CDN), بارگیری تنبلو کش قوی فن‌آوری‌ها، ما به اندازه‌ای که قبلاً در وب می‌بینیم، CSS sprite نمی‌بینیم... اگرچه این هنوز یک استراتژی عالی است. اگر صفحه ای دارید که به تعداد زیادی عکس کوچک ارجاع می دهد، بسیار مفید است.

مثال CSS Sprite

برای استفاده از اسپرایت های CSS، باید با استفاده از CSS موقعیت هر تصویر را در داخل فایل تصویری اسپرایت مشخص کنیم. این معمولا با تنظیم انجام می شود background-image و background-position خواص برای هر عنصر در صفحه وب که از تصویر sprite استفاده می کند. با تعیین مختصات 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 خاصی که معمولاً در sprites CSS استفاده می شوند، مانند background-position. این امر می‌تواند موقعیت تک تک تصاویر را در فایل تصویری اسپرایت دشوار کند.