Archiv autora: Nothrem

Prvek skrytý pomocí HTML5

HTML5 má jednu „skrytou“ vlastnost, o které se moc nemluví. Částečně proto, že pro nováčky je trochu matoucí a pro zkušení kodéry víceméně zbytečná. Mluvím o vlastnosti (atributu) hidden („skrytý„), který můžete nastavit na libovolný prvek a ten se pak bude chovat stejně jako s display:none.

V čem spočívá její smysl (a dalo by se říct i nesmysl)?

Pokračování textu Prvek skrytý pomocí HTML5

Jak používat kontejnerová pravidla pro vytváření responzivních komponent

Od počátku bylo základem responzivního webu CSS pravidlo @media. Jejich nevýhoda ale je, že určují použitá pravidla podle velikosti obrazovky zařízení. Díky snaze několika designérů a vývojářů ale můžeme od roku 2022 používat i kontejnerovou podmínku @container, která naopak určuje responzivní styl podle místa dostupného pro konkrétní DOM prvek (tzv. kontejner).

Pokračování textu Jak používat kontejnerová pravidla pro vytváření responzivních komponent

Jaké použít obrázky v roce 2021?

Odpověď na otázku v titulku je velmi jednoduchá: AVIF a WEBP obrázky. Chcete vědět víc?

Tento článek navazuje na starší Jak na průhlednost obrázků? z roku 2015, který již není aktuální kvůli tomu, že popsané formáty obrázků již nejsou relevantní hlavně kvůli tomu, že všechny prohlížeče již podporují formát WEBP.

Pokračování textu Jaké použít obrázky v roce 2021?

Testování IE11 v Edge

Od verze Microsoft Edge 78, tedy v novém Edge postaveném na jádře Chromium, můžete konkrétní stránky spustit v režimu Internet Exploreru 11 (IE Mode), takže se stránka bude renderovat pomocí Trident jádra.

Tento režim vám umožní používat stránku stejně, jako byste ji používali v IE11, aniž byste museli přepínat do jiného prohlížeče.

Stránka bude používat CSS a JS tak, jak by to dělalo IE11 a také bude moci používat ActiveX a další prvky starých Enternet Explorerů a zároveň (v omezené míře) používat nová rozšíření.

Na druhou stranu IE mode lze zapnout pro konkrétní domény, které pak nepůjdou zobrazit v Chromium jádře, takže nemůžete své stránka současně testovat v IE11 a novém Edge.

Nový Edge sice obsahuje staré Trident jádro, ale již neobsahuje debugger F12, takže stránku sice zobrazíte, ale nebudete v ní moci zobrazit DOM ani CSS, ladit skripty a prohlížet konzoly.

Pokud tedy potřebujete stále vyvíjet a ladit webové stránky pro Internet Explorer, budete muset stále používat samostatný IE11.

Pokud ale máte naopak starý web, který je odladěný pouze pro Internet Explorer, není již potřeba nutit vaše uživatele používat IE11 a stačí nastavit v Edge domény, které mají používat IE mode.

Jak na lepkavé (Sticky) prvky

Jistě znáte CSS vlastnosti position a její hodnoty absolute a fixed. Ty byly před příchodem CSS Flexboxu a Gridu prakticky jedinou možností, jak umístit hlavičku a/nebo patičku stránky tak, aby nezmizela po tom, co uživatel posune obsah.

Nová hodnota sticky (česky lepkavý, nebo též otravný) umožňuje přilepit prvek k okraji okna, bez toho, aby tam byl trvale umístěný.

Pokračování textu Jak na lepkavé (Sticky) prvky

Rychlost zpracování změn CSS

CSS styly musejí reagovat na celou řadu změn ve stránce, ať už je to akce uživatele (:hover či :focus) nebo programové změny (class či přidání DOM prvků). A zatímco některé změny jsou pro prohlížeč hračkou (např. změna barvy rámečku), tak nad některými musí strávit dlouhý čas, aby je do stránky přidal (např. změna šířky rámečku z 1px na 2px).

Pokračování textu Rychlost zpracování změn CSS

Logické vlastnosti

Pokud jste již používali Flexbox a/nebo Grid, jistě jste si všimli, že místo hodnot jako align:top nebo align:left používají hodnoty start a end. To je proto, že tyto nové návrhy již byly vytvořeny s přihlédnutím na logické vlastnosti místo dříve používaných fyzických vlastností.

A stejně jako Flexbox a Grid dochází k postupnému zavádění logických vlastností u dalších definic jako je padding, margin, text-align, atd.

Pokračování textu Logické vlastnosti

Posun obsahu se zachytáváním

Když uživatel posouvá stránku, málokdy se mu povede, že posun skončí přesně na začátku odstavce nebo obrázku, což pak zhoršuje UX (dojem ze stránky). Do teď se podobné situace řešili pomocí javaskriptu, ale kombinace JS a skrolování většinou UX ještě zhorší.

Díky nové CSS specifikaci Scroll snap můžete tyto situace vyřešit automaticky jen pomocí CSS definice.

Pokračování textu Posun obsahu se zachytáváním