ფაილი მარკეტინგული

როგორ გამოვიყენოთ CSS Sprites მსუბუქი და მუქი რეჟიმით

CSS sprites არის ტექნიკა, რომელიც გამოიყენება ვებ დეველოპმენტში რაოდენობის შესამცირებლად HTTP ვებგვერდის მიერ გაკეთებული მოთხოვნები. ისინი მოიცავს რამდენიმე პატარა სურათის გაერთიანებას ერთ უფრო დიდ გამოსახულების ფაილში და შემდეგ CSS-ის გამოყენებას ამ სურათის კონკრეტული სექციების ცალკეულ ელემენტებად ვებ გვერდზე გამოსაჩენად.

CSS sprites-ის გამოყენების უპირველესი სარგებელი არის ის, რომ მათ შეუძლიათ გააუმჯობესონ გვერდის დატვირთვის დრო ვებსაიტისთვის. ყოველ ჯერზე, როდესაც სურათი იტვირთება ვებ გვერდზე, მას სჭირდება ცალკე HTTP მოთხოვნა, რამაც შეიძლება შეანელოს ჩატვირთვის პროცესი. რამდენიმე გამოსახულების ერთ sprite სურათში გაერთიანებით, ჩვენ შეგვიძლია შევამციროთ გვერდის ჩასატვირთად საჭირო HTTP მოთხოვნების რაოდენობა. ამან შეიძლება გამოიწვიოს უფრო სწრაფი და პასუხისმგებელი ვებსაიტი, განსაკუთრებით საიტებისთვის, რომლებსაც აქვთ მრავალი პატარა სურათი, როგორიცაა ხატები და ღილაკები.

CSS sprites-ის გამოყენება ასევე საშუალებას გვაძლევს ვისარგებლოთ ბრაუზერის ქეშირებით. როდესაც მომხმარებელი ეწვევა ვებსაიტს, მისი ბრაუზერი პირველი მოთხოვნის შემდეგ ქეშირებს სპრაიტის სურათს. ეს ნიშნავს, რომ შემდგომი მოთხოვნა ცალკეულ ელემენტებზე ვებ გვერდზე, რომლებიც იყენებენ sprite სურათს, ბევრად უფრო სწრაფი იქნება, რადგან ბრაუზერს უკვე ექნება სურათი თავის ქეშში.

CSS Sprites არ არის ისეთი პოპულარული, როგორც ადრე იყო

CSS sprites კვლავ ხშირად გამოიყენება საიტის სიჩქარის გასაუმჯობესებლად, თუმცა ისინი შეიძლება არ იყვნენ ისეთი პოპულარული, როგორც ადრე იყო. მაღალი გამტარობის გამო, webp ფორმატები, გამოსახულების შეკუმშვა, შინაარსის მიწოდების ქსელები (CDN), ზარმაცი დატვირთვადა ძლიერი ქეშირება ტექნოლოგიები, ჩვენ ვერ ვხედავთ იმდენ CSS სპრაიტს, როგორც ადრე ვებში... თუმცა ეს მაინც შესანიშნავი სტრატეგიაა. ეს განსაკუთრებით სასარგებლოა, თუ თქვენ გაქვთ გვერდი, რომელიც მიუთითებს უამრავ პატარა სურათზე.

CSS Sprite მაგალითი

CSS sprites-ის გამოსაყენებლად, ჩვენ უნდა განვსაზღვროთ თითოეული სურათის პოზიცია სპრაიტის გამოსახულების ფაილში CSS-ის გამოყენებით. ეს ჩვეულებრივ კეთდება დაყენებით background-image მდე background-position თვისებები ვებ გვერდის თითოეული ელემენტისთვის, რომელიც იყენებს sprite სურათს. Sprite-ში გამოსახულების x და y კოორდინატების მითითებით, ჩვენ შეგვიძლია ცალკეული სურათების ცალკე ელემენტების სახით ჩვენება გვერდზე. აქ არის მაგალითი… ჩვენ გვაქვს ორი ღილაკი ერთი სურათის ფაილში:

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 Sprites მსუბუქი და ბნელი რეჟიმისთვის

ამის ერთ-ერთი საინტერესო გამოყენებაა მსუბუქი და ბნელი რეჟიმები. შესაძლოა თქვენ გაქვთ ლოგო ან სურათი, რომელსაც აქვს მუქი ტექსტი, რომელიც არ ჩანს მუქ ფონზე. მე გავაკეთე ღილაკის ეს მაგალითი, რომელსაც აქვს თეთრი ცენტრი სინათლის რეჟიმისთვის და მუქი ცენტრი მუქი რეჟიმისთვის.

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 თვისებების მხარდაჭერა, რომლებიც ჩვეულებრივ გამოიყენება CSS sprites-ში, მაგ. background-position. ამან შეიძლება გაართულოს ცალკეული სურათების განლაგება sprite გამოსახულების ფაილში.

Douglas Karr

Douglas Karr არის CMO of OpenINSIGHTS და დამფუძნებელი Martech Zone. დუგლასი დაეხმარა ათეულობით წარმატებულ MarTech სტარტაპს, დაეხმარა 5 მილიარდ დოლარზე მეტის შეძენისა და ინვესტიციების გამომუშავებაში და აგრძელებს კომპანიებს მათი გაყიდვებისა და მარკეტინგული სტრატეგიების განხორციელებაში და ავტომატიზაციაში. დუგლასი არის საერთაშორისოდ აღიარებული ციფრული ტრანსფორმაციის და MarTech ექსპერტი და სპიკერი. დუგლასი ასევე არის Dummie's-ის სახელმძღვანელოს და ბიზნეს ლიდერობის წიგნის გამოქვეყნებული ავტორი.

დაკავშირებული სტატიები

დაბრუნება ღილაკზე
დახურვა

Adblock აღმოჩენილია

Martech Zone შეუძლია მოგაწოდოთ ეს კონტენტი უფასოდ, რადგან ჩვენ ვაკეთებთ ჩვენი საიტის მონეტიზაციას რეკლამის შემოსავლების, შვილობილი ბმულების და სპონსორების მეშვეობით. ჩვენ მადლობელი ვიქნებით, თუ ჩვენს საიტს ნახულობთ თქვენს რეკლამის ბლოკერს.