CSS-спрайты: негізгі әдістерін сипаттамасы және пайдалы кеңестер

Жылдам, жақсы және тиімді де даму сатысында, және қашан клиентпен жұмыс Заманауи сайты. Әдетте, онлайн ресурстарды жасайды әрбір компания, оның дизайны, стиль, сенімділік, жылдамдық және басқа да атрибуттары бар келушілерді тарту үшін, өз бетін бар ұмтылады.

спрайта Пайдалы қасиеттері

CSS-спрайты сайтында және компанияның имиджін сапалық сипаттамаларын жақсартуға болады. оның негізінде, ол тым күрделі даму құралы емес, бірақ шын мәнінде бұл процесс және ресурстарды игеру жылдамдатады, және олардың жұмыс жылдамдығы.

Бұлардан басқа, ол кодты жеңілдетеді және, белгілі бір мағынада, ол байланысты сіз, стилі дизайн элементтері диалогты бірдей графикалық идеялар пайдалана аласыз, себебі пайдаланылатын CSS-спрайты, жақын туыстары ретінде ұқсас, бұл шын мәнінде, бұл басқа ресурстарға тасымалданатын болып табылады, тегтің құрылымы мен мазмұны.

суреттер көп жасауға сайттың даму қалыпты барысында. Өте жиі, бұл суреттер өте аз орын алады, бірақ әрқашан бөлек файл болып табылады. кез келген серверге кез келген операциялық жүйе үшін файлды ашу - бұл операция, ұзаққа созылатын, алайда, файл 13 13 пиксель ашылды, және файл 52 пиксель арқылы 16 суреттер 52 ашылған кезде уақыт қатысты айтарлықтай айырмашылығы жоқ болады. Бірінші жағдайда, сіз екінші жағдайда 16 суреттер тек бір файл ашу нәтижесінде алынған болады, 16 файлдар мен 16 ашық / операцияларды оқып.

Сіз тақырып бойынша файлдар жинағын жасау Егер (көлденең мәзір, мұндай суреттер икемді біріктірілуі мүмкін екенін диалог нысандары, калькулятор түймелер күнтізбелік дизайн элементтері ...) сайтынан сайт көшті.

Кемшілігі

жанкүйерлер болған кезде, пайдалану ұсынылады тым Frisky CSS спрайты міндетті мұқият мәселені зерделеу және анық, бұл старомодный жолын жұмыс істеуге әрқашан практикалық екенін көрсетеді кім болып табылады.

16 суреттер бір файл бар болса Шынында да, орнына 16 ашық / операциялар орнына 16 сурет файлдарының бірі болады оқыңыз. Бірақ трюк әрбір шолғыш кэшін бар, және ол тек соңғы шара ретінде бір нәрсе жүктер болып табылады. Сонымен қатар, әдетте беттің элементтері сіз бірінші бетке келдініз жүктелген, және содан кейін ғана өзгерді қотарылады.

Тағы бір аспектісі. Әдетте, сурет бір файлға желімделген емес, кесіледі. Қалай болғанда да бұл технологиясын, ол айтуға жақсы, әдетке әзірледі. орналасуының жіңішке туралған дана: дизайнер макетін және орналасу оның бөліктерін пайдаланады жасайды. , Тұтыну қызметінің жалпы беттің дизайны арттырады - Қарсыластың спрайты бір файл бірнеше суреттерді жинау деп санайды.

сену және HTTP-сұраулардың санын оңтайландыру сол әзірлеушілер осы кәсіп CSS-спрайтов артық прагматикалық деп есептеп, бар.

көрсетілген барлық рет сөзсіз маңызды, бірақ әлдеқайда маңызды көрінісі болып табылады: ол ақылға қонымды шекте қолданылуы тиіс.

Автоматтандыру және CSS-Спрайты

ол CSS спрайты генераторды іске қосу және дизайн оң бөлігін алуға ешқандай мағынасы болса, онда ештеңе жай қалыпты жолмен осы бөлігін құрайды болдырмайды. кәдімгі технологиясы жүздеген суреттерді кесіп қажет етеді, онда ол қажеттілігіне спрайта қажетті аймағынан таңдаңыз және оны көрсетеді JavaScript-функциясын, суретін салыңдар қолайлы болып табылады.

Ол бұл екі немесе үш элементтен Sprite, немесе ондаған басқа, алайда, айта кету керек - барлық оң, бірақ суреттер Sprite жүздеген, жазбаша JavaScript-функциясы мәселелерімен кейбір, әрине, орын алмайды, бірақ қанша жұмыс ол құруға өтеді осындай үлкен Сонымен қатар Sprite ..., желім суреттер - бұл бір CSS Sprite генераторы және ол үшін қажетті суретті, және CSS-кодты етеді, ол спрайта құрамдық элементтері қанша болады қамқорлық жоқ. сайт дизайны өзгеріс, жаңа элементтерін жоюды және қосымша туалатин кезде қиындықтар туындауы. спрайт дамыта отырып, сіз оны қалай пайдалану керектігі жөнінде емес деп ойлаймын керек, және ол содан кейін өзгертуге қалай.

спрайты пайдалану тақырыбы бойынша жәрдемақы

CSS бағдарламалау тілдерінде айырмашылығы, бұл оның барлық динамикасы ережелер мен олардың функционалдық мазмұны (стандартты) анықталады ережелерін салыстырмалы статикалық жиынтығы болып табылады. кешенінде спрайтов, ескере HTML, CSS кітапхана тақырыптық-функционалдық дизайнын жасауға болады.

