W3C News

A CSS-only, animated, wrapping underline

August 21st, 2020

Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link hovers, another color underlines kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, so multiple backgrounds are used instead, and fortunately, it works with text that breaks across multiple lines…

Leading-Trim: The Future of Digital Typesetting

August 21st, 2020

leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it — including how Microsoft has advocated for it — and that it’s now part of the Inline Layout Module Level 3 spec. You’d use…

Optimize Images with a GitHub Action

August 20th, 2020

I was playing with GitHub Actions the other day. Such a nice tool! Short story: you can have it run code for you, like run your build processes, tests, and deployments. But it’s just configuration files that can run whatever you need. There is a whole marketplace of Actions wanting to do work for you….

Never Build a CSV Importer Again

August 20th, 2020

CSV import as a process is broken. Messy customer data, edge cases, encoding formats, error messages, non-technical users: importing data into applications is a huge pain! Ingesting data has been long neglected as a software product experience, leading to customer frustration and wasted engineering cycles rebuilding what those users already expect to have. It’s a…

A Community-Driven Site with Eleventy: Preparing for Contributions

August 19th, 2020

I’ve recently found myself reaching for Eleventy (aka 11ty) above all other tools when I want to develop a website. It’s hard to beat a static site generator that provides advanced templating opportunities while otherwise getting out of your way and allowing you to just create. One of those sites is Style Stage, a modern…

Timer Bars in CSS with Custom Properties

August 18th, 2020

I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn’t want to see numbers ticking downward; it was more ideal to see a “bar” drain away from full to empty. I mention that because there are tons…

W3C Invites Implementations of CSS Grid Layout Module Level 1 and Level 2

August 18th, 2020

The CSS Working Group has published a Candidate Recommendation of CSS Grid Layout Module Level 2 and an updated Candidate Recommendation of CSS Grid Layout Module Level 1. This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be…

AngularJS LTS Extended in response to COVID-19

August 17th, 2020

Back on July 27th, via the official Twitter account, we announced that in response to COVID-19 the team will extend AngularJS LTS by 6 months. Photo by Mark Thompson Background AngularJS is still an extremely stable framework for building web applications and has millions of developers across the world wide web. Its successor Angular which uses the…

That’s Just How I Scroll

August 14th, 2020

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what it indicates. But…

What I Learned by Fixing One Line of CSS in an Open Source Project

August 14th, 2020

I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I’m always looking to contribute to open source, and I thought this would be a quick and easy fix. Turns out, there was a lot more to it…