Používání SVG pro ikony nebo logotypy namísto PNG či GIF obrázků hájím kam vkročím, ale v jedné věci jsou bitmapy zlaté: V přizpůsobování šířce layoutu a zachování poměru stran.
Jestli jste někdy řešili nasazování aplikace, asi víte, že všechno odladit může být celkem zdlouhavá záležitost. Dokážete si představit, že na to máte jen týden? Že je to nemožné? Není! Jde to a ani to nemusí být příliš složité.
Reportáž z virtuální konference FOSDEM. Minule jsem popsali Go room, dnes se věnujeme monitoringu a observability.
Mikrofrontendy jsou zajímavá adaptace konceptu microservices pro potřeby frontendového vývoje. Podívejte se, co to v praxi obnáší a proč jsme se v Seznam.cz rozhodli vyvinout náš vlastní microfrontend framework, Merkur.
Poskakování stránky
Atributy
img.widthaimg.height(případně jejich obdoby v CSS) se používají proto, aby prohlížeč věděl, kolik má pro obrázek vyhradit místa před tím, než ho stáhne. Pokud je neuvedeme, tak obsah stránky poskakuje při tom, jak se obrázky postupně načítají. Je nějaký důvod, proč tyto atributy u SVG nepoužít? V kapitole o vkládání pomocí<img>je uvedené, že se mají odstranit, ale není vysvětlené, proč.Re: Poskakování stránky
To si nerozumíme.
widtha hlavněheightu<img>je v pořádku. Doporučuji je ale odmazat ze zdrojového .svg souboru, tedy ze značky<svg>. Viz odstavec „Nastavení šířky a výšky je k ničemu, použijte viewbox“ – je tam odkaz na zdrojový článek.Pokud nejsou rozměry značky img fixní (jinak řečeno, pokud má obrázek proměnlivou šířku a výšku v procentech) pak stejně musíte použít padding-bottom hack kvůli tomu, aby stránka neposkakovala. Pak jsou width a height zbytečné, prohlížeč je ignoruje. Platí nejen pro SVG, ale i rastrovou grafiku s pružnou šířkou.
Re:
Jasně, to
widthaheightprohlížeč tak často nepoužije, protože s vykreslením čeká na CSSka, kde bude nějaký předpis pro pružnou šířku a přizpůsobení výšky. Ale může se stát, že přidání těchhle stylů se děje asynchronním Javascriptem atd. Konkrétněheightpro jistotu dávám všude.