Letem frontendovým světem, vol. 21

Text-box - Konečně kontrola nad mezerami nad a pod textem

Od verze Chrome 133 a Safari 18.2 přichází CSS vlastnost text-box, která umožňuje precizně oříznout prostor nad a pod textem. To znamená snadnější vertikální centrování a lepší vizuální zarovnání elementů jako jsou <h1>, <button>, nebo <span> – a to napříč různými fonty.

Jak to funguje?

Fonty vkládají nad a pod text tzv. half-leading — neviditelný prostor, který si dosud nešlo jednoduše ohlídat. S text-box je konečně možné:

h1 {
  text-box: trim-both cap alphabetic;
}

/* trim-both – ořízne prostor nad i pod textem */
/* cap – horní referenční bod (výška velkého písmena) */
/* alphabetic – dolní referenční bod (běžná linie písma) */

Tímto způsobem můžeme dosáhnout rovnoměrného paddingu bez potřeby "hackovat" hodnoty podle vzhledu na konkrétní platformě.

Syntaxe zahrnuje dlouhý zápis s vlastnostmi text-box-trim a text-box-edge, nebo zkrácený zápis pomocí text-box. Ten je nejčastější a nejpraktičtější pro každodenní použití.

Cody vs. Tabnine: Hlavní rozdíly mezi AI asistenty

V Superkoders používáme doplněk Cody pro automatické doplňování kódu pomocí tabování, což nám umožňuje efektivně kódovat bez potřeby platit za pokročilé funkce, jako je AI chat. Někteří kolegové testují také Cursor, editor založený na VS Code, který integruje AI funkce přímo do pracovního prostředí.

Pro srovnání, Tabnine je alternativní nástroj, který se zaměřuje na personalizované doplňování kódu. Na rozdíl od Cody, Tabnine se učí z vašich konkrétních kódovacích vzorců a nabízí návrhy na míru, od jednotlivých slov po celé bloky kódu. Může být nasazen lokálně, což zaručuje větší bezpečnost a kontrolu nad daty, což je výhodné pro firmy s přísnými bezpečnostními požadavky.

Výhody

• Kontrola nad daty a bezpečností – Kód zůstává výhradně ve firemním prostředí, což zajišťuje vysokou úroveň soukromí a bezpečnosti.
• Lokalizované nasazení – Můžete si vybrat mezi nasazením na vlastní servery nebo v privátním cloudu (VPC), což nabízí flexibilitu v závislosti na infrastruktuře firmy.
• Vlastní modely – Možnost přizpůsobení AI modelů konkrétním potřebám týmu a kódu, což zvyšuje efektivitu a přesnost návrhů.
• Integrace s Jirou – Snadná integrace s Atlassian Jira, což může být užitečné pro správu úkolů a sledování vývoje v týmu.

Nevýhody

• Cena – Lokalizované nasazení není zdarma a může být nákladné, zvlášť pro menší týmy (od 39 USD na uživatele měsíčně).
• Komplexita nasazení – Vyžaduje pokročilé technické schopnosti pro správu a údržbu, což může být časově náročné.

Detekce podpory JavaScriptu pomocí CSS

Pomocí media query @media (scripting: ...) můžeme v CSS reagovat na to, zda má uživatel ve svém prohlížeči povolený JavaScript. Tato vlastnost otevírá nové možnosti pro progresivní vylepšování stylů – bez nutnosti zásahu do HTML nebo JavaScriptu.

@media (scripting: enabled) {
  .my-element {
    /* Styly, pokud je JavaScript povolen */
  }
}

@media (scripting: none) {
  .my-element {
    /* Alternativní styly, pokud je JavaScript zakázán */
  }
}

K dispozici je také hodnota initial-only, která cílí na situace, kdy byl JavaScript dostupný při načtení stránky, ale není dostupný později. To může být užitečné například pro tiskové styly.

Výhody

• Umožňuje stylovat prvky podle toho, zda je JavaScript dostupný, bez nutnosti přidávat třídy typu .no-js do HTML.
• Zjednodušuje fallback řešení pro situace, kdy je JS nedostupný (např. statické verze obsahu, alternativní layouty).
• Hodí se i pro specifické režimy, jako je tisk (např. pomocí hodnoty initial-only).
• Vylepšuje uživatelskou zkušenost snížením nechtěného záblesku neformátovaného obsahu (FOUC, Flash of Unstyled Content).
• Vylepšení přístupnosti: Pro uživatele, kteří mají zakázaný Javascript nebo používají nástroje pro blokování skriptů, scripting: none umožňuje poskytnout alternativní obsah nebo stylování, které bude lépe odpovídat jejich potřebám.

Popover API nyní součástí Baseline

Popover API, které umožňuje jednoduše vytvářet popovery přímo v HTML bez nutnosti psaní JavaScriptu, je nyní oficiálně součástí Baseline od 27. ledna 2025.

Toto API umožňuje webovým aplikacím přidávat popovery, které jsou přístupné a snadno ovladatelné. Před tím, než se dostal do Baseline, byla jeho podpora problematická, zejména kvůli chybě v mobilních verzích Safari, která bránila správnému uzavření popoveru při kliknutí mimo něj. Po opravě této chyby a dalších vylepšeních je nyní API plně kompatibilní s hlavními prohlížeči.

Kdy využít Javascript?

• Zobrazení na hover - zobrazení hoveru po najetí myší lze udělat pomocí CSS, nicméně pomocí JS můžeme řešit případy, kdy nechceme spouštět zobrazení, pokud myší jen v rychlosti přelítneme přes element. Pomocí JS můžeme využít setTimeout a clearTimeout pokud myší z elementu odjedeme, díky čemuž se popover při nevědomém rychlém přejetí přes element ani nezobrazí.
• Pozicování - aby nám popover nevylézal mimo obrazovku, je stále zapotřebí sáhnout po nějakém balíčku, který za nás pozicování (a případné flipování) vyřeší. Příkladem může být třeba Popper nebo FloatingUI.