Around the Frontend World, vol. 13

CSS:
round()

CSS keeps evolving, and new features keep landing in it. Right now, rounding is coming to CSS.
Round() works similarly to Math.round() in JavaScript.
You'll find a nice article covering all the CSS rounding options here.

Full support across all browsers is still missing, so round() only works in Safari for now 😉.

A table using the
View Transition API

On X (Twitter) we noticed a nice example of using the View Transition API to add or remove table rows.

It looks like magic.

View Transition API makes it easy to change the DOM in a single step and create an animated transition between two states. It's available in Chrome and Edge from version 111 onward, and in some other browsers.

You can read more about this feature from Jake Archibald in his article.

The “safe triangle”
for context menus

An article, that shows how to solve unwanted submenu closing using so-called safe triangles in context menus. The article describes two versions: a simpler one that uses classic straight-sided triangles, and a more complex one where you also smoothly change the hover area using a curve.

Scroll shadow
with just CSS

Using the CSS animation-timeline property, it'll be possible in the future to add a shadow/fade to the edge of scrollable elements. We're really looking forward to this native CSS feature. Support is unfortunately still weak for now.

You can check out the demo on Codepen.

CSS
Reset

There are plenty of CSS resets out there. This one isn't even new, but what's interesting is its use of a few special constructs.

For example, a container for IMG, or resetting certain basic HTML tags using :where(:not()) to achieve low specificity for subsequent styling.

Do you use the :where(:not())??

See you again next month.