Around the Frontend World, vol. 19

EAA 2025
and accessibility

One of the key points of our meetings was the upcoming implementation of the European Accessibility Act (EAA) 2025. This regulation, aimed at improving the accessibility of digital services and products, places emphasis on complying with WCAG 2.2 standards. These standards define how web content should be accessible to all users, including those with disabilities.

Our teams are actively preparing to implement these requirements, and we've already held the first of our planned internal training sessions to make sure all our projects comply with these standards.

New CSS
cap unit

Another interesting piece of news we discussed was the introduction of the cap unit in CSS. This unit, similar to x-height, is based on the cap height of the font and can be very useful when working with icons or typography. The cap unit offers new options for designers and developers who want a more precise and consistent look for their content, especially in cases where it matters to keep proportions consistent between text and graphic elements.

.div {
	--size: 1cap;
	width: var(--size);
	height: var(--size);
	background-color: var(--color-bg);
}

Accessible Web
Components for Videos

As part of our effort to improve accessibility, we also looked into ways to use new web components for embedding videos from platforms like YouTube and Vimeo. These new components could improve the accessibility of our current solution, for example by allowing better playback control for users with different abilities. Part of this discussion also covered how to better integrate these components into our existing systems.

Adrian Roselli wrote more about this in his article.

Resetting
dialog styles

Another topic that caught our interest was an article about resetting the default styles for dialog windows a their backdrop (backdrop). This approach is useful for developers who want full control over the look of their applications, especially when it comes to style consistency across different browsers. Resetting the default styles makes it possible to create a more unified and adaptable user interface that better fits a project's specific needs.

CSS if()

We also presented the new CSS if() concept, considered a groundbreaking technology for applying styles conditionally. This new API, still in an early stage of development, promises greater flexibility when designing dynamic styles. The original article that inspired this discussion describes the introduction of a new if() function in CSS, which lets you embed conditions directly in your styles. This function doesn't replace but complements existing style queries, allowing for example dynamic setting of values based on custom properties or other conditions. if() is designed to simplify working with components that need to define properties at a higher level.

Textarea
Autoresize

The textarea autoresize feature, which automatically adjusts the size of the text field to its content, was another interesting point in our discussion.

field-sizing: content

This feature improves the user experience by eliminating the need to manually resize text fields.

Starting Style:
defining default styles

The new starting style feature offers a way to define a default style for specific HTML elements, which can be useful when working with animations or page-load effects. This approach lets you set a baseline appearance for elements, which can then change based on user interactions or other conditions, contributing to a smoother and more attractive user experience.

[popover]:popover-open {
	opacity: 1;
	transform: scaleX(1);

	@starting-style {
		opacity: 0;
		transform: scaleX(0);
	}
} 

Inputmode for
input optimization

We also introduced the lesser-known inputmode attribute, which lets you specify the type of virtual keyboard shown to the user when interacting with input elements. This attribute is especially useful for optimizing user input on mobile devices, though it's worth noting that its browser support, for example in Safari, is limited. Using inputmode can significantly improve the user experience by simplifying the data entry process.

<input type="text" inputmode="email">

Speculation Rules API:
faster page loading

Another important innovation we discussed is the Speculation Rules API , which enables prefetching a prerendering of web pages. This technology allows pages to load almost instantly once a user clicks on them, which can significantly improve the user experience. This API is especially useful for web applications that need fast access to content.

<script type="speculationrules">
  {
    "prerender": [
      {
        "urls": ["/shop", "/contact"]
      }
    ]
  }
</script>

In simple terms, a page prerendered like this is loaded into memory, and as soon as the user arrives at the page, it can be displayed instantly. That said, this setting needs to be handled carefully. If you're interested in the more detailed specification, visit MDN.

Google Maps API:
new styling options

The last topic covered new options in the Google Maps API, which include styling options and working with regional boundaries (Data-driven styling for boundaries). This API lets developers create custom styled maps with different regions marked, which can be useful for applications focused on geographic data or services. Newly added features, such as advanced markers, allow adding complex HTML elements to maps, expanding the possibilities for interaction and visualization on maps.

In closing

Our meetings are a key tool for sharing news and technological insights in frontend development. I hope this information gives you inspiration and an overview of what's current in our field. We're happy to share our know-how not just internally, but with you, our readers too, so that we can grow and innovate together. If you want to stay up to date on the latest trends and technologies, be sure to keep following us. We're looking forward to our next meetup.