Letem frontendovým světem, vol. 20

Rychlost webu je složité a komplexní téma. Existuje celá škála optimalizací, které pomohou zrychlit váš web. Je však poměrně složité se v nich orientovat a správně je využít. Jak to ve webovém vývoji bývá, i drobným nekontrolovaným zásahem lze způsobit katastrofu.

Proto jsme moc rádi, že PageSpeed.cz otevírá své know‑how prostřednictvím nápovědy k rychlosti webu. Mohlo by se zdát, že slouží jen jako dokumentace jejich nástroje pro monitoring, ale opak je pravdou! Dokumentují také znalosti týkající se metrik, optimalizací a dalších témat o rychlosti webu.

• Chcete se dozvědět něco o Core Web Vitals?
• Nevíte, jak přesvědčit šéfa, proč je rychlost důležitá?
• Nebo se chcete naučit optimalizace od jednoduchých, jako je nativní lazy loading obrázků, až po složité, jako je rozdělování dlouhých javascriptových úloh pomocí setTimeout?

Pak je nápověda od PageSpeed.cz Externí odkaz to nejlepší místo, kde začít.

Nová verze Chrome 129 přináší vlastnost interpolate-size a funkci calc-size(), které umožňují plynulé přechody a animace mezi pevnými hodnotami a hodnotami určenými klíčovými slovy, jako je auto, min-content, max-content, a fit-content.

Tato funkcionalita byla dlouho očekávaná, ale její implementace se ještě může měnit, což potvrdilo i zrušení podpory calc-size(auto). Více se o této funkcionalitě dozvíte v článku Animate to height: auto; (and other intrinsic sizing keywords) in CSS Externí odkaz , nebo ve videu Enable *NEW* CSS Transitions Behavior Externí odkaz .

:root {
    interpolate-size: allow-keywords; /* 👈 */
}

.item {
    height: auto; /* 👈 */

    @starting-style {
        height: 0px;
    }
}

Další velkou novinkou dostupnou ve všech hlavních prohlížečích je možnost přístupu k předchozím prvkům pomocí selektoru :has(). Tento selektor je však náročný na výkon, takže je dobré ho používat s rozumem. Více informací najdete v článku od Chrisa Coyiera na  Frontend Masters Externí odkaz .

.card {
	/* previous card */
	:has(+ &) { }
	/* previous card before that */
	:has(+ * + &) { }
}

See the Pen Card Row by Chris Coyier (@chriscoyier) on CodePen.

Používáte vždy k obalení textu tag <p>? HTML nabízí více způsobů, jak definovat odstavce – implicitní odstavce vznikají například s každým novým blokem textu, jako jsou <div>, <ul>, nebo <section>. Neznamená to však, že by se <p> neměl používat. Někdy nemáte nad vstupními daty plnou kontrolu, a proto je důležité klást důraz na správnou strukturu kódu a jeho sémantiku. A co ARIA atributy? Více se dozvíte na  blogu Scotta O'Hara Externí odkaz .

<div>
	Tento blok textu obsahuje důležité informace a následuje po něm seznam:
	<ul>
		<li>První položka</li>
		<li>Druhá položka</li>
	</ul>
	Text pokračuje po seznamu a uzavírá dané téma.
</div>

Will Boyd publikoval článek Anchor Links and How to Make Them Awesome, který přináší moderní techniky pro lepší stylování a funkčnost kotev.

Doporučuje například atribut scroll-behavior pro plynulé posouvání stránky a scroll-padding-top pro určení mezery mezi horním okrajem obrazovky a cílem kotvy. Pro horizontální posun lze použít scroll-padding-inline.

Méně známá, ale užitečná technika je využití pseudo-třídy :target, která umožňuje stylovat cílový prvek kotvy, pokud je jeho ID uvedeno v URL. V JavaScriptu lze podobné chování dosáhnout metodou scrollIntoView().

Na začátku září se tradičně v německém Freiburgu konala frontend konference pořádaná Smashing Magazine. Minulý rok jsme ji navštívili i my a pořádně nás inspirovala. Tento rok byla hlavními tématy přístupnost, designové systémy a UX, ale samozřejmě nechyběla ani AI. Přednášky jsou již k dispozici online na  YouTube Externí odkaz .

• font-size-adjust je nyní podporován ve všech hlavních prohlížečích (Baseline 2024).
• Safari 18.0 Externí odkaz přineslo mnoho oprav.
• 10 jednorádkových CSS tipů pro vylepšení téměř každé stránky Externí odkaz , text-wrap: balance; samozřejmě nesmí chybět.
• Ukázka generování Open Graph obrázků v Next.js v  příspěvku Alexa Sidorenka Externí odkaz nebo v  dokumentaci Next.js Externí odkaz .
• Použití transition-delay při animaci pomocí z-index nebo display vysvětluje Kevin Powell ve videu Easy fix for a very annoying z-index issue Externí odkaz .