CSS sprites: описание, основни техники и полезни препоръки

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

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

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

Между другото, кодът е опростен и в известен смисъл става преносим към други ресурси, които благодарение на използването на CSS sprites стават подобни на близки роднини, защото можете да използвате едни и същи графични идеи, Структура и съдържание на маркерите.

В обичайния процес на разработване на уеб сайт, трябва да направите много снимки. Много често тези снимки заемат много малко място, но винаги са отделни файлове. За всяка операционна система на който и да е сървър, отварянето на файл е отнемаща време, но няма да се различава съществено във времето, когато файлът се отваря от 13 до 13 пиксела, а когато се отвори файл от 16 снимки 52 с 52 пиксела. В първия случай трябва да имате 16 файла и 16 операции за отваряне / четене, във втория случай, 16 снимки ще се получат, като се отвори само един файл.

Ако създавате множества от такива файлове по теми (хоризонтални менюта, диалогови форми, бутони на калкулатора, елементи от календара ...), тогава тези изображения могат да бъдат прехвърлени от сайта на сайта.

На обратната страна на монетата

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

Наистина, ако вместо 16 файла с изображения има един файл с 16 изображения, вместо 16 операции за отваряне / четене ще има един. Но номерът е, че всеки браузър има кеш, който зарежда нещо само в краен случай. В допълнение, обикновено елементите на страницата се зареждат при първото посещение на страницата и по-късно се зареждат само променените.

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

Има и разработчици, които разглеждат и оптимизират броя HTTP заявки, вярвайки, че тази дейност е по-прагматична от CSS sprites.

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

Автоматизация и CSS sprites

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

Трябва да се отбележи обаче, че един шрифт от два или три елемента или дузина или две не отива никъде, но когато има стотици рисунки в шпита, със сигурност няма да има проблеми при писането на функцията на JavaScript, но колко усилия ще Такъв голям шпиц ... Освен това, за лепило на снимките е едно нещо, генераторът на спрайт CSS прави както желаното изображение, така и CSS-кода за него, няма значение за него колко елементи от спрата ще бъдат. Проблеми възникват, когато редизайн на сайта, промяна на дизайна, изтриване и добавяне на нови елементи. Когато развивате спрайт, не трябва да мислите как да го използвате, а как да го промените по-късно.

Тематични ползи от използването на спрайтове

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

Например завършената версия на менюто: просто чрез свързване на няколко css-правила, js-функции и включващи няколко HTML-divs в кода, можете да получите резултата. Променяйки съдържанието на шрифта за картини, можете да промените външния вид на това меню. Чрез задаване на функционалното тяло можете да настроите функционалните.

Оказва се, че е характерна версия на обектно-ориентираното програмиране (ООП). Несъмнено това ще бъде ярка идея, но няма да изпъкне прекалено ярка на фона на други OOP диалекти на реални езици. Едва в началото на 90-те години, когато ООП се съживи и започна да придобива необичайно бързо място на слънце, то представляваше конкретна идея и конкретна форма на своето изражение, а днес разработчиците измислиха толкова диалекти, колкото не е различен руски език.

Играчки - златна мина за спрети

Възбудата и програмирането са несъвместими понятия, но квалификацията на програмните игри за писане се различава значително от обикновеното (просто кодиране) и творческото (проектиране и разработване на нови технологии, идеи).

Дизайнът на играта привлича векторни графики, защото комбинацията от правила на SVG Sprite + CSS не само е в търсенето, но и често се превръща от обект на разработчик (обект) в обект на истинска игра. По-специално, популярната игра Counter Strike се отнася за термините на спрет, спрейове са съвсем смислени синоними: експлозия, кръв, зрение ...

Фразата "инсталирайте sprites css v34" за инициаторът е съвсем нормална и разбираема. Sprites придобиват не само полезност в приложението по своята същност, но и формират ниша, която става напълно функционална, достъпна и разбираема за определен кръг потребители.

CSS sprites: пример

За да превключвате страници на даден сайт на определен език, се използва голямо разнообразие от опции, но ако изборът на език се изпълнява под формата на икона, решението, използващо спрайт, може да изглежда така:

Очевидни недостатъци на спратите

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

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

Стандартните и следващите разработчици твърдят, че тъй като спраттите са свързани с фон, това е изключително фоново изображение, а не елемент от сайта. Графичният компонент на елементите на страницата трябва да манипулира маркерите img.

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

Междувременно графичният компонент е сериозна пречка за използването на спрайтове.

Разумна употреба

Независимо от факта, че термините "интернет технологии" и "високи технологии" се считат за синоними, всъщност това е трудоемка и на някои места много нетехнологична работа. Sprites не се отличават особено от други затруднения, като например чисто програмиране в JavaScript или PHP, или от гледна точка на разработване на необходимата функционалност, конфигуриране на процесите на попълване на сайтове с информация или например създаване на фонови копия на архиви.

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

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