Məzmun Marketinq

İşıq və Qaranlıq rejimdə CSS Spritelərindən necə istifadə etmək olar

CSS sprites sayını azaltmaq üçün veb inkişafında istifadə olunan bir texnikadır HTTP veb səhifəsi tərəfindən edilən sorğular. Onlar birdən çox kiçik təsviri daha böyük bir şəkil faylında birləşdirməyi və sonra həmin təsvirin xüsusi bölmələrini veb-səhifədə fərdi elementlər kimi göstərmək üçün CSS-dən istifadə etməyi nəzərdə tutur.

CSS spritlərindən istifadənin əsas üstünlüyü ondan ibarətdir ki, onlar vebsayt üçün səhifə yükləmə müddətini yaxşılaşdırmağa kömək edə bilər. Hər dəfə veb-səhifəyə şəkil yüklənəndə o, ayrıca HTTP sorğusu tələb edir ki, bu da yükləmə prosesini ləngidə bilər. Çoxsaylı şəkilləri bir sprite təsvirdə birləşdirməklə, səhifəni yükləmək üçün lazım olan HTTP sorğularının sayını azalda bilərik. Bu, xüsusilə nişanlar və düymələr kimi çoxlu kiçik təsvirləri olan saytlar üçün daha sürətli və daha həssas veb saytla nəticələnə bilər.

CSS spritlərindən istifadə bizə həmçinin brauzerin keşləşdirilməsindən istifadə etməyə imkan verir. İstifadəçi veb-sayta daxil olduqda, onların brauzeri ilk sorğudan sonra sprite şəklini önbelleğe alacaq. Bu o deməkdir ki, veb-səhifədə sprite təsvirindən istifadə edən ayrı-ayrı elementlər üçün sonrakı sorğular daha sürətli olacaq, çünki brauzer artıq təsviri öz keşində saxlayacaqdır.

CSS Sprites Əvvəlki kimi Populyar Deyil

CSS spritləri hələ də saytın sürətini artırmaq üçün istifadə olunur, baxmayaraq ki, onlar əvvəlki kimi populyar olmaya bilər. Yüksək bant genişliyinə görə, webp formatlar, şəkil sıxılma, məzmun çatdırma şəbəkələri (CDN), tənbəl yükləməgüclü önbelleğe alma texnologiyalar, biz internetdə əvvəllər olduğu kimi çoxlu CSS spritləri görmürük… baxmayaraq ki, bu, hələ də əla strategiyadır. Çox sayda kiçik təsvirə istinad edən bir səhifəniz varsa, xüsusilə faydalıdır.

CSS Sprite nümunəsi

CSS spritlərindən istifadə etmək üçün biz CSS-dən istifadə edərək sprite şəkil faylı daxilində hər bir fərdi təsvirin mövqeyini müəyyən etməliyik. Bu adətən təyin etməklə edilir background-imagebackground-position sprite təsvirindən istifadə edən veb səhifədəki hər bir element üçün xassələr. Sprite daxilində təsvirin x və y koordinatlarını təyin etməklə biz ayrı-ayrı şəkilləri səhifədə ayrıca elementlər kimi göstərə bilərik. Budur bir nümunə... bir şəkil faylında iki düyməmiz var:

CSS Sprite nümunəsi

Əgər soldakı şəklin göstərilməsini istəyiriksə, div ilə təmin edə bilərik arrow-left sinif kimi koordinatlar yalnız o tərəfi göstərir:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

Və əgər biz sağ oxu göstərmək istəsək, divimiz üçün sinfi təyin edərdik arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

İşıq və Qaranlıq Rejim üçün CSS Sprites

Bunun maraqlı bir istifadəsi işıq və qaranlıq rejimləridir. Ola bilsin ki, sizdə qaranlıq fonda görünməyən tünd mətn olan loqo və ya şəkil var. İşıq rejimi üçün ağ mərkəzi və qaranlıq rejim üçün qaranlıq mərkəzi olan bir düymənin bu nümunəsini etdim.

css sprite açıq qaranlıq

CSS istifadə edərək, istifadəçinin işıq rejimi və ya qaranlıq rejimdən istifadə etməsinə əsaslanaraq müvafiq şəkil fonunu göstərə bilərəm:

: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);
}

İstisna: E-poçt Müştəriləri bunu dəstəkləməyə bilər

Gmail kimi bəzi e-poçt müştəriləri işıq və qaranlıq rejimlər arasında keçid üçün təqdim etdiyim nümunədə istifadə olunan CSS dəyişənlərini dəstəkləmir. Bu o deməkdir ki, müxtəlif rəng sxemləri üçün sprite təsvirinin müxtəlif versiyaları arasında keçid etmək üçün alternativ üsullardan istifadə etməli ola bilərsiniz.

Digər məhdudiyyət odur ki, bəzi e-poçt müştəriləri CSS spritelərində çox istifadə olunan müəyyən CSS xassələrini dəstəkləmir, məsələn, background-position. Bu, sprite şəkil faylı daxilində fərdi şəkilləri yerləşdirməyi çətinləşdirə bilər.

Douglas Karr

Douglas Karr CMO-dur OpenINSIGHTS və təsisçisi Martech Zone. Duqlas onlarla uğurlu MarTech startapına kömək edib, Martech-in satınalmalarında və investisiyalarında 5 milyard dollardan çox dəyərində lazımi araşdırmaya kömək edib və şirkətlərə satış və marketinq strategiyalarının həyata keçirilməsində və avtomatlaşdırılmasında kömək etməyə davam edir. Duqlas beynəlxalq səviyyədə tanınan rəqəmsal transformasiya və MarTech eksperti və məruzəçisidir. Douglas həm də Dummie's guide və biznes liderliyi kitabının nəşr edilmiş müəllifidir.

əlaqəli məqalələr

Başa dön düyməsini basın
yaxın

Adblock Aşkarlandı

Martech Zone bu məzmunu heç bir ödəniş etmədən sizə təqdim edə bilir, çünki biz reklam gəlirləri, filial bağlantıları və sponsorluqlar vasitəsilə saytımızdan pul qazanırıq. Saytımıza baxarkən reklam blokerinizi silsəniz çox şad olarıq.