Letem frontendovým světem, vol. 20

Nápověda k rychlosti webu
od PageSpeed.one

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.one 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.one to nejlepší místo, kde začít.

Animace height: auto; v CSS

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, nebo ve videu Enable *NEW* CSS Transitions Behavior.

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

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

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

Výběr předchozích sourozenců s CSS

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.

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

Přístupnost odstavců

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.

<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>

Vylepšené kotvy

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().

SmashingConf Freiburg 2024

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.

Další zajímavosti

• font-size-adjust je nyní podporován ve všech hlavních prohlížečích (Baseline 2024).
• Safari 18.0 přineslo mnoho oprav.
• 10 jednorádkových CSS tipů pro vylepšení téměř každé stránky, 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 nebo v dokumentaci Next.js.
• 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.