Sprite CSS: opis, podstawowe techniki i przydatne rekomendacje

Nowoczesna strona internetowa powinna być szybka, piękna i skuteczna zarówno na etapie rozwoju, jak i podczas pracy z klientem. Zazwyczaj każda firma, która tworzy zasobów internetowych zwykle mają własną twarz, aby przyciągnąć użytkowników do swojej konstrukcji, stylu, niezawodności, szybkości i innych cech.

właściwości użytkowe sprites

CSS sprite może poprawić zarówno cech jakościowych miejscu i wizerunku firmy. W istocie, nie jest to bardzo wyrafinowane narzędzia programistyczne, ale faktycznie przyspiesza środków rozwojowych i przyspieszyć swoją pracę.


Między innymi upraszcza kod i, w pewnym sensie, jest przenośny do innych zasobów, ponieważ wykorzystywane CSS sprites, stają się jak najbliższej rodziny, ponieważ można używać tych samych pomysłów graficznych, styl wizualny elementy dialogu, struktura i zawartość tagów. W normalnym procesie tworzenia strony internetowej musisz zrobić dużo zdjęć. Bardzo często zdjęcia te zajmują bardzo mało miejsca, ale zawsze są oddzielnym plikiem. Dla każdego systemu operacyjnego, każdy otwarty serwer plików - operacja, która wymaga dużo czasu, ale nie różni się znacząco w czasach, gdy plik jest otwarty od 13 do 13 pikseli, a po otwarciu pliku z 16 zdjęć 5252 pikseli. W pierwszym przypadku powinna wynosić 16 i 16 plików operacji otwierania /odczyt w drugim przypadku 16 zdjęć zostanie uzyskana poprzez otwarcie tylko jeden plik. Jeśli tworzysz zestawy takich plikówtematy (menu poziome formy dialogowe, przyciski, kalkulator, kalendarz elementy projektu), a następnie zsumować te zdjęcia mogą być elastycznie poruszać się z miejsca na miejsce.


minusem

Kiedy fani są zbyt żywy sprite polecić za pomocą CSS, zawsze znajdą się tacy, którzy są starannie bada problem i pokazuje, że zawsze jest praktyczne, aby pracować jak poprzednio . Rzeczywiście, jeśli zamiast 16 plików obrazów do jednego pliku z 16 zdjęć, 16 operacje zamiast otwierania /odczyt będzie jeden. Ale sztuczka polega na tym, że każdy ma pamięć podręczną przeglądarki i ładuje wszystko w skrajnym przypadku. Ponadto, zwykle elementy strony ładowany podczas pierwszej wizyty na stronie, a następnie załaduj tylko zmieniło.
Kolejny aspekt. Zazwyczaj obrazy są wycinane, a nie wklejane do jednego pliku. W jakiś sposób technologia rozwinęła się, a jeszcze lepiej, niestandardowo. Projektant tworzy układ, układ wykorzystuje jego fragmenty drobno posiekanych części układu. Przeciwnicy uważają, że skrzaty zbierania wielu obrazów w jednym pliku - czasochłonne, co zwiększa ogólną stronę czas rozwoju. Są deweloperzy, którzy wierzą i zoptymalizować liczbę żądań HTTP, uważając, że działalność ta jest bardziej pragmatyczne niż CSS-ikonki. Wszystkie te punkty oczywiście mają znaczenie, ale znacznie więcej jest ideą: wszystko powinno być stosowane w rozsądnych granicach.

Trylogia automatyzacji i CSS

Jeśli nie ma sensu uruchamiać generator sprite CSS i uzyskać właściwyczęść projektu, wtedy nic nie stoi na przeszkodzie, by nadrobić ten element zwykłej drogi. Jeśli technologia konwencjonalna prowadzi do konieczności cięcia setki zdjęć, lepiej jest rzucić Javascript funkcji, które są niezbędne do wyboru ikonki do obszaru i wyświetlić go.
Jednakże należy zauważyć, że ikonki z dwóch lub trzech przedmiotów lub dziesięć, z drugiej - Dobrze, ale kiedy sprayte sto rysunków, z pisania problemy javascript-funkcyjne są na pewno nie tam, ale że dużo pracy będzie stworzyć taki duży dodatek sprite, klej zdjęcia - pojedynczy generator duszki CSS sprawia żądany obraz, CSS-a pod nim kod, on nie obchodzi, ile składniki będą ikonki. Problemy będą występować podczas przetwarzania witryny, zmiany projektu, usuwania i dodawania nowych elementów. Rozwijające sprite nie powinien myśleć o tym, jak go używać, i jak to potem zmienić.

świadczenie tematyczny za pomocą ikonek

