← Back to WatchStarFork

WSF 43

Published May 19, 2023

News

As Watch/Star/Fork was snoozing away the month of April, browser makers were busy bringing interoperability to several web platform features.

Firefox 112 ships with support for the inert HTML attribute, which disables interaction with the element and excludes it from the accessibility tree. The attribute is now available across all three major browser engines.

Although announced in the release notes, and subsequently picked up by MDN browser compatibility data, CSS exponential functions such as log() and sqrt() don’t seem to have been enabled for this release. (Here’s a handy CodePen by Ana Tudor that checks support for math functions)

Firefox 113 catches up on css-color-4 and css-color-5 functions. The lab(), oklab(), lch(), oklch(), and color() syntaxes, as well as the color-mix() function for combining colors, are now available across engines.

Another win for interoperability is the inclusion of the Compression Streams API, which reduces the complexity of working with compressed data and archives. Read more about Firefox 113 for developers.

Safari 16.4 is a hefty release with several new features. The relative color syntax lets you derive a new color from an existing one:

.overlay {
	background-color: rgb(from black r g b / 0.5);
}

Because it allows math operations with calc(), you can do all sorts of cool things, such as inverting an RGB color:

.warning {
	--bg: yellow;
	background: var(--bg);
	color: rgb(from var(--bg) calc(255 - r) calc(255 - g) calc(255 - b));
}

Other CSS features include the margin-trim property and line-height-derived units lh and rlh. Safari also joins Chromium-based browsers in supporting @property, with which you can describe a custom CSS property more precisely by defining its syntax, default value, and whether it is inherited.

Their addition to Safari 16.4 makes JavaScript import maps supported cross-browser.

JavaScript arrays get two new methods, group() and groupToMap(). These were easy enough to implement, but it’s nice to see them built into the standard library.

For other big-ticket features, see WebKit Features in Safari 16.4.

Safari 16.5 adds support for the CSS nesting syntax, first made available in a stable browser with Chrome 112.

A line in the sand. Rachel Andrews introduces Baseline, an initiative by Google to mark whether web platform features are safe to use from the point of view of interoperability. The label will be rolled out in web.dev articles, across MDN pages, and more. Features become part of Baseline when they are supported in the current and previous version of all major browsers—Chrome, Edge, Firefox, and Safari.

The label seeks to address the very real struggle of keeping up with web platform features in the age of mostly-self-updating browsers. However, as Mathias Schäfer points out in On browser compatibility and support baselines, drawing the line at two-month-old browsers is a rather optimistic definition of “safe to use”.

Articles

CSS

Future CSS: Anchor Positioning, an in-depth exploration with practical use-cases by Roman Komarov. The anchor-name property and anchor() function are currently available in Chome Canary.

Peter-Paul Koch’s Simplified flexbox algorithm is enough to understand about 95% of practical use cases.

Container Query Units and Fluid Typography, a tutorial by Stephanie Eckles on scaling type based on container size.

In Scoped CSS is back, Keith J. Grant explains how @scope declarations work. While CSS nesting (with which scoped styles share some use-cases) is simply syntax sugar for repeated selectors, @scope imposes DOM boundaries on matching elements.

CSS proposals. Rachel Andrews invites feedback on Solving the CSS layout and source order disconnect with the reading-order and reading-order-items properties.

With text-wrap: balance; whetting the appetite for microtypography, there’s now renewed interest in expressing with CSS the preference against exceedingly short final lines in paragraphs. The fun slash challenging part is figuring out its place in the default (greedy) line-breaking algorithm, as well as the role it plays in more sophisticated line-balancing alternatives. In the CSSWG discussion, Amelia Bellamy-Royds proposes the min-last-line property. Richard Rutter riffs on this idea in Preventing too-short final lines of text blocks.

JavaScript, and lack thereof

Sticky Page Header Shadow on Scroll, a short tutorial by Ryan Mulligan on using IntersectionObserver to detect when the page is scrolled.

