CSS3 rozšíří možnosti obrázků, přidá podporu pro sprity
Od příchodu nových předsedů CSS WG jsme si již mohli zvyknout, že se CSS3 rozšiřuje o další moduly (odhadem rychlostí 1 modul za čtvrt roku). Nedávno zveřejněný modul CSS Image Values má název vhodný spíše pro zmatení nepřítele, ovšem nejedná se v zásadě o nic jiného, než o zavedení podpory spritů do CSS.
Tip: Pokud nevíte, co jsou to CSS sprity, mrkněte se na následující obrázek, který používá běžná stránka hledání Googlu.
Použití CSS spritů by podle připravované specifikace mohlo být vyloženě snadné, a sice:
background-image: url('logos.png#xywh=10,30,60,20')
Což je rozhodně příjemnější zápis než možnosti, které máme dnes.
Druhou novinkou, kterou CSS Image Values zavádí, je možnost fallback obrázků na pozadí, čili např:
background-image: image(picture.svg, picture.png)
Tento zápis zajistí, aby pokud se první obrázek nenahraje, byl použit obrázek druhý atd.
Není třeba se příliš trápit použitou syntaxí (ta se může ještě několikrát změnit, jak už to ve standardizačním procesu chodí) ani podporou v prohlížečích (ta je z pochopitelných důvod zatím zcela nulová). Je dobré jen vědět, že se něco takového chystá a až se někdy budete trápit s otázkou, zda sprity na webu rozhodně ano či rozhodně ne, tak si pamatujte, že CSS WG si myslí že ano a snaží se podobně smýšlejícím usnadnit život.
Autora tohoto článku najdete na LinkedIn, Facebooku i Twitteru. Je také autorem jediného českého blogu o vývoji (X)HTML.
Vše z Blog Root.cz
Bohuzel prozatim je to stejne k nicemu, protoze nez bude CSS3 finalni, bude to trvat tak nejmin 10 let, a nez to prohlizece zacnou podporovat, bude to tak dalsich nejmene 5 let. Silene jim to trva. :(
toto vyzerá šikovne
background-image: url('logos.png#xywh=10,30,60,20')
Rozhodne to vypada zajimave, uvidime, co z toho nakonec bude. Mimochodem Martine, mas v nadpisu maly preklep: spripty --> sprity
Já už se na CSS3 těším, tož uvidíme, jak to půjde a co to bude umět. Jsem zvědav i na html5, xhtml mi nějak nepřirostlo k srdci, prozradím, že tomu přidaly i problémy s validací ;).
nebol by som proti keby som to mohol začať používať hneď odteraz, no škoda... pripájam sa k [1]
S těmi sprity, já nevím... možná se tím částečně zjednoduší umisťování spritů do bitmapy, ale základní problém spritových bitmap související s poměrně velkými nároky na paměť se tím asi úplně nevyřeší. Třeba zrovna ta googlí bitmapa je pokryta hezky, s minimem prázdného místa, ale ne vždycky to takhle vypadá.
[6] To je ale v pořádku. Paměťové problémy se řeší na úrovni implementace, rozhodně se nemohou řešit na úrovni syntaxe jejich používání.
[7] Já si právě myslím, že spritové bitmapy nemají efektivní implementaci. Je to sice geniální, ale přece jen hack na snížení počtu HTTP requestů. Posvěcení tohohle hacku (tzn. usnadnění používání CSS spritů) místo řešení prvotního problému (snížení počtu HTTP requestů) mi nepřijde jako dobrý nápad.
Lidé nepoužívají CSS sprity proto, že by chtěli takovýmto způsobem vytvářet stránky, dle mého jde pouze o optimalizaci problému vzniklého kdesi na úrovni HTTP protokolu.
[7] abych to parafrázoval: "Problémy HTTP protokolu se řeší na úrovni implementace, rozhodně se nemohou řešit na úrovni CSS syntaxe"
Geniální hack včerejška - standard dneška. Ano, to se na webu děje již asi 10 let a kupodivu se zdá, že je to jeho velmi silná zbraň a v konkurenčním souboji se mu vyplácí, byť se to akademikům může protivit sebevíc a byť je otázka, zda to takhle může fungovat donekonečna (většina rozumných lidí by řekla, že ne, a řekla by to již před řadou let, jenže ono to zatím - možná k jejich nelibosti - stále velmi dobře funguje).
Jinak já bych šel ještě dál. Je otázka, zda je to opravdu problém HTTP protokolu a pokud ano, zda je ten problém na jeho úrovni prakticky řešitelný. (Když si odmyslíme všechny vrstvy nad ním, tak určitě, ovšem praktické řešení, které by nenutilo webdesignery používat nějaký krok navíc - jako nyní ony sprity - tak takové řešení nevidím.)
Problém množství http requestů pro sprity lze řešit (jiným způsobem) už dnes, a sice vložením obrázku přímo do css. Viz známý acid2 test.
[11] Pokud neřešíme staré prohlížeče a nemáme moc velké obrázky, tak tenhle postup lze použít, ale je to stále z bláta do louže. Je tam jen jiný krok, který je třeba udělat "navíc".