W odróżnieniu od języków programowania CSS, jest stosunkowo statyczny zbiór reguł wszystkie jego dynamika zdefiniowanych reguł, a ich treść funkcjonalny (standard). Biorąc pod uwagę duszek, HTML, CSS w kompleksie, możesz tworzyć tematyczne biblioteki projektów.
Na przykład, pełna wersja menu, po prostu łącząc kilka reguł, CSS-JS-funkcje obejmują kilka HTML kod Divov można uzyskać wyniki. Zmiana zawartości obrazu duszka może zmienić wygląd tego menu. Po udoskonaleniu treści funkcji można dostosować funkcjonalność. Będzie to rodzaj wariantuProgramowanie obiektowe (OOP). Niewątpliwie będzie to żywy pomysł, ale nie będzie zbyt jaskrawo wyróżniał się na tle innych dialektów OOP w prawdziwych językach. Dopiero na początku lat 90-tych, kiedy OWP została reaktywowana i stał się bardzo szybko zyskują miejsce w słońcu, to był pomysł konkretnej i określonej formy wypowiedzi, a teraz deweloperzy mają pochodzić z jak wielu dialektów, jak zmieniała rosyjskim.

Zabawki - bonanza dla duszków

podniecenia i programowania - niezgodne pojęć, ale wykwalifikowany programista pisze gra znacznie różni się od obschebytovoy szyfrowania (proste) i twórczej (projektowanie i rozwój nowych technologii i idei). Projektowanie gier apelujących do grafiki wektorowej, więc kombinacja SVG-sprite + CSS zasady nie tylko popyt, ale często staje deweloper obiektu (strona internetowa) prawdziwy przedmiot gry. W szczególności popularna gra Counter Strike odnosi się do terminów sprite, spray jest w pełni zrozumiałym synonimem: eksplozja, krew, wzrok
Zwrot "zainstaluj sprite css v34" dla dedykowanego całkowicie normalnego i zrozumiałego. Sprite otrzymał nie tylko użyteczność aplikacji w swojej istocie, ale także stworzył niszę, która stała się w pełni funkcjonalna, dostępna i zrozumiała dla określonego kręgu odbiorców.

, CSS-ikonki: próbka

Przełączanie stron w określonym języku stosowane różne metody, ale jeżeli przełącznik język wykonać w postaci ikony, rozwiązanie, które wykorzystuje ikonek może wyglądać w następujący sposób:

Oczywiste wady duszków

Przede wszystkim jest to żmudny i skrupulatny proces. Jedną z rzeczy jest przecięcie projektu na małe kawałki, a drugi - zebranie jednego zdjęcia z wielu małych. Zastosuj ideę płótna i umieść na nim wszystkie obrazy, które są używane na stronie, absolutnie beznadziejne.
Nawet przy użyciu generatora spriterzy CSS nie można uniknąć trudności, szczególnie w przypadku zmiany projektu witryny. Miejsce w sprayte kilkudziesięciu zdjęć - nie jest to elementy tablicy, grafiki są grafiki, to zwykle po prostu wyświetla zamiast włoka kod w postaci tablicy, aby znaleźć właściwą pozycję. Standard i tacy programiści twierdzą, że gdy duszek jest powiązany z regułą tła, jest to tylko obraz tła, a nie element witryny. Składnik graficzny elementów strony powinien być modyfikowany za pomocą znaczników img. W związku z tym trudno jest zgodzić się z tego prostego powodu, że tło było niewielkie, gdy postrzegano je jako ogólne tło. To tylko tło, bez względu na wszystko - miniaturowy element lub cała strona jako całość. Tymczasem sam element graficzny jest poważną przeszkodą w używaniu sprite'ów.

Inteligentne wykorzystanie

Chociaż określenie „Internet Technology” i „wysokiej technologii” jest uważana za synonim, w rzeczywistości jest bardzo czasochłonne i czasami praca non-technologiczny. Sprite nie jest szczególnie vydelayutsya wobec innych wąskich gardeł w czystej programowania JavaScript lub PHP, jak i pod względem rozwoju procesu konfiguracji funkcjonalnych wymaganych informacji lub treści witryn, takich jak tłotworzenie kopii archiwalnych.
Siła i obietnica używanych systemów zarządzania witryną jest czasami równoważona przez niuanse ich praktycznego zastosowania, a ręczny rozwój zasobów z reguły prowadzi do potrzeby 1001-tego ponownego przepisywania określonego algorytmu. W związku z powyższym ważne jest, aby po prostu używać w rozsądnych granicach wszystkiego, co zapewnia nowoczesne narzędzie. Nie powinno być zbyt trudne do zastosowania jednego ze szkodą dla drugiego, a złota zasada w budowie strony sugeruje, co następuje: nie trzeba myśleć o tym, jak wykonać zadanie tak szybko, jak to możliwe, ale jak go wykonać, aby w razie nieprzewidzianych sytuacji było to możliwe szybko rozwiązać każdy problem.

Powiązane publikacje