CSS-sprite: temel teknikler ve yararlı ipuçları bir açıklaması

Bir müşteri ile çalışırken Modern sitesi geliştirme aşamasında hem hızlı, güzel ve verimli olacak ve hiç. Kural olarak, çevrimiçi kaynaklar oluşturur her şirket, kendi yüzün var olan tasarım, stil, güvenilirlik, hız ve diğer nitelikleri ile ziyaretçi çekmek istiyor.

sprite Faydalı özellikleri

CSS-sprite nitel sitenin özelliklerini ve şirketin imajını hem artırabilir. Özünde, çok geliştirme aracı karmaşık değil, ama gerçekten süreç ve kaynak geliştirme ve işlerinin hızını hızlandırır.

Diğer şeylerin yanı sıra, bu kod basitleştiren ve belli bir anlamda, diğer kaynaklara taşınabilir aynı grafik fikirler, stil tasarım öğeleri diyalog kullanabilirsiniz çünkü kullanılan CSS-sprite, yakın akrabaları gibi benzer olmasından dolayı o, yapısı ve etiketin içindekiler.

Sitenin gelişme normal seyrinde çok resim yapmak. Çoğu zaman, bu görüntüler çok az yer kaplar, ama her zaman ayrı bir dosya vardır. herhangi sunucunun herhangi bir işletim sistemi bir dosyayı açmak için - bu işlemi, dosya 16 resim 52 52 piksel gelen açıldığında zaman alıcı, ancak, bir dosya 13 13 tarafından piksellere açıldığında zamana göre önemli ölçüde farklılık ve olmayacaktır. İlk durumda, 16 görüntüleri sadece bir dosya açılması sonucunda elde edilecek ikinci durumda 16 dosya ve 16 açık okuma / operasyonları var.

Eğer konuyla ilgili dosyaları kümesi oluşturursanız (yatay menü, diyalog formları, hesap makinesi düğmeleri takvim tasarım öğeleri ...) bu tür görüntüler esnek siteden siteye taşındı kombine edilebilir.

olumsuz

CSS kullanılması önerilir çok neşeli taraftarlar, olduğunda sprite mutlaka konuyu dikkatle okuyan ve net bir şekilde eski moda şekilde çalışmaya her zaman pratik olduğunu gösterir olanlar vardır.

16 yerine açık 16 fotoğraflardan biri dosyası, varsa Nitekim, okuma / işlemleri tek yerine 16 resim dosyaları olacaktır. Ama hüner her tarayıcı bir önbellek olmasıdır ve sadece son çare olarak bir şey yükler. Buna ek olarak, genellikle sayfa öğeleri ilk sayfasını ziyaret ettiğinizde yüklenir ve sonra sadece değiştirdi yüklenir.İşte.

Bir başka yönü. Tipik haliyle, görüntü kesilir, tek bir dosya tutkallanmamış. Her nasılsa, söylemek daha iyidir, özel bir teknoloji geliştirdi. Tasarımcı düzenini oluşturur ve düzen onun parçalarını kullanır: düzeni ince dilimlenmiş adettir. toplam sayfa tasarımını artırır tüketen etkinliği, - Muhalifler sprite bir dosya içinde birkaç resim toplayıp inanıyoruz.

iman ve bu işgal CSS-sprite daha pragmatik olduğuna inanmak, HTTP isteklerinin sayısını optimize bu geliştiriciler vardır.

belirtilen Tüm zamanlar kuşkusuz önemli ama çok daha önemli görünümüdür şunlardır: makul sınırlar içinde uygulanmalıdır.

Otomasyon ve CSS-Sprites

CSS Sprites jeneratör çalıştırmak ve tasarımın doğru parçasını almak için hiçbir anlam ifade ediyorsa, o zaman hiçbir şey basitçe normal şekilde bu kısmını oluşturan önler. Geleneksel teknoloji yüzlerce görüntü kesmek için gerekli yaparsa, o sprite istenen alandan seçim ve onu gösterecektir gereklilik JavaScript fonksiyonunu, eskiz tercih edilir.

Bununla beraber, unutulmamalıdır ki, iki veya üç unsurdan ya da bir düzine diğer sprite - çizimlerin sprite yüzlerce bütün sağ, ama ne zaman, tabii ki, gerçekleşmeyecek, JavaScript fonksiyon problemlerinin yazma, ancak yaratılmasına alacak ne kadar iş ile bazı böyle büyük bir sprite ... buna ek olarak, tutkal resimleri - bu bir CSS sprite jeneratör ve istenen görüntüyü yapar ve bunun için CSS kodu, o ne kadar umursamadı olacak sprite kurucu unsurları. Site tasarım değişikliği, kaldırma ve yeni eklentilerin remaking sorunlar ortaya çıkmaktadır. Bir sprite geliştirilmesi, kullanmak ve daha sonra nasıl değiştiğini konusunda değil düşünmek gerekir.

sprite kullanmanın Konu faydası