Мысалы мәзір, дайын нұсқасы: жай бірнеше CSS-ережелер, JS-функцияларды қосуға және HTML-ДИВСа коды санын қамтиды, сіз нәтиже алуға болады. спрайта имиджін мазмұнын өзгерту арқылы, сіз мәзір көрінісін өзгертуге болады. функция денесі көрсету, сіз функционалдық реттеуге болады.

өзіндік нұсқасын алу объектілі-бағытталған бағдарламалау (ООП) туралы. Әрине, бұл жарқын идея болар еді, бірақ ол нақты басқа ООП тілдерде, диалектілерде аясында ерекшелену үшін тым жарқын болмайды. Ол PLO жанданды және ерекше тез күн жылы орынға ие болды кезде, бұл белгілі бір идея және оның білдіру нақты нысаны болып табылады, бірақ түрлі ресейлік бар бар қазір әзірлеушілер сияқты көптеген диалектілер ойлап тапты, тек ерте «90-шы жылдардың табылады.

Ойыншықтар - спрайтов үшін үлкен жетістік

Толқу және бағдарламалау - үйлеспейтін ұғымдар, бірақ бағдарламалау дағдыларын, ойындар, жазу obschebytovoy (қарапайым шифрлау) және шығармашылық (жаңа технологияларды жобалау және әзірлеу, идеялар) айтарлықтай айырмашылығы бар.

векторлық графика ойын Дизайн апелляциялық, жиі SVG-спрайтов үйлесімі + CSS-ережелер ғана емес сұраныс, бірақ нақты ойын нысанға (сайттың) әзірлеуші объектісі болып, өйткені. Атап айтқанда, танымал ойын Counter Strike спрайты, спрейлер өте маңызды синонимдер шарттарына қолданылады: домна, қан, көріністердің ...

фраза The бастамашылық үшін «Sprite CSS v34 орнату» әбден қалыпты және түсінікті. Спрайты мәні ғана емес, Utility пайдалану табылған, сонымен қатар тұтынушылардың белгілі бір шеңбер түсіну үшін өте толық мүмкіндіктері болып табылады орнын, қолжетімді және оңай қалыптасады.

CSS-спрайты: Мысал

тораптағы беттерді қосу үшін, белгілі бір тілге арналған опцияларды түрлі пайдаланылады, бірақ тілдік селекторлық белгіше ретінде орындауға, егер спрайт пайдаланып шешім осы сияқты көрінуі мүмкін:

Айқын кемшіліктер спрайты

Біріншіден, ол уақыт жұмсауды және мұқият процесс болып табылады. Көптеген шағын суретін жинауға - ұсақ кішкентай кесектерге дизайн, және басқа да кесіп - Ол бір нәрсе болып табылады. кенеп идеясын жағыңыз және сайтында қолданылған суреттер барлық қойыңыз толығымен бос әурешілік.

Тіпті CSS спрайты генератордың көмегімен, қиындықтар ол сайт дизайнын өзгерту қажет, әсіресе, болдырмау мүмкін емес. Sprite суреттер бірнеше ондаған қосу - бұл элементтердің массив емес, графикалық сызбаларды бар, ол орнына бөлшекті оң табуға массив ретінде кодын сұрыптауға, әдетте тек экранында көрсетіледі.

Пайдаланылған саясат фон байланысты спрайтов ретінде, ол тек фондық сурет емес, сайт элементі болып табылады, бұл оның талап мынадай стандартты және әзірлеушілер. беттің графикалық құрамдас элементтері тег IMG айлалы керек.

Ол кезде жеткілікті фондық ортақ фон ретінде қабылданады деп қарапайым негіздер бойынша келісуге қиын. Ол ештеңеге қарамастан, тек фондық ғой - шағын элементі немесе бүкіл бет.

Сонымен қатар, графикалық құрамдас спрайтов пайдалану үшін елеулі кедергі ұсынылған.

парасатты пайдалану

терминдер «Интернет технологиясы» және «жоғары технологиялар» синоним болып саналады болғанына қарамастан, шын мәнінде, ол уақыт жұмсауды және кейде өте төмен технологиялы жұмыс болып табылады. Спрайты әсіресе мұрағаты көшірмелерін жасауға, мұндай фон ретінде сайттарды немесе ақпаратты толтыру процестерін орнату JavaScript немесе PHP таза бағдарламалау бойынша, сондай-ақ қажетті функционалдық дамуындағы өзге де тар, салыстырғанда киінген емес.

әдетте мазмұнды басқару жүйелерінде қолдану Қуат және болашағы оларды практикалық қолдану жиі теңестірді нюанстар, және қолмен ресурс дамыту, бір немесе басқа меншіктік алгоритм жазып 1001st рет қажеттігіне әкеледі.

Бұл тұрғыда, ол қазіргі заманғы құралы қамтамасыз барлық пайдалану үшін жай ғана ақылға қонымды маңызды болып табылады. басқа үстінен бірін пайдалануға тым ынтық болуы, сондай-ақ мыналар сайт ғимаратында алтын ереже делінген емес пе: сіз кез келген күтпеген жағдайға жағдайда тез шешілуі мүмкін, сондықтан мүмкіндігінше тезірек жұмыс өтуге қалай туралы емес деп ойлаймын, ал оны орындау қалай қажет кез келген проблема.