CSS-спрайты: апісанне, асноўныя тэхнікі і карысныя рэкамендацыі

Сучасны сайт павінен быць хуткім, прыгожым і эфектыўным як на этапе распрацоўкі, так і пры працы з кліентам. Як правіла, кожная кампанія, якая стварае інтэрнэт-рэсурсы, імкнецца мець уласны твар, прыцягваць наведвальнікаў сваім дызайнам, стылем, надзейнасцю, хуткасцю і іншымі якасцямі.

Карысныя ўласцівасці спрайтов

CSS-спрайты дазваляюць палепшыць як якасныя характарыстыкі сайта, так і імідж кампаніі. Па сутнасці сваёй, гэта не занадта складаны інструмент распрацоўніка, але ён рэальна паскарае і працэс распрацоўкі рэсурсаў, і хуткасць іх працы.

Акрамя ўсяго іншага, спрашчаецца код і, у пэўным сэнсе, становіцца пераносным на іншыя рэсурсы, якія, дзякуючы таму, што прымяняюцца CSS-спрайты, становяцца падобнымі як блізкія сваякі, паколькі можна выкарыстоўваць адны і тыя ж графічныя ідэі, стыль афармлення элементаў дыялогу, структуру і змест тэгаў.

У звычайным працэсе распрацоўкі сайта неабходна рабіць шмат малюнкаў. Вельмі часта гэтыя карцінкі займаюць вельмі мала месца, але ўяўляюць сабой заўсёды асобны файл. Для любой аперацыйнай сістэмы любога сервера адкрыццё файла - гэта аперацыя, адымае шмат часу, аднак не будзе істотна адрознівацца па часе, калі адкрываецца файл на 13 на 13 пікселяў, і калі адкрываецца файл з 16 малюнкаў 52 на 52 пікселя. У першым выпадку неабходна мець 16 файлаў і 16 аперацый адкрыцця / чытанні, у другім выпадку 16 малюнкаў будуць атрыманы ў выніку адкрыцця толькі аднаго файла.

Калі стварыць наборы такіх файлаў па тэматыцы (гарызантальнае меню, формы дыялогу, кнопкі калькулятара, элементы афармлення календара ...) то такія сукупнасці малюнкаў можна будзе мабільна пераносіць з сайта на сайт.

Адваротны бок медаля

Калі ёсць фанаты, занадта жвава якiя рэкамендуюць выкарыстоўваць спрайты CSS, абавязкова знаходзяцца тыя, хто ўважліва вывучае пытанне і даходліва паказвае, што заўсёды больш практычным працаваць па-старому.

Сапраўды, калі замест 16 файлаў малюнкаў будзе адзін файл з 16 малюнкаў, то замест 16 аперацый адкрыцця / чытанні будзе адна. Але фокус у тым, што ў усякага браўзэра ёсць кэш, і ён загружае што-небудзь толькі ў крайнім выпадку. Акрамя таго, звычайна элементы старонак загружаюцца пры першым наведванні старонкі, а пасля падгружаюцца толькі змененыя.

Іншы аспект. Звычайна карцінкі рэжуць, а не склейваюць ў адзін файл. Как-то так склалася тэхналогія а, лепш сказаць, звычай. Дызайнер стварае макет, а вёрстка выкарыстоўвае яго кавалачкі: дробна нарэзаныя часткі макета. Праціўнікі спрайтов мяркуюць, што збіранне некалькіх малюнкаў у адзін файл - працаёмкае занятак, якое павялічвае агульны час распрацоўкі старонкі.

Ёсць і такія распрацоўшчыкі, якія лічаць і аптымізуюць колькасць HTTP-запытаў, мяркуючы што гэты занятак больш прагматычна, чым CSS-спрайты.

Усе пазначаныя моманты, несумненна, маюць значэнне, аднак значна большае значэнне ўяўляе сабой меркаванне: усё павінна быць ужыта ў разумных межах.

Аўтаматызацыя і CSS-спрайты

Калі няма сэнсу запусціць генератар спрайтов CSS і атрымаць патрэбную частку дызайну, то нішто не перашкаджае проста нагнаць гэтую частку звычайнай выявай. Калі звычайная тэхналогія прыводзіць да неабходнасці нарэзкі сотні малюнкаў, то пераважней накідаць JavaScript-функцыю, якая па неабходнасці будзе выбіраць з спрайт патрэбную вобласць і адлюстроўваць яе.

Варта, аднак, заўважыць, што спрайт з двух-трох элементаў або дзясятка-іншага - куды ні ішло, а вось калі ў спрайт сотня малюнкаў, то з напісаннем JavaScript-функцыі праблем, вядома, не ўзнікне, але вось колькі працы сыдзе на стварэнне такога вялікага спрайт ... Акрамя таго, склейваць карцінкі - гэта адно, генератар спрайтов CSS робіць і патрэбную карцінку, і CSS-код пад яе, яму абсалютна ўсё роўна колькі будзе складнікаў элементаў спрайт. Праблемы паўстануць пры пераробцы сайта, змене дызайну, выдаленні і даданні новых элементаў. Распрацоўваючы спрайт, варта падумаць не пра тое, як яго выкарыстоўваць, а пра тое, як яго потым змяніць.

Тэматычная выгада ад выкарыстання спрайтов

