image-set : nechte prohlížeč vybrat obrázek v CSS vlastnosti background-image

Vzhůru dolů 30.04.2021 16:04 Zápis image-set umožňuje nechat prohlížeč vybrat nejvhodnější obrázek, definovaný v rámci vlastnosti background-image, ze sady, kterou mu připravíme. Je to vhodné zejména pro posílání různých obrázků na obrazovky s vysokou hustotou pixelů: .box Od února 2021 tento zápis podporuje Firefox . Díky tomu už bude brzy možné základní varianty zápisu image-set používat ve všech moderních prohlížečích. Jak jste asi pochopili, jde o obdobu atributu srcset pro značku . Některé varianty zápisu image-set mohou přebírat také funkčnost značky , jenže ty zatím nejsou podporované. image-set je prostě takový malý srcset pro obrázky na pozadí vkládané přes CSS. Výběr obrázku podle hustoty pixelů Obrázky definované ve vlastnosti background-image občas potřebujeme prohlížečům poslat v různých variantách, protože nevíme, jakou hustotu pixelů bude mít zařízení, na kterém běží. .box Obecně vzato, v image-set vždy uvádíme adresu obrázku a podmínky za jakých se má zobrazovat. Tak je to ve specifikaci. Jenže prakticky vzato dnes máme jediný možný zápis – deskriptory 1x, 2x, 3x a podobné udávají hustotu pixelů, tedy hodnotu dppx, kterou znáte z hodnoty resolution v Media Queries. Takže například na většině počítačů s Windows se stáhne první obrázek , protože dppx má hodnotu 1. Na iPhonu 11 se stáhne druhý obrázek. Na některých moderních Androidech, které mívají vyšší hustotu pixelů, i 3 a více, pak poslední obrázek. Není to jediná varianta, kterou bychom podle specifikace mohli použít. Další teoretické možnosti použití image-set , zatím nepodporované Specifikace je jedna věc, praxe ale velí vycházet z podpory v prohlížečích. Dále uváděné možnosti zůstávají na papíře. Jediný prohlížeč, který je podporuje, je právě nový Firefox Nighly. Výběr podle typu obrázku Podobně jako u značky bychom i tady mohli prohlížeči nabídnout dva formáty pro jeden obrázek. To by bylo skvělé pro využití u nových formátů jako WebP nebo AVIF… .box …kdyby to ovšem podporovaly prohlížeče. Ke dni psaní s tímto zápisem uspějete jen Firefox Nightly. Více je možné vidět v CodePenu. Kombinace obrázků s generovaným pozadím Občas by se kódérkám a kóderům mohla hodit kombinace obrázku s generovaným pozadím, např. přechody tvořenými pomocí linear-gradient . .box Podporuje to opět jen nový Firefox ve vývojářské verzi Nightly. CodePen k hraní. Deskriptor w V atributu srcset bychom teoreticky mohli mít možnost používat deskriptor w, jenž prohlížeč informuje o šířkách nabízených obrázků. To aby si lépe vybral. .box Tady ale pouštím imaginaci na plné obrátky a troufám si jít opravdu daleko, protože i ve specifikace o tomto mluví jako o přání a úkolu pro budoucí specifikátory, nikoliv o navržené vlastnosti. Tak nic. Mrkněte se na CodePen. Na vaše objevování zápisu image-set se těší celá moje kolekce CodePenů. Podpora Použitelnost zápisu image-set díky implementaci ve Firefoxu bez pochyby v příštích měsících prudce stoupne. Jde totiž o poslední moderní prohlížeč, který jej dosud neuměl. Jenže pokud jste se, jako já, nechali namlsat všemi zde uvedenými možnostmi zápisu, budete stejně zklamaní. Ale tak už to mezi námi webaři chodí. Jsme nadšení z implementace nový vlastností, abychom byli tentýž den zklamaní, co všechno ještě prohlížeče neumí. Při implementaci nezapomeňte na Autoprefixer, protože i moderní prohlížeče pro tuto vlastnost vyžadují prefixy – např. Chrome rozumí jen zápisu -webkit-image-set . Internet Explorer je sice už téměř vymřelý druh, ale pokud byste potřebovali zajistit si fungování i v něm, musíte uvést náhradní řešení. Je to vidět v mém prvním CodePenu: .box Vše o podpoře image-set najdete klasicky na CanIUse. caniuse.com/css-image-set Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .