W3C News

The CSS Podcast

March 14th, 2020

From Adam and Una at Google, a podcast just about CSS. I believe I’m contractually obliged to link to that! Just one episode out so far, a shorty about the box model. Last time I wrote up podcasts I like was 8 years ago most of them are dead now, except the biggies like This…

How to Make a Line Chart With CSS

March 11th, 2020

Line,  bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG or a JavaScript chart library like Chart.js or a complex tool like D3 to create those charts, but what if you don’t want to load yet another library…

Block Links Are a Pain (and Maybe Just a Bad Idea)

March 10th, 2020

As we noted in our complete guide, you can put an <a href=””> link around whatever chunks of HTML you like. Let’s call that a “block link.” Like you are wanting to link up an entire “Card” of content because it makes a big clickable target. <a href=”/article/”> <!– display: block; –> <div class=”card”> <h2>Card</h2>…

Updated Candidate Recommendation: CSS Speech Module

March 9th, 2020

The CSS Working Group invites implementation of an updated Candidate Recommendation of CSS Speech Module. CSS (Cascading Style Sheets) is a language that describes the rendering of markup documents (e.g. HTML, XML) on various supports, such as screen, paper, speech, etc. The Speech module defines aural CSS properties that enable authors to declaratively control the…

Two First Public Working Drafts for Pronunciation

March 9th, 2020

The Accessible Platform Architectures Working Group has published two First Public Working Drafts today: Explainer: Improving Spoken Presentation on the Web defines a standard mechanism to allow content authors to include spoken presentation guidance in HTML content. Also, it contains two identified approaches and enumerates their advantages and disadvantages. Pronunciation Gap Analysis and Use Cases…

Adventures in CSS Semi-Transparency Land

March 9th, 2020

Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with the same RGB values for the background-color — on top of an image. Something like this: <img src=’myImage.jpg’/> <div class=’over1′></div> <div class=’over2′></div> There was no purpose…

Google Fonts + Variable Fonts

March 7th, 2020

I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference really, except it’s blue instead of red and this one pretty rad checkbox: Show only variable fonts. An option to only show variable fonts is a pretty bold…

What to Use Instead of Number Inputs

March 6th, 2020

You might reach for <input type=”number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers….

Currying in CSS

March 6th, 2020

Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don’t fully understand) and I came across some CSS they show off that looked like this: :root { –fluid-max-negative: (1 / var(–fluid-max-ratio) / var(–fluid-max-ratio)); –fluid-min-negative: (1 / var(–fluid-min-ratio) / var(–fluid-min-ratio));…

Animating CSS Width and Height Without the Squish Effect

March 5th, 2020

The first rule of animating on the web: don’t animate width and height. It forces the browser to recalculate a bunch of stuff and it’s slow (or “expensive” as they say). If you can get away with it, animating any transform property is faster (and “cheaper”). Butttt, transform can be tricky. Check out how complex…