W3C News

Additive Animations in CSS

November 3rd, 2020

Daniel C. Wilson explains how with CSS @keyframe animations when multiple of them are applied to an element, they do both works. But if any properties are repeated, only the last one works. They override each other. I’ve seen this limitation overcome by applying keyframes to nested elements so you don’t have to do deal…

DOM Review Draft — Published 18 June 2019 is a W3C Recommendation

November 3rd, 2020

As part of working with the WHATWG together on HTML and DOM, W3C selected today to endorse the WHATWG DOM Review Draft – Published 18 June 2019 as a W3C Recommendation. DOM defines a platform-neutral model for events, aborting activities, and node trees. This is the first endorsed WHATWG Review Draft by W3C.

W3C Workshop Report: Web and Machine Learning

November 3rd, 2020

W3C is pleased to announce a report from the W3C Workshop on Web and Machine Learning, held online in August and September 2020. This report contains a brief summary and collects highlights from the individual sessions, and links to the presentation videos. This first-ever virtual W3C workshop kicked off with the publication of 34 talks…

Gray Burst

November 2nd, 2020

I made this neat little gray burst thing. It’s nothing particularly special, especially compared to the amazing creativity on CodePen, but I figured I could document some of the things happening in it for learning reasons. CodePen Embed Fallback It’s SVG SVG has <line x1 y1 x2 y2>, so I figured it would be easy…

Using Your Own Design System with KendoReact Components

October 29th, 2020

Maybe you’ve already heard of (or even worked with!) KendoReact. It’s popped up in some of my day-to-day conversations, especially those about working with design systems and React. You could think of it as a component library like Bootstrap or Material Design, except the components in KendoReact are far more robust. These are interactive, state-driven…

More on content-visibility

October 28th, 2020

Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out of it, you pair it with contain-intrinsic-size on these big chunks of the page where you…

Comparing Static Site Generator Build Times

October 28th, 2020

There are so many static site generators (SSGs). It’s overwhelming trying to decide where to start. While an abundance of helpful articles may help wade through the (popular) options, they don’t magically make the decision easy. I’ve been on a quest to help make that decision easier. A colleague of mine built a static site…

Comparing Various Ways to Hide Things in CSS

October 27th, 2020

You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique. Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s…

Core Web Vital Tooling

October 26th, 2020

I still think the Google-devised Core Web Vitals are smart. When I first got into caring about performance, it was all: reduce requests! cache things! Make stuff smaller! And while those are all very related to web performance, they are abstractly related. Actual web performance to users are things like how long did I have…

Creating CSS Shapes with Emoji

October 23rd, 2020

CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents — usually text — around those elements to wrap along with the specified shapes. Such a shaped flow of text looks good in editorial designs or designs that work with text-heavy contents to add some visual…