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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Игра се харесва на векторна графика, тъй като комбинацията от SVG-спрайтове + CSS-правила не само търсенето, но често става обект на разработчика (на обекта), за да бъде предмет на реална игра. По-специално, популярната игра Открий разликите се отнася за термините на спрет, спрейове са съвсем смислени синоними: експлозия, кръв, зрение ...

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

CSS sprites: пример

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

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

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

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

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

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

В същото време графичният компонент е сериозна пречка за използването на спрайтове.

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

Въпреки факта, че термините "Интернет технологии" и "високи технологии", се счита за синоним, в действителност, това отнема време, а понякога и много ниско-тек работа. Sprites не са особено облечени в сравнение с други затруднения в чист програмиране в jаvascript или PHP, както и в разработването на необходимата функционалност, процеси на пълнене сайтове или информация, като на фона на архивни копия създаде настройка.

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

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