Как да внедрим CSS спрайтове за подобряване на уеб страниците



Тази статия ще ви предостави подробни и изчерпателни познания за CSS SPrites и как може да се използва за изглаждане на уебсайтовете.

Концепцията за спрайтове съществува от известно време. Това е една от най-често използваните техники в игралната индустрия за ускоряване на процеса на показване на анимации на екран. В тази статия ще разгледаме по-специално как тази техника може да ни помогне да подобрим потребителското изживяване на уеб страници с помощта на CSS Sprites в следния ред:

Какво е спрайт?

Спрайтът е единично изображение, което е част от по-голяма сцена в игра. След това множество спрайтове се комбинират в голямо изображение, наречено спрайт лист. След като спрайт лист се зареди в паметта, различни спрайтове се визуализират бързо, за да се създаде илюзия за анимация. Това се прави едновременно за десетки до стотици различни спрайтове, за да се генерира сцена в играта.





CSS спрайтове

Основната идея е, че е много по-бързо да заредите изображение и да покажете част от него, където е необходимо, в сравнение с зареждането на множество изображения и да ги покажете.



Какво е CSS Sprite: Бърз преглед?

CSS спрайтът е техника, която често се използва от уеб разработчиците за оптимизиране на работата на уеб страниците. При тази техника множество по-малки изображения, обикновено с еднакви размери, се комбинират в едно голямо изображение, наречено a спрайт лист или комплект плочки . След това този спрайт лист се използва за показване на отделни елементи навсякъде, където имаме нужда от тях.

java как да изляза от програмата -

Обикновено елементи като лога, стрелки за навигация, бутони са включени в спрайт листа, тъй като те са почти с еднакви размери и често се използват в уеб страница.

Пример за това как помага при уеб разработката?

Като цяло, при проектирането на уеб страници изображенията се съхраняват и използват като отделни файлове. Така че, когато потребителят отвори уеб страница, браузърът трябва да направи HTTP заявка за всеки от тези файлове, да ги изтегли отделно и да ги покаже. Това води до по-голямо време за зареждане на страницата, тъй като определена уеб страница може да има голям брой по-малки изображения като бутони, икони, лога.



CSS спрайтове помагат на разработчиците да комбинират тези често използвани малки изображения в едно голямо изображение. След това браузърът трябва да изтегли само един файл, който след това се използвапокажете необходимия раздел, като изместите изображението.

Предимства на използването на CSS спрайтове

Има две основни предимства на използването на CSS спрайтове пред нормалните изображения:

  • По-бързо зареждане на страницата: Подобрява времето за зареждане на страницата, тъй като изображенията, използвани в уеб страницата, се появяват веднага след изтеглянето на листа.

  • По-голяма производителност и по-малко използване на ресурси: Не само тази техника подобрява изживяването на крайния потребител, като ускорява зареждането на страницата,но също така намалява задръстванията в мрежата, тъй като се правят по-малък брой HTTP заявки.

Какво трябва да направи разработчикът, когато работи с CSS Sprites?

Когато работи с отделни изображения, разработчикът може просто да работи с HTML таг и го оформете в CSS, ако е необходимо. Но когато работи с CSS Sprites, разработчикът трябва да направи две конкретни неща:

  • Създаване на спрайт лист

Докато разработва уеб страница, ако разработчикът реши да използва CSS спрайтове, той / тя трябва първо да създаде спрайтовия лист, като обедини всички желани елементи като бутони, лога и т.н. в решетъчен модел. Това може да се направи с помощта на всяка програма за редактиране на изображения като Photoshop или Gimp. Налични са и много онлайн инструменти, които ви помагат да направите спрайт листа. Тези инструменти са разгледани по-нататък в тази статия.

  • Достъп до определен елемент от спрайта с помощта на CSS фонова позиция Имот

След като спрайт листът е готов, разработчикът трябва да използва CSS атрибути за достъп до различни части на листа.

  • ширина: Ширина на спрайта
  • височина: Височина на спрайта
  • заден план: Позоваване на спрайт листа
  • Позиция на заден план: Стойности на отместването (в пиксели) за достъп само до необходимата част от спрайт листа

Как да създам CSS спрайт лист?

Можете да използвате всеки софтуер за редактиране на изображения, за да подредите по-малките си изображения в мрежа, но два по-лесни метода са разгледани по-долу:

1. Инструмент за онлайн създаване на спрайт листове

ВРЪЗКА: toptal.com/developers/css/sprite-generator/

Този инструмент е не само безплатен за използване, но също така ви предоставя необходимия CSS код, който може да се използва, докато се позовава на спрайт листа. Също така, можете да бъркате с различни свойства като подплата между елементите и промяна на тяхното подравняване.

2. Генериране на спрайт лист с Sprity

Ако използвате Grunt, Node или Gulp, можете да инсталирате пакет, наречен Sprity, който ще ви помогне да създадете спрайт лист в различни формати като PNG, JPG и др.

Първо, ще трябва да инсталирате Sprity, като използвате:

