мазмун Marketing

Жарык жана караңгы режимде CSS спрайттарын кантип колдонсо болот

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

CSS спрайттарын колдонуунун негизги артыкчылыгы, алар веб-сайт үчүн баракты жүктөө убактысын жакшыртууга жардам берет. Сүрөт веб-баракчага жүктөлгөн сайын, ал өзүнчө HTTP сурамын талап кылат, ал жүктөө процессин жайлатышы мүмкүн. Бир нече сүрөттөрдү бир спрайт сүрөтүнө бириктирүү менен биз баракты жүктөө үчүн талап кылынган HTTP сурамдарынын санын азайта алабыз. Бул, айрыкча, сүрөтчөлөр жана баскычтар сыяктуу көптөгөн кичинекей сүрөттөрү бар сайттар үчүн тезирээк жана жооп берүүчү веб-сайтка алып келиши мүмкүн.

CSS спрайттарын колдонуу, ошондой эле браузердин кэштерин колдонууга мүмкүнчүлүк берет. Колдонуучу веб-сайтка киргенде, анын браузери биринчи сурамдан кийин спрайт сүрөтүн кэштейт. Бул спрайт сүрөтүн колдонуп жаткан веб-баракчадагы айрым элементтерге кийинки суроо-талаптар бир топ ылдамыраак болорун билдирет, анткени браузердин кэшинде сүрөт бар.

CSS Спрайттары мурункудай популярдуу эмес

CSS спрайттары дагы эле сайттын ылдамдыгын жогорулатуу үчүн колдонулат, бирок алар мурдагыдай популярдуу боло албайт. Өткөрүү жөндөмдүүлүгү жогору болгондуктан, желе форматтар, сүрөттү кысуу, мазмун жеткирүү тармактары (ИНК), жалкоо жүктөө, жана күчтүү кэш технологиялар, биз желеде мурункудай көп CSS спрайттарын көрбөйбүз… бирок бул дагы эле сонун стратегия. Эгер сизде көптөгөн майда сүрөттөргө шилтеме берген баракчаңыз болсо, бул өзгөчө пайдалуу.

CSS Sprite мисалы

CSS спрайттарын колдонуу үчүн, биз CSS аркылуу спрайт сүрөт файлынын ичиндеги ар бир сүрөттүн абалын аныкташыбыз керек. Бул, адатта, орнотуу менен жүзөгө ашырылат background-image жана background-position спрайт сүрөтүн колдонгон веб-баракчадагы ар бир элементтин касиеттери. Спрайт ичиндеги сүрөттүн х жана у координаттарын көрсөтүү менен, биз жеке сүрөттөрдү баракта өзүнчө элементтер катары көрсөтө алабыз. Бул жерде бир мисал… бир сүрөт файлында бизде эки баскыч бар:

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 спрайттары

Мунун бир кызыктуу колдонулушу жарык жана караңгы режимдер. Балким, сизде кара фондо көрүнбөгөн кара тексти бар логотип же сүрөт бардыр. Мен жарык режими үчүн ак борбору жана караңгы режим үчүн караңгы борбору бар баскычтын бул мисалын жасадым.

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. Бул спрайт сүрөт файлынын ичинде жеке сүрөттөрдү жайгаштырууну кыйындатат.

Douglas Karr

Douglas Karr CMO болуп саналат OpenINSIGHTS жана негиздөөчүсү Martech Zone. Дуглас ондогон ийгиликтүү MarTech стартаптарына жардам берди, Martech сатып алууларына жана инвестицияларына 5 миллиард доллардан ашык каражатты текшерүүгө жардам берди жана компанияларга сатуу жана маркетинг стратегияларын ишке ашырууда жана автоматташтырууда жардам берүүнү улантууда. Дуглас эл аралык деңгээлде таанылган санариптик трансформация жана MarTech эксперти жана спикери. Дуглас ошондой эле Dummie's guide жана бизнес лидерлик китебинин басылып чыккан автору.

Тектеш макалалар

Артка жогорку баскычы
жакын

Adblock аныкталды

Martech Zone Бул мазмунду сизге эч кандай акы төлөбөй бере алат, анткени биз сайтыбызды жарнамадан түшкөн киреше, өнөктөштүк шилтемелер жана демөөрчүлүк аркылуу акча табабыз. Биздин сайтты көрүп жатканыңызда жарнама блокаторуңузду алып салсаңыз, биз ыраазыбыз.