Sprite CSS: opis, podstawowe techniki i przydatne rekomendacje

Nowoczesna strona powinna być szybka, piękna iskuteczny zarówno na etapie projektowania, a podczas pracy z klientem. Zasadą jest, że każda firma tworzy zasoby online, stara się mieć własną twarz, aby przyciągnąć turystów z jego konstrukcji, stylu, niezawodności, szybkości i innych atrybutów.

Przydatne właściwości duszków

Sprite CSS pozwalają poprawić jakośćcharakterystyka strony i wizerunek firmy. W gruncie rzeczy nie jest to bardzo skomplikowane narzędzie programistyczne, ale naprawdę przyspiesza proces tworzenia zasobów i szybkość ich pracy.

Między innymi, kod jest uproszczony i, ww pewnym sensie staje się przenośny na inne zasoby, które dzięki użyciu sprite'ów CSS stają się podobne jak bliscy krewni, ponieważ można używać tych samych pomysłów graficznych, stylu projektowania elementów dialogowych, struktury i zawartości znaczników.

W normalnym procesie tworzenia stron internetowych musiszrobić wiele zdjęć. Bardzo często te zdjęcia zajmują bardzo mało miejsca, ale zawsze są oddzielnym plikiem. W przypadku dowolnego systemu operacyjnego dowolnego serwera otwarcie pliku jest operacją, która zajmuje dużo czasu, ale nie będzie się znacząco różnić w czasie, gdy plik zostanie otwarty o 13 na 13 pikseli, a gdy plik 16 zdjęć 52 na 52 pikseli zostanie otwarty. W pierwszym przypadku musisz mieć 16 plików i 16 operacji otwierania / odczytu, w drugim przypadku 16 obrazów zostanie uzyskanych poprzez otwarcie tylko jednego pliku.

Jeśli tworzysz zestawy takich plików według tematu(menu poziome, formularze dialogowe, przyciski kalkulatora, elementy projektu kalendarza ...), wtedy takie zestawy zdjęć można przenieść z witryny na stronę.

Odwrotna strona medalu

Kiedy są fani, którzy zbyt szybko zalecają używanie sprite'ów CSS, należy znaleźć tych, którzy uważnie przestudiują pytanie i inteligentnie pokazują, że zawsze bardziej praktycznym jest pracować w staromodny sposób.

Rzeczywiście, jeśli zamiast 16 plików graficznychbędzie jeden plik z 16 obrazami, a następnie zamiast 16 operacji otwierania / czytania będzie jeden. Ale sztuczka polega na tym, że każda przeglądarka ma pamięć podręczną i ładuje coś tylko w ostateczności. Ponadto zwykle elementy strony są ładowane przy pierwszej wizycie na stronie, a następnie pobierane są tylko zmienione.

Inny aspekt. Zwykle zdjęcia są cięte, a nie przyklejane do jednego pliku. W jakiś sposób technologia rozwinęła się i, mówiąc lepiej, niestandardowa. Projektant tworzy układ, a układ wykorzystuje jego elementy: precyzyjnie wycięte części układu. Przeciwnicy sprite'ów uważają, że zbieranie kilku obrazów w jednym pliku jest pracochłonnym zadaniem, co zwiększa ogólny czas tworzenia strony.

Niektórzy deweloperzy rozważają i optymalizują liczbę żądań HTTP, uważając, że to zajęcie jest bardziej pragmatyczne niż sprite'y CSS.

Wszystkie te kwestie niewątpliwie mają znaczenie, ale opinia jest o wiele ważniejsza: wszystko musi być stosowane w rozsądnych granicach.

Automatyzacja i sprite'y CSS

Jeśli nie ma sensu uruchamianie generatora sprite'ów CSSi zdobądź właściwą część projektu, a wtedy nic nie stoi na przeszkodzie, aby ta część była zwykła. Jeśli zwykła technologia prowadzi do konieczności obcięcia setek zdjęć, lepiej jest naszkicować funkcję JavaScript, która w razie potrzeby wybierze żądany obszar ikonki i wyświetli go.

Należy jednak zauważyć, że sprite zDwa lub trzy elementy lub tuzin lub dwa - w porządku, ale gdy w sprite'u są setki zdjęć, to oczywiście nie będzie problemów z napisaniem funkcji JavaScript, ale ile pracy zostanie poświęcone na stworzenie tak dużego ikonki ... Poza tym klejenie obrazów to jedna rzecz: generator sprite'ów CSS sprawia, że ​​zarówno właściwy obraz, jak i kod CSS, nie ma znaczenia, ile elementów składowych sprite'a jest. Podczas modyfikacji strony pojawią się problemy, zmiana projektu, usunięcie i dodanie nowych elementów. Podczas tworzenia ikonki nie powinieneś myśleć o tym, jak z niej korzystać, ale jak ją później zmienić.

Tematyczne korzyści płynące z używania sprite'ów