npm инсталирайте sprity -g

След това, за да генерирате спрайт лист, използвайте следната команда:

sprity ./output-directory/ ./input-directory/*.png

Как да работя с CSS спрайтове?

В този пример ще използваме следния спрайт лист:

Както можете да видите на горното изображение, шест икони (Instagram, Twitter и Facebook) са подредени в решетка. На първия ред имаме нормално състояние, а на втория ред имаме тяхното състояние на задържане (изображението, което се появява, след като задържим курсора на мишката върху тях).

Ако сте направили спрайт листа с помощта на инструментите, които обсъдихме по-горе, тогава вече знаете отклоненията, необходими в CSS, но ако сте използвали друг инструмент или просто сте получили някакъв спрайт лист, тогава не се притеснявайте, ще обсъдим метод, който ще ви помогне да получите компенсации за необходимия елемент.

Нека сега видим много лесен начин за получаване на необходимите компенсации за всяка от шестте икони с помощта на MS Paint. Може да не е идеалното решение за работа със спрайтове, но тъй като има функцията, която осигурява координатите на курсора на мишката, може да се използва за получаване на необходимите координати X и Y.

Първо отворете изображението на спрайт листа (решетка, съдържащо всички по-малки изображения) и поставете курсора на мишката в горния ляв ъгъл на спрайта, който искате да вземете.

След като имате координатите на горната лява точка на вашия спрайт (горе вляво изображение на Instagram), можете да покажете този специфичен спрайт, където се изисква, като използвате CSS кода:

фон: url ('img_sprites.png')
фон-позиция: 0 0
ширина: 125px
височина: 125px

Използваме ширина и височина като 125 пиксела, тъй като нашите икони са с това измерение. За да извлечем следващото изображение (Twitter) в същия ред, използваме следния код:

фон: url ('img_sprites.png')
фонова позиция: -128px 0px
ширина: 125px
височина: 125px

Обърнете внимание на атрибута background-position в горния фрагмент. (-128px, 0) означава, че компенсираме нашия спрайт лист отляво със 128 пиксела (като се вземе предвид подложката между елементите) и 0 пиксела по оста Y. Ако трябва да осъществим достъп до иконата на курсора на Twitter, тогава атрибутът ни за фоново положение ще бъде:

фонова позиция: -128px -128px

По този начин вече можем да получим достъп до всеки компонент на нашия спрайт лист с помощта на CSS. Нека да разгледаме пълен HTML и CSS код за това как да го направим.

Етап 1: Писане на необходимия HTML код

В кода по-долу просто добавяме три връзки. Също така ще свържем нашия HTML с таблицата със стилове (screen.css).

клас='икона на instagram'> href=„#“>Instagram

клас=„икона на Twitter“> href=„#“>Twitter

клас=„икона на facebook“> href=„#“>Facebook

Стъпка 2: Написване на необходимия CSS. Първо ще оформим нашия споделен клас на икони. Тук можете да видите, че се позоваваме на спрайт листа, който създадохме.

/ * Споделена икона Клас * /

span.icon a: връзка,

span.icon a: посетен{

дисплей:блок

текст-отстъп:-9999px

фоново изображение: url (./ img_sprites.png)

фон-повторение:без повторение

}

Стъпка 3: Получаване на отделните икони от спрайт листа с помощта на отместванията.

/ * Икона на Instagram * /

span.instagram a: връзка,

span.instagram a: посетен{

ширина:125px

височина:125px

фон-позиция:0 0

}

/ * Икона на Twitter * /

span.twitter a: връзка,

span.twitter a: посетен{

ширина:125px

височина:125px

фон-позиция:-128px 0

}

/ * Икона на Facebook * /

span.facebook a: връзка,

span.facebook a: посетен{

ширина:125px

височина:125px

фон-позиция:-257px 0

претоварване на функцията в c ++

}

Стъпка 4: Извличане на иконите на задържане от спрайта с помощта на отместванията.

span.instagram a: задръжте курсора на мишката{фон-позиция:0 -128px}

span.twitter a: задръжте курсора на мишката{фон-позиция:-128px -128px}

span.facebook a: задръжте курсора на мишката{фон-позиция:-255px -128px}

Компании, използващи CSS спрайтове

Много големи имена в бранша използват CSS Sprites, за да подобрят отзивчивостта на своите уебсайтове. Компании като Google, Facebook, Amazon широко използват този метод, тъй като това им помага да намалят броя на HTTP заявките на сесия за определен потребител. Това е огромна полза, ако вземем предвид, че тези компании обслужват милиони клиенти във всеки един момент.

Сега, когато сте наясно какво представляват CSS спрайтовете и как да работите с тях, вие сте една стъпка по-близо до вашето пътуване, за да научите CSS. Концепции като спрайтове променят играта в днешно време, тъй като е станало изключително важно за разработчиците да извлекат всяка част от производителността от уеб страница.

Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „HTML Images“ и ние ще се свържем с вас.