Around the Frontend World, vol. 20

Website Speed Help
from PageSpeed.one

Website speed is a complicated, complex topic. There's a whole range of optimizations that can help speed up your site. But it's fairly tricky to find your way around them and use them correctly. As is often the case in web development, even a small, uncontrolled change can cause a disaster.

That's why we're really glad that PageSpeed.one is opening up their know-how through their website speed help center. You might think it's just documentation for their monitoring tool, but that's far from the truth! They also document knowledge about metrics, optimizations, and other website speed topics.

• Want to learn something about Core Web Vitals?
• Not sure how to convince your boss why speed matters?
• Or do you want to learn optimizations ranging from simple ones, like native image lazy loading, to complex ones, like splitting up long JavaScript tasks using setTimeout?

? Then PageSpeed.one's help center is the best place to start.

Animating height: auto; in CSS

The new Chrome 129 brings the interpolate-size property and the calc-size() function, which enable smooth transitions and animations between fixed values and keyword-defined values like auto, min-content, max-content, and fit-content.

. This functionality has been long-awaited, but its implementation may still change, as confirmed by the removal of support for calc-size(auto). You can learn more about this functionality in the article Animate to height: auto; (and other intrinsic sizing keywords) in CSS, or in the video Enable *NEW* CSS Transitions Behavior.

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

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

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

Selecting previous siblings with CSS

Another big piece of news now available in all major browsers is the ability to reach preceding elements using the :has() selector. This selector is demanding on performance though, so it's worth using it thoughtfully. You can find more information in an article by Chris Coyier on Frontend Masters.

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

Paragraph accessibility

Do you always use the <p> tag to wrap text? HTML offers multiple ways to define paragraphs – implicit paragraphs are created, for example, with every new block of text, such as <div>, <ul>, or <section>. That doesn't mean, though, that <p> shouldn't be used. Sometimes you don't have full control over the input data, so it's important to focus on proper code structure and its semantics. And what about ARIA attributes? You can learn more on Scott O'Hara's blog.

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

Improved anchors

Will Boyd published an article, Anchor Links and How to Make Them Awesome, covering modern techniques for better styling and functionality of anchors.

He recommends, for example, the scroll-behavior attribute for smooth page scrolling, and scroll-padding-top to define the gap between the top of the screen and the anchor target. For horizontal offset, you can use scroll-padding-inline.

A lesser-known but useful technique is using the :target pseudo-class, which lets you style an anchor's target element if its ID is present in the URL. In JavaScript, similar behavior can be achieved with the scrollIntoView().

SmashingConf Freiburg 2024

In early September, the Smashing Magazine-organized frontend conference was held, as usual, in Freiburg, Germany. We attended last year too, and found it really inspiring. This year's main themes were accessibility, design systems, and UX, but of course AI made an appearance too. The talks are already available online on YouTube.

More interesting bits

• font-size-adjust is now supported in all major browsers (Baseline 2024).
• Safari 18.0 brought a lot of fixes.
• 10 One-Line CSS Tips to Improve Almost Any Page, text-wrap: balance; of course couldn't be missing.
• An example of generating Open Graph images in Next.js in Alex Sidorenko's post or in the Next.js documentation.
• Using transition-delay when animating with z-index or display is explained by Kevin Powell in the video Easy fix for a very annoying z-index issue.