Around the Frontend World, vol. 12

CSS:
@property

The CSS @property at-rule lets you explicitly define a CSS custom property.
Browser support isn't great yet, but we can still show you what it can do:

We can animate a CSS gradient:

More in the article We can finally animate CSS gradient by Temani Afif.

We can use it with Style Queries:

CSS:
forget about clearfixes

If you use floated elements on a website, you need to deal with content overflow. For a long time, this was solved using clearfixes. Now, all you need is this property:

display: flow-root;

You can read more about it in the article Solving Media Object Float Issues With CSS Block Formatting Contexts on Smashing Magazine.

CSS:
box-decoration-break

By adding this CSS property to an inline element, you let certain other properties carry over between the start and end of a line when text wraps: background, border, border-image, box-shadow, clip-path, margin, padding.

box-decoration-break: clone;
-webkit-box-decoration-break: clone;

An example from MDN.

Blur Effect
on video

It's fairly simple code that adds a canvas beneath the video and mirrors the video into it.

The full article Recreating YouTube’s Ambient Mode Glow Effect again on Smashing Magazine, and a demo here:

VS Code:
snippets

Do you keep copying the same bits of code over and over? Stop doing that and start using snippets — adding a new one takes less than 30 seconds. You can define snippets per project or per language. For language snippets, you can either go with a single-language definition, where you have a separate JSON file per language to add your snippets into, or a multi-language definition, where you can add a scope property that defines which language the snippet applies to — otherwise it's available everywhere.

Properties we define:

"snippet name": {
	"prefix": "hello",
	"body": ["<h1>Hello, World!</h1>"],
	"scope": "html",
	"description": "Main heading."
}

You'll find the complete manual here.

Conferences

After .css-day, which we watched online this year and absolutely loved, we're heading to Freiburg im Breisgau on September 4th for SmashingConf and we'll definitely share our experience soon.
P.S.: The .css-day talks we mentioned are now available on YouTubeExternal link 😉