У адрозненне ад моў праграмавання CSS, гэта адносна статычны набор правілаў, уся яго дынаміка вызначаецца правіламі і іх функцыянальным напаўненнем (па стандарце). Разглядаючы ў комплексе спрайты, HTML, CSS можна стварыць тэматычныя бібліятэкі дызайну-функцыяналу.

Напрыклад, скончаны варыянт меню: проста падлучыўшы некалькі css-правілаў, js-функцый і уключыўшы ў код некалькі HTML-дивов, можна атрымаць вынік. Змяніўшы ўтрыманне карцінкі спрайт, можна змяніць выгляд гэтага меню. Удакладніўшы цела функцыі, можна скарэктаваць функцыянал.

Атрымаецца своеасаблівы варыянт аб'ектна-арыентаванага праграмавання (ААП). Несумненна, гэта будзе яркай ідэяй, але яна не будзе занадта ярка вылучацца на фоне іншых дыялектаў ААП на рэальных мовах. Гэта толькі на пачатку 90-х, калі ООП адрадзілася і стала незвычайна хутка заваёўваць месца пад сонцам, яно ўяўляла сабой канкрэтную ідэю і канкрэтную форму яе выразы, а сёння распрацоўшчыкі прыдумалі столькі дыялектаў, колькі не мае шматстайны рускую мову.

Цацкі - залатое дно для спрайтов

Азарт і праграмаванне - несумяшчальныя паняцці, але кваліфікацыя праграміста, які піша гульні, прыкметна адрозніваецца ад общебытовой (простае кадаваньне) і творчай (праектаванне і распрацоўка новых тэхналогій, ідэй).

Дызайн гульняў апелюе да вектарнай графіцы, таму спалучэнне SVG-спрайты + CSS-правілы не толькі запатрабавана, але і часта ператвараецца з аб'екта распрацоўніка (сайта) у аб'ект рэальнай гульні. У прыватнасці, папулярная гульня Counter Strike прымяняе да тэрмінаў спрайты, спрэі цалкам асэнсаваныя сінонімы: выбух, кроў, прыцэл ...

Фраза "усталяваць спрайты css v34" для прысвечанага цалкам нармальна і зразумелая. Спрайты здабылі не толькі карыснасць ва ўжыванні па сваёй сутнасці, але і ўтварылі нішу, якая стала цалкам поўнафункцыянальнай, даступнай і зразумелай пэўнаму колу спажыўцоў.

CSS-спрайты: прыклад

Для пераключэння старонак сайта на той ці іншы мова прымяняюцца самыя разнастайныя варыянты, але калі селектар мовы выканаць у выглядзе абразкі, то рашэнне, якое выкарыстоўвае спрайт, можа выглядаць так:

Відавочныя недахопы спрайтов

Перш за ўсё, гэта працаёмкі і скрупулёзны працэс. Адна справа - разрэзаць дызайн на дробныя кавалачкі, іншае - сабраць адну карцінку з мноства дробных. Прымяніць ідэю палатна і змясціць на яго ўсе выявы, якія выкарыстоўваюцца на сайце, зусім бесперспектыўна.

Нават выкарыстоўваючы генератар спрайтов CSS, цяжкасцяў не пазбегнуць, асабліва калі прыйдзецца перарабляць дызайн сайта. Размясціць у спрайт некалькі дзясяткаў малюнкаў - гэта не масіў элементаў, графіка ёсць графіка, яе, як правіла, проста выводзяць на экран, а не перабіраюць у кодзе як масіў у пошуках патрэбнага элемента.

Стандарт і наступныя яму распрацоўшчыкі сцвярджаюць, што калі спрайты звязаныя з правілам background, то гэта выключна фонавы малюнак, а не элемент сайта. Графічная складнік элементаў старонкі павінна маніпуляваць тэгамі img.

З гэтым цяжка пагадзіцца на тым простым падставе, што background мала калі успрымаўся ў якасці агульнага фону. Гэта проста фон, няважна чаго - мініятурнага элемента або ўсёй старонкі ў цэлым.

Між тым, менавіта графічная складнік ўяўляецца сур'ёзнай перашкодай ва ўжыванні спрайтов.

разумнае выкарыстанне

Нягледзячы на тое што тэрміны "інтэрнэт-тэхналогіі" і "высокія тэхналогіі" прынята лічыць сінонімамі, на справе гэта працаёмкі і месцамі вельмі нетехнологичный праца. Спрайты ня асабліва вырабіў на фоне іншых вузкіх месцаў як у чыстым праграмаванні на JavaScript або PHP, так і ў частцы распрацоўкі неабходнага функцыяналу, налады працэсаў напаўнення сайтаў інфармацыяй ці, напрыклад, фонавага стварэння архіўных дзід.

Моц і перспектыўнасць выкарыстоўваюцца сістэм кіравання сайтамі нівеліруецца часам нюансамі іх практычнага прымянення, а ручная распрацоўка рэсурсаў, як правіла, прыводзіць да неабходнасці 1001-ы раз перапісваць той ці іншы уласны алгарытм.

У кантэксце сказанага важна проста ў разумных межах выкарыстоўваць усе, што дае сучасны інструмент. Не варта занадта заўзята ўжываць адно ў шкоду іншаму, а залатое правіла ў сайтостроении абвяшчае наступнае: трэба думаць не пра тое, як здаць працу як мага хутчэй, а пра тое, як яе выканаць так, каб у выпадку любы неспадзяванай сітуацыі можна было хутка вырашыць любую праблему.