Гэрэл ба харанхуй горимтой CSS спрайтуудыг хэрхэн ашиглах вэ
CSS sprites нь вэб хөгжүүлэлтэд ашигладаг, тоог багасгах арга юм HTTP вэб хуудсаар хийсэн хүсэлтүүд. Эдгээр нь олон жижиг зургийг нэг том зургийн файл болгон нэгтгэж, дараа нь CSS ашиглан тухайн зургийн тодорхой хэсгийг вэб хуудсан дээр тус тусад нь тусад нь харуулах явдал юм.
CSS спрайтуудыг ашиглахын гол давуу тал нь вэбсайтын хуудас ачаалах хугацааг сайжруулахад тусалдаг. Вэб хуудсанд зураг ачаалагдах бүрт тусдаа HTTP хүсэлт шаардагддаг бөгөөд энэ нь ачаалах процессыг удаашруулдаг. Олон зургийг нэг спрайт зураг болгон нэгтгэснээр бид хуудсыг ачаалахад шаардагдах HTTP хүсэлтийн тоог багасгаж чадна. Энэ нь ялангуяа дүрс, товчлуур гэх мэт олон жижиг зурагтай сайтуудад илүү хурдан бөгөөд илүү хариу үйлдэл үзүүлэхэд хүргэдэг.
CSS спрайтуудыг ашиглах нь хөтчийн кэшийг ашиглах боломжийг бидэнд олгодог. Хэрэглэгч вэбсайтад зочлох үед тэдний хөтөч эхний хүсэлтийн дараа спрайт зургийг кэшлэх болно. Энэ нь вэб хуудасны спрайт дүрсийг ашиглаж буй бие даасан элементүүдийн дараагийн хүсэлтүүд нь хөтчид аль хэдийн кэшдээ зурагтай байх тул илүү хурдан байх болно гэсэн үг юм.
CSS Спрайтууд өмнөх шигээ алдартай биш
CSS спрайтуудыг сайтын хурдыг сайжруулахад ашигладаг хэвээр байгаа ч тэд урьдынх шигээ тийм ч алдартай биш байж болох юм. Өндөр зурвасын өргөнтэй учир, вэбсайт формат, зургийн шахалт, контент хүргэх сүлжээ (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 Sprite
Үүний нэг сонирхолтой хэрэглээ бол гэрэл ба харанхуй горим юм. Магадгүй танд бараан дэвсгэр дээр харагдахгүй бараан тексттэй лого эсвэл зураг байгаа байх. Би гэрлийн горимд зориулсан цагаан төв, харанхуй горимд зориулсан харанхуй төвтэй товчлуурын жишээг хийсэн.
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 sprite-д түгээмэл хэрэглэгддэг CSS шинж чанаруудыг дэмждэггүй. background-position
. Энэ нь спрайт зургийн файл дотор тус тусдаа зургийг байрлуулахад хүндрэл учруулж болзошгүй.