W przeciwieństwie do języków programowania CSSrelatywnie statyczny zestaw reguł, cała jego dynamika jest określona przez reguły i ich funkcjonalną zawartość (zgodnie ze standardem). Biorąc pod uwagę złożone sprite'y, HTML, CSS, możesz tworzyć tematyczne biblioteki funkcjonalne.

Na przykład gotowa opcja menu: po prostu łącząc kilka reguł css, funkcji js i włączając kilka divów HTML w kodzie, możesz uzyskać wynik. Zmieniając zawartość obrazka sprite, możesz zmienić wygląd tego menu. Określając treść funkcji, możesz dostosować funkcjonalność.

Uzyskaj rodzaj opcjiprogramowanie obiektowe (OOP). Niewątpliwie będzie to świetny pomysł, ale nie będzie zbyt jasny w stosunku do innych dialektów OOP w prawdziwych językach. Dopiero na początku lat 90., kiedy OWP została odrodzona i niezwykle szybko podbiło to miejsce pod słońcem, był to konkretny pomysł i specyficzna forma jego ekspresji, a dziś twórcy wymyślili tyle dialektów, ile nie ma różnorodnego języka rosyjskiego.

Zabawki - złote dno dla duszków

Podniecenie i programowanie są niekompatybilnymi koncepcjamiale kwalifikacje programisty, który pisze gry, wyraźnie różnią się od ogólnego codziennego (proste kodowanie) i kreatywnego (projektowanie i rozwój nowych technologii, pomysłów).

Projektowanie gier odwołuje się do grafiki wektorowej, ponieważkombinacja ikonek SVG + reguł CSS jest nie tylko twierdzona, ale często zmienia się z obiektu deweloperskiego (strony) w prawdziwy obiekt gry. W szczególności popularna gra Counter Strike stosuje sprite'y do terminów, rozpyla całkiem sensowne synonimy: wybuch, krew, wzrok ...

Wyrażenie „zainstaluj css v34 sprites” dlainicjowany jest całkiem normalny i zrozumiały. Duszki znalazły nie tylko użyteczność w swoich zastosowaniach, ale także stworzyły niszę, która stała się w pełni funkcjonalna, dostępna i zrozumiała dla pewnego kręgu konsumentów.

Sprity CSS: przykład

Aby przełączać strony w określonym języku, używane są różne opcje, ale jeśli selektor języka jest wykonywany jako ikona, rozwiązanie używające ikonki może wyglądać tak:

Oczywiste wady duchów

Przede wszystkim jest pracochłonny i skrupulatnyproces. Jedną rzeczą jest wycięcie projektu na małe kawałki, a drugim zebranie jednego obrazu z wielu małych. Zastosuj pomysł płótna i umieść na nim wszystkie obrazy użyte na stronie, to jest absolutnie nie obiecujące.

Nawet przy użyciu generatora sprite CSS, trudnościnie da się uniknąć, zwłaszcza, gdy trzeba przerobić projekt strony. Umieszczenie kilkudziesięciu obrazków w ikonce nie jest zbiorem elementów, grafika jest grafiką, zazwyczaj jest wyświetlana na ekranie i nie jest przeszukiwana w kodzie jako tablica w poszukiwaniu żądanego elementu.

Twierdzą o tym standard i następujący deweloperzyPonieważ sprite są powiązane z regułą tła, jest to tylko obraz tła, a nie element witryny. Element graficzny elementów strony powinien manipulować znacznikami img.

Trudno zgodzić się z tym na tej prostej podstawie, że tło było mało postrzegane jako ogólne tło. To tylko tło, bez względu na wszystko - miniaturowy element lub cała strona jako całość.

Tymczasem jest to element graficzny, który stanowi poważną przeszkodę w używaniu duszków.

Rozsądne użycie

Chociaż terminy „technologia internetowa”a „wysoka technologia” jest uważana za synonim, w rzeczywistości jest czasochłonna, aw niektórych miejscach jest bardzo mało zaawansowana technologicznie. Sprity nie są szczególnie odróżniane od innych wąskich gardeł, zarówno w czystym programowaniu w JavaScript lub PHP, jak i pod względem rozwijania niezbędnej funkcjonalności, konfigurowania procesu wypełniania stron informacjami lub, na przykład, archiwalnych kopii tła.

Moc i perspektywy wykorzystywanych systemówzarządzanie witryną jest czasami niwelowane przez niuanse ich praktycznego zastosowania, a ręczne tworzenie zasobów z reguły prowadzi do konieczności przepisania jednego lub drugiego własnego algorytmu 1001 razy.

W kontekście powyższego ważne jest, aby być rozsądnymograniczenia dotyczące używania wszystkiego, co zapewnia nowoczesne narzędzie. Nie bądź zbyt gorliwy, aby zastosować jedną ze szkodą dla drugiej, a złota zasada w budowaniu witryny mówi następująco: nie musisz myśleć o tym, jak przekazać pracę tak szybko, jak to możliwe, ale jak ją wykonać, aby w przypadku nieprzewidzianej sytuacji szybko rozwiązać jakikolwiek problem.

</ p>>