Thomas Steiner on the origin-private file system, a mechanism for web pages to read and write to an in-browser file system optimized for performance.

JS private class fields considered harmful, warns Lea Verou, due to their incompability with proxies: As a library author, I’ve decided to avoid private class fields from now on and gradually refactor them out of my existing libraries.

A rule of thumb for progressive enhancement, especially useful at the beginning of a project: Your app should work in a read-only mode without JavaScript, says Jeremy Keith in Read-only web apps.

Accessibility

Scott O’Hara makes the case that Visually hidden content is a hack that needs to be resolved, not enshrined.

Two new entries in the Foundations series on the Tetralogical blog: Graeme Coleman describes the different forms of pointer gestures, as well as how and when to provide alternatives for people who can’t perform them. Henny Swan explains the aria-label, aria-labeledby, and aria-describedby HTML attributes for providing accessible names and descriptions.

This year’s WebAIM Million report does not show much progress on the accesibility front, even on those issues that can be automatically detected and easily fixed. Hidde de Vries shows how these most frequent problems can be sorted out: Common accessibility issues that you can fix today and More common accessibility issues that you can fix today. (Via Eric Eggert, who reiterates that We need accessibility action — Now!)

Graphics

Simplifying Bézier paths by Raph Levien: The techniques in this post, and code in kurbo, come close to producing the globally optimum Bézier path to approximate the source curve, with fairly decent performance (as well as a faster option that’s not always minimal in the number of segments).

For her generative art project Ceramics, Charlotte Dann has been releasing technical deep-dives on Creating carved surfaces, Magical vector fields, Realistic ceramic materials, and Handwriting with the Canvas API.

Tools and resources

Reading types. An offshoot of Rosalie Wagner’s research project investigating the role of typography in teaching children to read and write simultaneously, Borel is a charming cursive typeface, released under the Open Font License.

Relatedly: Prima, a typeface family that has been designed to help in learning to read and write by Titus Nemeth and Martin Tiefenthaler, has been released on GitHub under the CC BY-NC-SA 4.0 license.

Intel One Mono is an expressive monospaced font family that’s built with clarity, legibility, and the needs of developers in mind, designed by Fred Shallcrass at Frere-Jones Type. A panel of low-vision and legally blind developers provided feedback at each stage of design.

Legibility: How and why typography affects ease of reading has been released as a digital book. Mary Dyson spent most of her academic life at the renowned Department of Typography & Graphic Communication at the University of Reading (UK). She has dedicated her career to research into reading and typography, writing numerous papers on the subject. In front of you is a digital version of her comprehensive introduction to legibility. It updates and extends existing books summarising contemporary legibility research in an accessible form.

For Your Reference: Books About Signs by Tanya George at the Letterform Archive: From retail branding to wayfinding, sign letters shape our urban landscape. Get a peek at the Archive’s stacks in this first stop on our reference library tour.

Nicholas Rougeux has created a digital version of John Earhart’s The Color Printer: A Treatise on the Use of Colors in Typographic Printing (1892). As we’ve come to expect, there’s also a making-of.

jscanify is an open-source JavaScript mobile document scanner that can detect page contours and correct their perspective. textra is a macOS command-line application that extracts text from images, PDFs, and audio files, using native APIs (via Simon Willison).

Observable Plot, the JavaScript library for exploratory data visualization powered by D3.

Blog post formats for teams, assembled by Giles Turnbull: It might be helpful for teams who want to use a blog to work in the open, but aren’t sure what good blogging looks like.

Modern iOS Navigation Patterns catalogued by Frank Rausch.

Type city. Paris Typography Map, prepared by Production Type for the ATypI 2023 conference.

Bread, all about it. The Sourdough Framework is an open source book dedicated to helping you to make the best possible sourdough bread at home.

On heavy rotation: Radical Romantics by Fever Ray, Glorious Game by El Michels Affair & Black Thought, No Highs by Tim Hecker. Also warming up to the latest National album.