Frontend News from 2023

First, we'll take a look at the Baseline widget, which makes it much easier to track the rollout of new features across browsers, and then we'll go through a list of the best additions to CSS and HTML. Next up is State of HTML, the new sibling of State of JS and State of CSS. These surveys help us keep an eye on upcoming trends in the web development ecosystem. Finally, we'll take a quick look at what changed in web performance and accessibility.

I've packed the text with plenty of links to demos and further reading, which I'd recommend not skipping.

Baseline 2023

Let's start with the Baseline widget, since from then on you'll always know which new features are already safe to use. Baseline reports on full support for a given feature across major browsers and their mobile versions.

The widget defines two phases of a feature's rollout: the first, when it's supported across all major browsers (marked with the year support began), and the second, once it's been fully supported for 30 months (widely available).

Right now you can use Baseline on MDN a Can I Use.

And now, on to what's new.

The :has() selector

The first and definitely biggest piece of news was the relational selector :has(). It grabbed the most attention early on mainly because it can be used as a parent selector h1:has(+ p) {}. And the frontend community had been waiting a really long time for that.

But that's not its only use — inside the parentheses you can write any relative selector, combine it with other selectors, and use it to query things like sibling elements, or even for filtering.

You'll find plenty of examples and links on how to use it in an article on Vzhůru dolů The relational selector :has – far more than just a parent selector, or in a talk by Jhey Tompkins from CSSDay '23, Supercharge your skills with creative coding Vol IX: You :has the power..

@container queries

Container queries let us query the container directly above a component that we want to change dynamically based on the container's size. That's a big difference from media queries, and it was sorely missing when building components. While with media queries it's clear what the size is calculated from, with container queries you first need to define the container using container-type.

Style container queries

Container queries can evaluate not just size but also the container's styles. On top of that, using the @property CSS rule we can set the syntax for CSS variables (demo).

CSS nesting

CSS nesting, which we know from CSS preprocessors, significantly improves the readability, modularity, and maintainability of templates. In the end, it also reduces the size of the resulting CSS files.

Just like with Sass or Less, you can use the &.

.a {
	/* styles for element with class="a" */
	.b {
		/* styles for element with class="b" which is a descendant of class="a" */
	}
	&.b {
		/* styles for element with class="a b" */
	}
}

CSS subgrid

Subgrid extends the grid's capabilities so that a child creates a nested grid – a "subgrid" – which automatically inherits the grid definition of the parent container. We most often run into this when aligning the individual parts of product cards in a product listing. You can find more information about subgrid on the website Vzhůru dolů.

Popover

The popover attribute addresses default display behavior for non-modal pop-up windows. An element with the popover attribute is hidden by default using display: none. Popovers can be styled, targeted by class, and so on. Full manipulation of the object via JavaScript is enabled by the Popover API.

You can check out simple usage examples on the MDN website.

Unlike the HTML <dialog> element, which has had full browser support since 2022, here we're still waiting on Firefox 124 (released March 19, 2024).

Even more news from 2023

• Shorthand syntax in media queries. The last browser to adopt it was Safari, in version 16.4.
• The inert attribute is used to disable the interactivity of elements on a page. When an HTML element has the inert attribute, you can't perform normal interactions on it, such as clicks or focus.
• New color spaces and functions in CSS.
• Lazy loading on iframes. Here we'd been waiting a long time for support from Firefox and Safari.
• More precise definition of animation timing curves using the linear() function.
• CSS math functions like calc(), min(), max(), and clamp() have been extended with trigonometric functions such as sin(), cos(), and others.
• The pseudo-selectors :user-valid and :user-invalid, which help with validating form fields after the user has interacted with them.
• A select element with horizontal separators <hr />...

…and plenty more content can be found in a wonderful article, CSS Wrapped: 2023! by Una Kravets, Bramus & Adam Argyle, published just before Christmas.

State of HTML

Alongside the State of CSS a State of JS projects, which analyze trends and developments in the frontend world, last year a new one joined them: State of HTML. The results of these surveys give us a comprehensive view of how certain technologies and practices are perceived and used within the developer community. Putting together the first edition was taken on entirely by Lea Verou. Just like with State of JS, though, we'll still have to wait a few more days for the results.

Web performance

Lighthouse 10 came out early in the year, bringing with it a major change to how the Lighthouse Performance Score (LPS) is calculated. The Time To Interactive (TTI) metric is gone, and 10% of the overall score shifted to the Cumulative Layout Shift (CLS).

Another change is coming to Core Web Vitals too, where the First Input Delay (FID) metric will be replaced by Interaction to Next Paint (INP). With this step, Google wants to tighten up the metric around web interactivity. This change was announced well in advance, for March 2024, to give everyone enough time to optimize.

The metric Largest Contentful Paint (LCP) also got an update, in which images with low information value are now excluded from scoring, to prevent them from being exploited by various "LCP hacks".

Accessibility

In October, a new update to the WCAG web content accessibility guidelines was released after 5 years, specifically version 2.2. It focuses mainly on making navigation and interaction more accessible. One notable change is the removal of the "Parsing" criterion, reflecting browsers' ability to correctly interpret even invalid HTML code. You can read more about it on WCAG 2.2 Is Here (Finally): 4 Takeaways.

For better accessibility testing, Browserstack released a new DevTools extension, the Accessibility Toolkit. Accessibility Toolkit.