CSS programlama dilleri farklı olarak, bu tüm dinamikleri kuralları ve bunların fonksiyonel içeriği (standart) ile belirlenir kurallar nispeten statik bir set. kompleksinde sprite düşünüldüğünde HTML, CSS kütüphanesinin temalı fonksiyonlu tasarım oluşturabilirsiniz.

Örneğin, menünün bitmiş sürümü: basitçe css-kurallar, js-fonksiyonlar birden bağlamak ve HTML-divs kod numarası da, sen sonucu alabilirsiniz. Sprite görüntünün içeriğini değiştirerek, menünün görünümünü değiştirebilirsiniz. fonksiyonun gövdesini belirtme, işlevselliğini ayarlayabilirsiniz.

tuhaf bir varyantını alın nesne yönelimli programlama (OOP) ait. Tabii, bu parlak fikir olacağını, ancak diğer OOP dilleri arka planı üzerinde durmak çok parlak olmayacak, gerçek lehçeler. FKÖ canlandı ve alışılmadık hızla güneşte bir yer kazanmak oldu zaman, sadece 90'ların başında, bu belirli bir fikir ve ifade somut biçimi, ancak farklı Rus orada olduğu gibi şimdi geliştiriciler gibi birçok lehçelerinde ile gelip olması.

Oyuncak - hareketli grafikler için bir bonanza

Heyecan ve programlama - uyumsuz kavramlar, ancak programlama becerileri, oyun yazma, obschebytovoy (basit şifreleme) ve yaratıcı (tasarım ve yeni teknolojilerin geliştirilmesi, fikirler) den oldukça farklıdır.

vektör grafiklerine Oyun Tasarımı temyiz SVG-sprite + CSS-kurallar genellikle sadece talep fakat kombinasyonu gerçek oyunun nesneye (sitenin) geliştiricisi nesnesi haline gelir çünkü. Özellikle, popüler oyun Counter Strike sprite şartlarını uygulamak, spreyler oldukça anlamlı kelimeler: blast, kan, görme ...

oldukça normal ve anlaşılabilir başlatmak için ifade "sprite css V34 set". Spritelar özünde, fayda kullanımında sadece bulundu, ancak aynı zamanda tüketicilerin belli bir daire anlamak oldukça, tam özellikli, uygun fiyatlı ve kolay bir niş, oluşturulur.

CSS-sprite: Örnek

sitedeki sayfaları geçmek için belirli bir dil için çeşitli seçenekler kullanılır, ancak dil seçici bir simge olarak gerçekleştirmek için ise, bir sprite kullanarak çözüm bu gibi görünebilir:

Belirgin dezavantajları cinler

Her şeyden önce, o zaman alıcı ve titiz bir süreçtir. Birçok küçük bir resim toplamak için - küçük parçalar halinde tasarım ve diğer kesmek - bir şeydir. sitede kullanılan görüntülerin tümü üzerinde tuval fikrini uygulayın ve koyun tamamen beyhudedir.

Hatta CSS sprite Jeneratör kullanarak, zorluklar site tasarımını değiştirmek için gerekli olan, özellikle kaçınılması mümkün değildir. sprite görüntülerin birkaç onlarca Ekle - elemanlı bir dizi değil, grafik genellikle sadece yerine doğru öğeyi bulmak için bir dizi olarak kodunu sıralama, ekranda görüntülenir, grafik var.

Standart ve geliştiriciler sprite kullanılmış bir politika arka plan ile ilişkili olarak, bu sadece bir arka plan resmi ve sitenin elemanı olduğunu iddiasını şu. Bir sayfanın Grafik bileşeni elemanları etiket img manipüle gerekir.

Yeterince arka plan, ortak bir arka plan olarak algılandığı zaman bu kadar basit gerekçelerle kabul etmek zordur. minyatür elemanı veya sayfanın tamamını - Ne olursa olsun sadece arka plan, bu.

Bu arada, grafik bileşenidir sprite kullanımı ciddi bir engel temsil etti.

akılcı kullanımıdır

terimleri "İnternet teknolojisi" ve "yüksek teknoloji" eşanlamlı olarak kabul edilir olmasına rağmen, aslında, çok düşük teknolojili iş bazen zaman alıcı ve olduğunu. Spritelar özellikle böyle bir arka plan arşiv kopyalarını oluşturmak gibi dolgu siteler veya bilgi süreçlerini belirleyen saf JavaScript veya PHP programlama yanı sıra gerekli işlevselliği gelişiminde diğer darboğazlar kıyasla giymiş değildir.

Güç ve içerik yönetim sistemlerinin kullanımının umutları genellikle kendi pratik uygulama nüansları tesviye ve 1001 zaman birini veya diğerini özel bir algoritma yeniden yazmak için manuel kaynak geliştirme, kural olarak, ihtiyacına yol açar.

Bu bağlamda, modern bir araç sağlar hepsi kullanmak basitçe makul önemlidir. üst üste kullanmak için çok istekli ve şöyle sitesi binada altın kural okur etmeyin: Herhangi beklenmedik bir durum söz konusu olduğunda bir an önce çözülmesi, böylece en kısa sürede işi geçmek ve bunu çalıştırmak için nasıl nasıl değil düşünmek gerekir herhangi bir sorun.