← Back to WatchStarFork

wsf-xl

Published Feb 16, 2023 · Updated Feb 20, 2023

News

Firefox 110 has been released with support for Container Queries, a monumental feature which has made its way into all major browser engines in a remarkably short time. See the release notes for more.

A surprising, niche feature in this new release is the ability to use CSS named pages for specifying page breaks for printing. A much appreciated signal of interest in Print CSS. Fingers crossed for more! Which reminds me I should probably look into adding Firefox support to Percollate.

Still on the topic of Print CSS, seems that Chrome versions 108 and later print pages using a new layout engine. Morten Stenshorne with a deep-dive on LayoutNG block fragmentation (via Rachel Andrew).

Safari TP 163. The standout feature of this Safari release is the support for CSS masonry layout. The feature has been available for a couple of years in Firefox, under a feature flag.

Also included is a fix for overscroll behavior, specifically that overscroll-behavior: none should be honored on documents that are shorter than the viewport, and thus don't elicit a scrollbar. This will reliably disable the pull-to-refresh behavior introduced in mobile Safari 15:

html {
	overscroll-behavior-y: none;
}

The css-color-4 specification has been adjusted to make parsing color() values stricter: color components can't be omitted for implicit 0 values. With Safari 15 having already shipped with the more permissive syntax, as long as Safari adjusts its parsing before the next stable release [WebKit#251152], we're left with a pretty neat feature sniff for unpreventable pull-to-refresh:

CSS.supports('(color: color(xyz))') && !window.TouchEvent

Catching up. Lots of explainer articles on the WebKit blog recently for features introduced in previous Safari TP releases: Ryosuke Niwa puts Declarative Shadow DOM in context, Jen Simmons invites us to try out CSS Nesting, and Marcos Caceres presents the concept of User Activation.

Articles

Accessibility

Foundations: introduction to WAI-ARIA, a distillation by Henny Swan.

The WCAG 2.2 draft proposes Success Criterion 2.4.11 Focus Appearance, which gives rules for to assessing whether a focus indicator is sufficiently visible. It's a bit hard to parse, especially this phrase:

is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component

In Focus Appearance thoughts, Alastair Campbell offers some clarifications.

In this context, area means painted pixel count, and not a surface area or a particular shape. For a rectangle of 100×25px, a 1 CSS pixel thick perimeter has a painted pixel count of 2 * width + 2 * height = 250px. A 4 CSS pixel thick line along the shortest side has a painted pixel count of 4 * height = 100px.

CSS

CSS Grid Gap Behavior with Hidden Elements by Ryan Mulligan: I was recently prototyping a component layout that included a way to toggle the visibility of sibling elements inside a grid display. What tripped me up was, while these elements were hidden, all of the container's gap gutters remained, leaving undesired extra visual spacing. I expected these gutters to collapse. The reason they stick around is related to explicitly defining grid templates.

Mark Edwards on formulas for optical adjustments: a long-standing trope of the design world is that computers are bad at aligning and balancing the relative scales of elements. This is incorrect. With the recent addition of math functions to the toolbox, a lot of these can be done in CSS, such as sizing images based on their aspect ratio.

Engineering

A Gentle Introduction to CRDTs: What follows is an attempt at distilling all the hard understanding work into a condensed and easy to understand set of reading for a software developer without any background in CRDTs or distributed systems.

Signals are a reactive state primitive, sometimes called observables or refs. They've been recently announced for Preact, but may be useful on their own: At its core, a signal is an object with a .value property that holds some value. Accessing a signal's value property from within a component automatically updates that component when the value of that signal changes. A different article discusses how they were made faster.

From the desk of

Baldur Bjarnason with some thoughts on how to make a book as a self-published author, from editing to producing the digital artifact.

Writing, Riffs & Relationships, Tom Critchlow on a genre of "small-b" blogging that invites conversation: Writing on the internet is a superpower, but it can feel difficult - it can feel heavy. In this post I want to talk specifically about a format for writing that is deliberately designed to be easy to write, while being effective at creating connections (not pageviews).

1979 by Mark Simonson: The digital world has its place. You can do amazing things in it (like publishing a blog post). But don’t spend all your time there. It’s not the real world.

Tools and resources

