Ze záložek k CSS a responzivnímu designu

Článek sdružující záložky, které se mi nahromadili a týkají se CSS a obrázků a responzivního designu (vč. obrázků).

Tento článek obsahuje kolekci odkazů na postprosessing :is() pseudotřídy, kolekcí stylů a triků, které mohou pomoci s prací s CSS a SVG (i obecně obrázky).

Prozkoumáme, jak nové pseudotřídy, animace placeholderů a praktické příklady CSS Houdini API mohou zlepšit vaše projekty. Dále se zaměříme na responzivní design, optimalizaci obrázků a moderní techniky pro práci s obrázky, jako je použití SVG ikon. Kromě toho se seznámíme s tipy a triky pro implementaci tmavého režimu a zvážíme výhody SVG ikon oproti ikonovým fontům.

CSS postprocesory / kolekce stylů

  • @csstools/postcss-is-pseudo-class - npm: Tento postprocesor řeší převod nové :is(…) pseudotřídy na zápis pro prohlížeče, kde není podporován. Naneštěstí nelze použít na :where(), který má nulovou specificitu (což by nešlo nasimulovat).

  • Water.css: kolekce stylů pro (skoro) čisté HTML aby vypadalo „hezčeji” (např. řeší světlý/tmavý režim viz dále).

CSS triky

  • :placeholder-shown: Tento příspěvek na TikToku ukazuje, jak snadno můžete použít :placeholder-shown pseudotřídu k elegantnějšímu řešení animace „placeholder vyjede nad input”.

  • Houdini.how: Houdini.how je katalog CSS Houdini, který vám poskytne praktické příklady a návody, jak využít Houdini API ve vašem projektu.

  • Flexbox Dynamic Line Separator - Ahmad Shadeed: Tento článek představuje zajímavý způsob, jak vytvořit dynamický/responzivní oddělovač pomocí flexboxu. Jde o situaci „1|2 ←→ ½”.

  • @Jahoda na Twitteru: Zajímavé řešení automatického vytváření kontrastní barvy textu k pozadí. Čistě v CSS pomocí proměnných.

  • CSS deskriptor size-adjust: Článek o CSS deskriptoru size-adjust, který umožňuje měnit velikost fontu dle potřeby.

CSS tipy a triky na specifické problémy

  • Ahmad Shadeed na Twitter: zuje řešení implementace hodnocení hvězdičkami (star rating) s použitím SVG, který zohledňuje i částečné hvězdy (např. půlhvězdy).

  • Martin Michálek na blogu: popisuje, jak autor sází knihu pouze pomocí CSS, což je zajímavý pohled na možnosti tiskového formátování pomocí CSS.

Responsivní design a obrázky

  • SVGOMG - SVGO’s Missing GUI: SVGOMG je nástroj s grafickým uživatelským rozhraním, který vám pomůže optimalizovat SVG soubory a snížit jejich velikost.

  • Squoosh: optimalizovat lze i pomocí cli utilit AVIF → avifenc, cwebp je online nástroj pro optimalizaci a konverzi obrázků, který podporuje různé formáty, jako je AVIF a WebP.

  • Building a responsive image: Tento článek se zabývá vytvářením responzivních log s použitím SVG.

  • Picture perfect images with the modern element - Stack Overflow Blog: Článek na Stack Overflow Blogu zkoumá možnosti a nejlepší postupy pro práci s moderním <img> elementem, který podporuje různé formáty obrázků a techniky pro responzivní design.

Cheat sheety

Tmavý režim – tipy

SVG ikony

  • It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons: Tento článek zkoumá vývoj ikonových fontů a ukazuje, proč bychom měli dát přednost SVG ikonám. SVG ikony nabízejí lepší škálovatelnost, kontrolu nad barvami a styly, a také lepší podporu pro přístupnost. Navrhuje vyrobit/vyexportovat SVG s definicemi ikon <defs><symbol> a jejich používání přes <use>. Dále tomu říkejme ‚SVG sprite’ příszup.

  • IndigoMultimediaTeam/SVGIcon SVGIcon je moje webová komponenta, která usnadňuje práci s ‚SVG sprite’ příszupem.



1
2



<script>SVGIcon.setAlias("icon", "path/file.svg#")</script>
<svg-icon use="icon-icon_name"></svg-icon>

Ukázka použití SVGIcon

  • star icon: Minimalistická SVG hvězda <svg viewBox="0 0 48 48"><path d="m24 4-6 13-14 1 11 10-3 14 12-7 12 7-3-14 11-10-14-1z"/></svg>.