Hlavní navigace

CSS3 rozšíří možnosti obrázků, přidá podporu pro sprity

5. 8. 2009 8:00 (aktualizováno) Martin Hassman

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.

Google sprity

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, FacebookuTwitteru. Je také autorem jediného českého blogu o vývoji (X)HTML.

Sdílet