Zápis image-set : více verzí obrázků v CSS

Vzhůru dolů 24.11.2021 01:46 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 Základní varianty zápisu image-set je možné 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 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 Firefox. 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 podporoval ještě jiný prohlížeč než Firefox. 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 Toto ale nepodporuje ani onen nový Firefox. Odkážu na 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, pokud opravdu hodně chcete. Na vaše objevování zápisu image-set se těší celá moje kolekce CodePenů. Podpora Použitelnost zápisu image-set díky nové implementaci ve Firefoxu bez pochyby 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: .