W3C News

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…

CSS in 3D: Learning to Think in Cubes Instead of Boxes

October 23rd, 2020

My path to learning CSS was a little unorthodox. I didn’t start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS were picking colors for things in Visual Studio. It wasn’t until later that I got to tackle and find my love for the front end. And exploring…

First Public Working Draft: WebXR Hand Input Module — Level 1

October 22nd, 2020

The Immersive Web Working Group has published a First Public Working Draft of WebXR Hand Input Module – Level 1. The WebXR Hand Input module expands the WebXR Device API with the functionality to track articulated hand poses.

First Public Working Draft: CSS Custom Highlight API Module Level 1

October 22nd, 2020

The CSS Working Group has published a First Public Working Draft of CSS Custom Highlight API Module Level 1. This CSS module describes a mechanism for styling arbitrary ranges of a document identified by script. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper,…

W3C Launches Initiative to Improve the Web for Merchants

October 21st, 2020

W3C today launched the Merchant Business Group, an open forum to address challenges for customer experiences and business needs using Web technologies. Merchants, integrators, platform providers, and others will discuss how emerging Web technologies could help address customer experience challenges, and what additional Web capabilities may be necessary. The group offers participants an opportunity to…

Smarter Ways to Generate a Deep Nested HTML Structure

October 20th, 2020

Let’s say we want to have the following HTML structure: <div class=’boo’> <div class=’boo’> <div class=’boo’> <div class=’boo’> <div class=’boo’></div> </div> </div> </div> </div> That’s real a pain to write manually. And the reason why this post was born was being horrified on seeing it generated with Haml like this: .boo .boo .boo .boo .boo…

React v17.0

October 19th, 2020

Today, we are releasing React 17! We’ve written at length about the role of the React 17 release and the changes it contains in the React 17 RC blog post. This post is a brief summary of it, so if you’ve already read the RC post, you can skip this one. No New Features The…

Comparing Styling Methods in 2020

October 19th, 2020

Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It’s in the context of Next.js, which is somewhat important as Next.js has some specific ways you work with these tools, is React and, thus, is a components-based architecture. But the styling methods talked about transcend Next.js, and can apply broadly to lots of…

People Problems

October 16th, 2020

Just the other day, Jeremy Keith wrote that problems with performance work aren’t only a matter of optimization and fixing code, but also tackling people problems: It struck me that there’s a continuum of performance challenges. On one end of the continuum, you’ve got technical issues. These can be solved with technical solutions. On the…

Full Bleed

October 15th, 2020

We’ve covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques. Perhaps my favorite is this little utility class: .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } That works…