Ашық және қараңғы режимде CSS спрайттарын қалай пайдалануға болады

CSS спрайттардың санын азайту үшін веб-әзірлеуде қолданылатын әдіс HTTP веб-бет арқылы жасалған сұраулар. Олар бірнеше кішкентай кескіндерді бір үлкен сурет файлына біріктіруді, содан кейін сол кескіннің белгілі бір бөлімдерін веб-беттегі жеке элементтер ретінде көрсету үшін CSS пайдалануды қамтиды.

CSS спрайттарын пайдаланудың басты артықшылығы - олар веб-сайт үшін бетті жүктеу уақытын жақсартуға көмектесуі мүмкін. Веб-бетке сурет жүктелген сайын, ол бөлек HTTP сұрауын қажет етеді, ол жүктеу процесін баяулатуы мүмкін. Бірнеше кескінді бір спрайт кескініне біріктіру арқылы біз бетті жүктеуге қажетті HTTP сұрауларының санын азайта аламыз. Бұл әсіресе белгішелер мен түймелер сияқты көптеген кішкентай кескіндері бар сайттар үшін жылдамырақ және жауап беретін веб-сайтқа әкелуі мүмкін.

CSS спрайттарын пайдалану сонымен қатар браузерді кэштеу мүмкіндігін пайдалануға мүмкіндік береді. Пайдаланушы веб-сайтқа кірген кезде, олардың браузері бірінші сұраудан кейін спрайт кескінін кэштейді. Бұл спрайт кескінін пайдаланатын веб-беттегі жеке элементтерге кейінгі сұраулар әлдеқайда жылдамырақ болатынын білдіреді, себебі браузерде кескін өзінің кэшінде әлдеқашан болады.

CSS спрайттары бұрынғыдай танымал емес

CSS спрайттары бұрынғыдай танымал болмаса да, сайт жылдамдығын жақсарту үшін әлі де жиі пайдаланылады. Өткізу қабілеті жоғары болғандықтан, webp форматтар, кескінді сығымдау, мазмұнды жеткізу желілері (CDN), жалқау жүктеу, және күшті кэштеу технологиялар, біз Интернетте бұрынғыдай көп CSS спрайттарын көрмейміз… бұл әлі де тамаша стратегия. Бұл әсіресе көптеген кішкентай кескіндерге сілтеме жасайтын бетіңіз болса пайдалы.

CSS Sprite мысалы

CSS спрайттарын пайдалану үшін біз 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 спрайттары

Мұның бір қызықты қолданылуы ашық және қараңғы режимдермен байланысты. Мүмкін сізде қараңғы фонда көрінбейтін қара мәтіні бар логотип немесе кескін бар болуы мүмкін. Мен жарық режимі үшін ақ ортасы және қараңғы режим үшін қараңғы орталығы бар түйменің мысалын жасадым.

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 сипаттарын қолдамайды, мысалы background-position. Бұл спрайт кескін файлында жеке кескіндерді орналастыруды қиындатады.