Жарык жана караңгы режимде CSS спрайттарын кантип колдонсо болот
CSS спрайттардын санын азайтуу үчүн веб-иштеп чыгууда колдонулган ыкма HTTP веб-баракчасы тарабынан жасалган суроо-талаптар. Алар бир нече кичинекей сүрөттөрдү бир чоңураак сүрөт файлына бириктирип, андан кийин веб-баракчада ошол сүрөттүн белгилүү бир бөлүктөрүн жеке элементтер катары көрсөтүү үчүн CSSти колдонууну камтыйт.
CSS спрайттарын колдонуунун негизги артыкчылыгы, алар веб-сайт үчүн баракты жүктөө убактысын жакшыртууга жардам берет. Сүрөт веб-баракчага жүктөлгөн сайын, ал өзүнчө HTTP сурамын талап кылат, ал жүктөө процессин жайлатышы мүмкүн. Бир нече сүрөттөрдү бир спрайт сүрөтүнө бириктирүү менен биз баракты жүктөө үчүн талап кылынган HTTP сурамдарынын санын азайта алабыз. Бул, айрыкча, сүрөтчөлөр жана баскычтар сыяктуу көптөгөн кичинекей сүрөттөрү бар сайттар үчүн тезирээк жана жооп берүүчү веб-сайтка алып келиши мүмкүн.
CSS спрайттарын колдонуу, ошондой эле браузердин кэштерин колдонууга мүмкүнчүлүк берет. Колдонуучу веб-сайтка киргенде, анын браузери биринчи сурамдан кийин спрайт сүрөтүн кэштейт. Бул спрайт сүрөтүн колдонуп жаткан веб-баракчадагы айрым элементтерге кийинки суроо-талаптар бир топ ылдамыраак болорун билдирет, анткени браузердин кэшинде сүрөт бар.
CSS Спрайттары мурункудай популярдуу эмес
CSS спрайттары дагы эле сайттын ылдамдыгын жогорулатуу үчүн колдонулат, бирок алар мурдагыдай популярдуу боло албайт. Өткөрүү жөндөмдүүлүгү жогору болгондуктан, желе форматтар, сүрөттү кысуу, мазмун жеткирүү тармактары (ИНК), жалкоо жүктөө, жана күчтүү кэш технологиялар, биз желеде мурункудай көп CSS спрайттарын көрбөйбүз… бирок бул дагы эле сонун стратегия. Эгер сизде көптөгөн майда сүрөттөргө шилтеме берген баракчаңыз болсо, бул өзгөчө пайдалуу.
CSS Sprite мисалы
CSS спрайттарын колдонуу үчүн, биз CSS аркылуу спрайт сүрөт файлынын ичиндеги ар бир сүрөттүн абалын аныкташыбыз керек. Бул, адатта, орнотуу менен жүзөгө ашырылат background-image
жана background-position
спрайт сүрөтүн колдонгон веб-баракчадагы ар бир элементтин касиеттери. Спрайт ичиндеги сүрөттүн х жана у координаттарын көрсөтүү менен, биз жеке сүрөттөрдү баракта өзүнчө элементтер катары көрсөтө алабыз. Бул жерде бир мисал… бир сүрөт файлында бизде эки баскыч бар:
Эгерде биз сол жактагы сүрөттүн көрсөтүлүшүн кааласак, анда биз 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
. Бул спрайт сүрөт файлынын ичинде жеке сүрөттөрдү жайгаштырууну кыйындатат.