I've noticed quite a few blog posts this year referencing Julia Cameron and her concept of morning pages. She has a new book out called Write for Life, which may be good. (Despite having carried it in my backpack these past few weeks, I haven't managed to crack open my copy.)

Type Design Resources by Justin Penner is a growing, public, collaborative collection of type design resources. Everything from learning the basics to running your own foundry.

So, you want to build an app that has its data co-located with its UI? That works offline? That synchronizes between clients? And that lets its users own their data? Welcome to the world of Local-First Web Development.

The Government as a Platform Playbook by Richard Pope, a guide to help digital government practitioners implement common digital infrastructure successfully.

Vague, But Exciting, the story of the World Wide Web as told by Jay Hoffmann.

polymath by Samim Winiger: Convert any music library into a music production sample-library with ML.

Bundle Scanner by Markus Englund will fetch every Javascript file from the website and search through the files for code that matches any of the 101,962 releases it has indexed from 35,003 of the most popular npm libraries on the web.

MagentaA11y, an accessibility tool to automatically generate test cases for Web, iOS and Android components, originally made by Charlie Triplett.

Kirby + Eleventy. Bastian Allgeier, creator of the Kirby CMS, has shared a couple of demo setups for pairing the two: eleventylab is an experimental 11ty setup that reads from Kirby's content folder, while eleventykit uses Kirby as a headless CMS. The latter is used in the Headless Kiosk Application guide.

Dispatches from the itch-scratching club. The front-matter data of several hundred Markdown files needed to be reorganized beyond what could be achieved with search and replace. yq seemed up to the task, but it shares its syntax with jq — which, despite my long-standing admiration for the tool, I have not been able to grok to any useful extent. So I built yamatter, a command-line tool that lets you transform YAML front-matter data via JavaScript functions. Give it a try.

Today I learned

Color me surprised

Sagely nodding through the very entertaining Writing The Perfect RGB Regex And Failing with my you know, I'm something of a RGB regex writer myself hat on, I realized midway through that culori.js may be failing on a few of the more exotic patterns afforded by the CSS parsing algorithm:

CSS.supports('color: rgb(1-2-3)') // => true
culori.parse('rgb(1-2-3)')  // => undefined

Huh, back to the drawing board.

When life gives you Menlos

The font-family: monospace declaration tells the browser to reach for its default fixed-width typeface. On macOS that's Menlo in Firefox and Courier in Chrome. In Safari it's, interestingly and intentionally, either Menlo or Courier, depending on the lang attribute of the element being styled.

Another quirk is that elements styled with font-family: monospace get their font size scaled by a ratio of typically 0.8125. With the default browser style, in the markup below, the <p> will have a computed font size of 16px, while the <code> just 13px, despite the font-size: 1em declaration:

<p>The results are saved to <code style='font-size: 1em'>localStorage</code>.</p>

The story of how that ended up being the case is old and meandering — and if I ever knew it I've long purged it from memory. For the curious, an article from 2010 by Eric Meyer points to resources further back in time. Suffice to say you can opt out of the font-size quirk by putting anything before the generic monospace family:

font-family: Menlo, monospace;

The veil is lifted: Menlo is actually huge. To bring back the familiar style, re-apply the 0.8125 magic ratio.

kbd, samp, pre, code {
	font-family: Menlo, monospace;
	font-size: 0.8125em;
}

pre code {
	font-size: 1em;
}

Making fonts play nice together

The legacy style (0.8125em) works well for Menlo, whose metrics are on the large side, but it's less flattering for Courier or other fixed-width fonts. What works for one font may not work for others down the font stack.

That's where CSS properties to fine-tune the used value of font-size come in. That means making the text visually larger or smaller without altering its computed size, or the value of 1em.

Browser support for these properties is uneven but we can use them today, as a treat.

You can scale the glyphs of a particular font with @font-face/size-adjust. This is widely supported, but not very robust. A more sophisticated approach is to keep the text visually uniform, regardless of the font that gets picked from the font stack. That's the purpose of the font-size-adjust property, which sounds similar, but has different semantics.

Pair those with CSS properties that override other font metrics — ascent-override, descent-override, and line-gap-override — and, as Katie Hempenius explains, you have a comprehensive recipe for improved font fallbacks.

Soundtrack: El Michels Affair & Black Thought — Grateful