CSS-sprites: əsas texnika və faydalı məsləhətləri təsviri

bir müştəri ilə iş zaman Müasir site inkişaf mərhələsində, həm də sürətli gözəl və səmərəli, və. Bir qayda olaraq, online qaynaqları yaradır hər şirkət öz üz üçün dizayn, üslub, etibarlılıq, sürət və digər atributları ilə ziyarətçiləri cəlb etməyə çalışır.

sprites faydalı xüsusiyyətləri

CSS-sprites keyfiyyətli site xüsusiyyətləri və şirkətin imicini həm inkişaf edə bilər. Əsas da, bu, çox inkişaf aracı mürəkkəb deyil, lakin bu, həqiqətən prosesi və resurs inkişafı və onların iş sürəti sürətləndirir.

Digər məsələlərlə yanaşı, bu kodu asanlaşdırır və müəyyən mənada, digər resursları portativ eyni qrafik fikir, stil dizayn elementləri dialoq istifadə edə bilərsiniz, çünki istifadə CSS-sprites, yaxın qohumları kimi oxşar olmasına görə ki, strukturu və tag məzmunu.

saytın inkişafı normal gedişində şəkillər bir çox etmək. Çox tez-tez, bu şəkillər çox az yer tutur, lakin həmişə bir ayrı fayl var. hər hansı bir server hər hansı bir əməliyyat sistemi bir fayl açmaq üçün - bu əməliyyatı fayl 16 şəkil 52 52 piksel açıldı zaman vaxt aparan, lakin bir fayl 13 13 piksel açıldı zaman zaman ilə əlaqədar əhəmiyyətli dərəcədə fərqlənir, və deyil. Birinci halda, 16 images yalnız bir fayl açılması nəticəsində əldə ediləcək ikinci halda 16 faylları və 16 açıq / oxumaq əməliyyatları var.

Siz mövzu faylları bir sıra yaratmaq (üfüqi menyu, dialoq formaları, kalkulyator düymələri təqvim dizayn elementləri ...) belə images çevik site site köçürülüb birləşdirilə bilər.

İşin mənfi tərəfi odur

CSS istifadə etmək tövsiyə çox oynaq azarkeşləri var zaman sprites mütləq diqqətlə məsələnin öyrənilməsi və aydın köhnə moda yol işləmək üçün həmişə praktik göstərir ki, olanlar var.

əvəzinə 16 açıq 16 şəkillər bir fayl var əgər Həqiqətən, / oxumaq əməliyyatları bir əvəzinə 16 şəkil faylları olacaq. Lakin oyun hər browser cache var ki, və yalnız son çarə olaraq bir şey yükler. Bundan əlavə, adətən səhifə elementləri ilk səhifəsini ziyarət zaman dolu, və sonra yalnız dəyişdi dolu.

Başqa bir aspekt. Tipik olaraq, image kəsilmiş, bir fayl üçün yapıştırılmış deyil. Elə ki, demək daha yaxşıdır, xüsusi bir texnologiya inkişaf etmişdir. dizayner layout yaradır və layout parçaları istifadə edir: layout gözəl dilimlənmiş parça. ümumi səhifə dizayn artırır aparan fəaliyyəti - Müxaliflər sprites bir fayl bir neçə images aldığınız inanıram.

iman və bu işğal CSS-sprites daha praqmatik ki, mö'min, HTTP-sorğuların sayı optimize o developers var.

göstərilən bütün dəfə şübhəsiz əhəmiyyətli, lakin çox daha əhəmiyyətli baxış edir: bu ağlabatan çərçivəsində tətbiq olunmalıdır.

Automation və CSS-sprites

Bu CSS sprites generator run və dizayn sağ hissəsi almaq üçün heç bir əhəmiyyət kəsb edir, onda heç bir şey sadəcə normal şəkildə bu hissəsi etmək qarşısını alır. şərti texnologiya images yüzlərlə kəsmək üçün zəruri edir, bu, sprite istədiyiniz sahəsi seçin və göstərilir zəruri JavaScript-funksiyası eskiz üstünlük verilir.

Lakin, qeyd etmək lazımdır ki, iki və ya üç elementləri və ya bir çox digər sprite - təsvirlər sprite yüzlərlə bütün hüququ, lakin, əlbəttə, baş deyil, JavaScript funksiyası problemləri yazılı, lakin bu yaradılması olacaq nə qədər iş bəzi belə böyük bir sprite ... Bundan əlavə, yapışqan şəkillər - bu bir CSS sprite generator və istədiyiniz image edir və bunun üçün CSS-kodu, o nə qədər qayğı etməyib olacaq sprite təsis elementləri. Site dizayn dəyişikliyi aradan qaldırılması və yeni elementlər əlavə remaking zaman problemlər yaranır. bir sprite inkişaf, siz onu istifadə və sonra dəyişmək necə haqqında heç düşünmək lazımdır.

sprites istifadə Mövzu fayda

CSS proqramlaşdırma dilləri fərqli olaraq, bu bütün dinamikası qaydaları və onların funksional məzmunu (standart) tərəfindən müəyyən edilir qaydaları nisbətən statik müəyyən edilir. kompleksi ilə sprites nəzərə alaraq HTML, CSS kitabxana bir temalı-funksional dizayn yarada bilərsiniz.

