← Back to Watch/Star/Fork
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
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-5 functions. The
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:
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:
Other CSS features include the
margin-trim property and line-height-derived units
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.
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”.
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
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.
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:
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-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!)
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.
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.
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.