Around the Frontend World, vol. 22

Animated underline color

Even though animating the text-decoration property itself isn't supported, we can animate "part" of it, specifically text-decoration-color. Using this property, we can achieve a smooth link-underline effect. The key trick is setting text-decoration: underline (yes, even in the non-hover state where we don't want the underline visible) and text-decoration-color: transparent for a transparent underline color. Then, on hover, we animate the change in underline color.

a {
	--color-link: #{variables.$color-link};
	--color-hover: #{variables.$color-hover};
	--color-link-decoration: transparent;
	--color-hover-decoration: var(--color-hover);
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-color: var(--color-link-decoration);
	transition: color variables.$t, text-decoration-color variables.$t;
	-webkit-tap-highlight-color: transparent;
	.hoverevents &:hover {
		color: var(--color-hover);
		text-decoration-color: var(--color-hover-decoration);
	}
}

Contrast checker in DevTools

Insufficient color contrast is one of the most common issues related to website accessibility. But did you know Chrome DevTools can help you not just find this problem, but fix it too? Here's how.

When you open Chrome DevTools and inspect a specific element, a panel with its details appears. As you can see in the image, a green or orange warning icon may appear next to the "Contrast" category — this indicates that the contrast between the text and background of that element isn't sufficient.

In the "Styles" tab, you can do even more. If you click the color swatch next to the color property's value, a color picker opens. Below the color value input field, you'll see a section with contrast information. A red icon flags a problem, and a button with a refresh icon lets Chrome automatically suggest a new color that has the correct contrast and is as close as possible to the original.

A new way to style Google Maps

Remember the original way of styling Google Maps using a JSON color configuration inserted directly into the project? That's mostly a thing of the past now. Styling Google Maps is now done using Map Styles in Google Cloud. There, you create a so-called map ID, to which you assign a map style. You can either configure it manually or paste in the original JSON configuration. You can read more about map styling in the documentation.

Animated gradients using @property

Animating gradients in CSS has long been a challenge. The standard CSS property background-image, where gradients are defined, doesn't support smooth transitions using transition. Any attempt to animate directly within linear-gradient() or radial-gradient() resulted in an instant, jumpy transition between states.

However, thanks to support for the @property rule, it's now possible to register custom CSS properties (custom properties) that the browser treats as specific data types (e.g., <color>, <length>, <percentage>). Most importantly for us, variables defined this way with a defined type become interpolatable, meaning the browser knows how to smoothly transition between their values — in other words, we can apply a CSS transition to them!