W3C News

A Guide to the Responsive Images Syntax in HTML

May 26th, 2020

This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). The responsive images syntax is about serving one image from multiple options based on rules and circumstances. There are two forms of responsive images, and they’re for two different things: If your only goal is… Increased…

Authorized Translation of WCAG 2.1 in Dutch

May 26th, 2020

Today W3C published the Authorized Dutch Translation of Web Content Accessibility Guidelines (WCAG) 2.1, Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) 2.1. The Lead Translation Organization for this Authorized Translation was the Accessibility Foundation. Translations in other languages are listed in WCAG 2 Translations. W3C Web Accessibility Initiative (WAI) particularly encourages the development of Authorized Translations…

Using Structured Data to Enhance Search Engine Optimization

May 26th, 2020

SEO is often considered the snake oil of the web. How many times have you scrolled through attention-grabbing headlines on know how to improve your SEO? Everyone and their uncle seems to have some “magic” cure to land high in search results and turn impressions into conversions. Sifting through so much noise on the topic…

June 2020 Security Releases Node.js

May 26th, 2020

SummaryThe Node.js project will release security updates to all supported release lines on or shortly after Tuesday, June 2nd, 2020.
The highest severity fix will be "High".
ImpactAll supported versions (10.x, 12.x, and 14.x) of Node.js are v…

First Public Working Draft: CSS Box Sizing Module Level 4

May 26th, 2020

The CSS Working Group has published a First Public Working Draft of CSS Box Sizing Module Level 4. This module extends the CSS sizing properties with keywords that represent content-based “intrinsic” sizes and context-based “extrinsic” sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. This…

Block Links: The Search for a Perfect Solution

May 25th, 2020

I was reading this article by Chris where he talks about block links — you know, like wrapping an entire card element inside an anchor — being a bad idea. It’s bad accessibility because of how it affects screen readers. And it’s bad UX because it prevents simple user tasks, like selecting text. But maybe…

How to Convert a Date String into a Human-Readable Format

May 25th, 2020

I’ll be the first to admit that I’m writing this article, in part, because it’s something I look up often and want to be able to find it next time. Formatting a date string that you get from an API in JavaScript can take many shapes — anything from loading all of Moment.js to have…

Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages

May 22nd, 2020

Apple is well-known for its sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open, and iPhones spin, all while showing off the hardware, demonstrating the software and telling interactive stories of how the products are used. Just check out this video of…

The Fastest Google Fonts

May 22nd, 2020

When you use font-display: swap;, which Google Fonts does when you use the default &display=swap part of the URL, you’re already saying, “I’m cool with FOUT,” which is another way of saying web text is displayed right away, and when the web font is ready, “swap” to it. There is already an async nature to…

Flexbox-like “just put elements in a row” with CSS grid

May 21st, 2020

It occurred to me while we were talking about flexbox and gap that one reason we sometimes reach for flexbox is to chuck some boxes in a row and space them out a little. My brain still reaches for flexbox in that situation, and with gap, it probably will continue to do so. It’s worth…