Məsələn, menyu hazır versiyası: sadəcə css-qaydaları, js-funksiyaları çox əlaqə və HTML-divs kod sayı daxildir, siz nəticə əldə edə bilərsiniz. sprite image məzmun dəyişir, siz menyu görünüşünü dəyişdirə bilərsiniz. funksiyası orqanı ifadə, siz funksionallığı bilərsiniz.

özünəməxsus variant almaq obyekt-yönümlü proqramlaşdırma (OOP) edir. Əlbəttə, bu, bir parlaq fikir olardı, lakin digər OOP Dil fonunda həyata durmaq üçün çox parlaq deyil, real dialekt. FAT bərpa və qeyri-adi sürətlə günəş bir yer əldə oldu zaman, yalnız erkən 90-cı ildə, o, müəyyən bir fikir və ifadə konkret forması, lakin müxtəlif Rusiya orada var indi developers bir çox dialekt ilə gəlmişəm edir.

Oyuncaqlar - sprites üçün Bonanza

Həyəcan və proqramlaşdırma - bir araya sığmayan anlayışlar, lakin proqramlaşdırma bacarıqları, oyunlar yazı obschebytovoy (sadə şifrələmə) və yaradıcı (dizayn və yeni texnologiyaların inkişafı, fikir) fərqlənir.

vektor qrafik Game Design müraciətlər, SVG-sprites + CSS-qaydaları tez-tez yalnız tələb, lakin birləşməsi bir real oyun obyektinə (saytın) geliştirici obyekt olur, çünki. Xüsusilə, məşhur oyun Counter Strike sprites şərtlərinə tətbiq spreyi olduqca mənalı Sinonimlər: partlayış, qan, göz ...

the olduqca normal və başa düşüləndir başlamaq üçün söz "sprite css v34 müəyyən". Sprites əslində, kommunal istifadə yalnız aşkar, həm də istehlakçıların müəyyən dairə anlamaq üçün kifayət qədər tam özellikli əlverişli və asan bir yer, formalaşır.

CSS-sprites Misal:

saytda pages keçid xüsusi dil üçün variantları istifadə olunur, lakin dil dəyişdiricinin bir icon kimi yerinə yetirmək üçün, bir sprite istifadə həlli bu kimi baxmaq bilər:

Obvious çatışmazlıqlar sprites

İlk növbədə, bu, vaxt aparan və vasvası prosesdir. çox kiçik bir şəkil toplamaq - kiçik parçalara dizayn və digər kəsmək - Bu bir şey deyil. Saytda istifadə images bütün kətan ideyası müraciət və qoyun tamamilə faydasız edir.

Hətta CSS sprites Generator istifadə edərək, çətinliklər bu site dizayn dəyişdirmək lazımdır xüsusilə, yol bilməz. sprite şəkillər bir neçə on əlavə et - bu elementlərin bir sıra deyil, qrafik adətən yalnız əvəzinə sağ maddə tapmaq üçün bir sıra kimi kodunu çeşidlənməsi, ekranda göstərilir, qrafik var.

Standard və developers sprites istifadə bir siyasət fon ilə bağlı olaraq, yalnız bir background image və site element ki, onun iddia etdi. Bir səhifə Graphic komponent elementləri tag img manipulyasiya olmalıdır.

Bu kifayət qədər background ümumi fon kimi qəbul edildiyi sadə səbəbiylə razı çətindir. miniatür element və ya bütün səhifə - Bu nə olursa olsun, yalnız fon var.

Eyni zamanda, qrafik komponent sprites istifadə üçün ciddi maneə təmsil edib.

başbilən istifadə

terminlər "Internet texnologiyası" və "yüksək texnologiya" sinonimi hesab olunur ki, baxmayaraq, əslində, bu, çox aşağı-tech iş bəzən vaxt aparan və. Sprites xüsusilə də arxa arxiv nüsxələrini yaratmaq kimi doldurulması sites və ya informasiya prosesləri qəbulu, təmiz JavaScript və ya PHP proqramlaşdırma, habelə zəruri funksionallığı inkişafında digər darboğazlar müqayisədə geyimli deyil.

Güc və content idarəetmə sistemləri istifadə perspektivləri tez-tez onların praktiki tətbiqi nüanslar səviyyəli və 1001st vaxt bir və ya digər xüsusi alqoritm yeniden yazmaq üçün üçün dərslik resurslarının inkişafı, bir qayda olaraq, ehtiyac gətirib çıxarır.

Bu kontekstdə, müasir aracı təmin edir ki, bütün istifadə etmək üçün sadəcə ağlabatan vacibdir. digər üzərində bir istifadə üçün çox istəkli ola bilər, və aşağıdakı site bina qızıl qayda deyilir etməyin: hər hansı bir gözlənilməz vəziyyət halda tez həll edilə bilər ki, mümkün qədər tez iş keçmək və onu icra etmək üçün necə haqqında heç düşünmək lazımdır hər hansı bir problem.