wsf-xlii
News
Firefox 111, out tomorrow, adds support for the remaining css-color-4
color spaces: lab()
, lch()
, oklab()
and oklch()
, as well as the color()
syntax for the entire set of predefined spaces. As per the release notes, this feature is behind the layout.
flag.
The release also includes support for the origin-private file system.
Chrome 111. In addition to the CSS color features mentioned in a previous issue, the release includes initial support for CSS View Transitions, as explained by Jake Archibald.
With this Chrome release, trigonometric functions in CSS are now supported across major browser engines. Practice them by creating a clock with the new CSS sin()
and cos()
trigonometry functions with Mads Stoumann.
Chrome 113, currently Canary, ships behind the Experimental Web Platform features flag support for text-wrap: balance
, which wraps text into lines by taking into account the entire element content, to produce lines of similar lengths. It’s meant for small runs of text, such as headings or captions, where the effect is desirable.
The exact algorithm for line balancing is left for browsers to decide. Because it’s expected to have greater time complexity than usual (greedy) wrapping, browsers are allowed to bail out of line balancing for texts longer than ten lines. A separate value, text-wrap: pretty
, is meant for opting into more sophisticated line-breaking for long texts. Together, these values may spell, as Richard Rutter observes, an end to typographic widows on the web.
Still behind the Experimental Web Platform features flag in Chrome Canary 113 you’ll find anchor positioning, which lets you stick elements next to other elements. Jhey Tompkins explains in Tether elements to each other with CSS anchor positioning.
Deno 1.31 has been released with support for package.json
, and other improvements to Node and npm compatibility that simplify migration to the new runtime.
Articles
CSS
Develop an intuition on The Rules of Margin Collapse with interactive illustrations by Josh W. Comeau. The margin-trim
property, available in the upcoming Safari 16.4, can remove margins where elements meet their container, so that’s one collapse scenario fewer to think about.
Šime Vidas with Everything You Need to Know About the Gap After the List Marker, on working with the limited set of styles accepted by the ::marker
pseudo-elememt.
Some simple ways to make content look good, a primer on styling long-form text by Andy Bell.
Accessibility
In My ideal accessible components resource is holistic, well tested and easy to use, Hidde de Vries outlines what to aim for in materials that teach people how to build the accessible web-beyond-documents. The gist of it is: make it easier for people to get accessibility right. And the opposite, too: make it harder to get it wrong.
The article points to several great resources.
Speaking of which, Evolving custom sliders by James Edwards demonstrates a hybrid technique for creating custom sliders, combining the accessibility and usability benefits of a native range input, with the markup and design flexibility of a pure custom slider
.
JavaScript
Draggable objects, a great deep-dive by Amit Patel on combining DOM mouse and touch events to move things on the screen.
With the occasion of Firefox 108 having shipped support for <script type=importmap>
, Yoshi Huang with a two-part explainer of JavaScript Import maps: the Introduction, followed by an In-Depth Exploration.
Making software
Upwelling: Combining real-time collaboration with version control for writers, a new Ink & Switch prototype and essay by Karissa Rae McKelvey, Scott Jenson, Eileen Wagner, Blaine Cook, and Martin Kleppmann. In the Upwelling project we have built an experimental editor that aims to satisfy the needs of professional writers and editors. It allows co-authors to collaborate in real time when they wish to, but it also supports work on private drafts that can be shared and merged only when their authors are ready. By combining elements of real-time collaboration with ideas from version control systems, Upwelling supports writers in maintaining their creative privacy and editors in ensuring accurate results.
Write a First Person Game in 2KB With Rust with Grant Handy: My goal here is to show how something that looks complicated can be broken down into simple pieces, and if I’ve done my job right, it should feel like you’ve discovered how the game works.
Reading, writing, process
I doubled-down on RSS: Eric Bailey meditates on the experience of going through his Twitter network to subscribe to people’s blogs. It’s peppered with bits of insight ranging from tips on providing and surfacing feeds, to the effort of explaining the quirks of RSS when trying to get people on board, and more.
The Memindex Method, Chris Aldrich on an early precursor of the Memex, Hipster PDA, 43 Folders, GTD, BaSB, and Bullet Journal systems
from 1906 (via SM).
From Paper to Screen: The Digital Capture of Lettering, Typography, Printmaking, and Graphic Design, a glimpse at the tools and process by April Harper, digitization librarian at the Letterform Archive.
Tools and resources
Shantell Sans, an open-source, marker-style font based on the artwork, handwriting, and creative philosophy
of artist Shantell Martin, designed in collaboration with Stephen Nixon of Arrow Type. This is the type design studio’s second open-source release, after Recursive.
PWA for Beginners, a 17-chapter video series by Beth Pan and her team at Microsoft that walks you through building your own Progressive Web Apps that can run cross platforms and combine the best of web and native features
. Also available as a YouTube playlist.
ThemeShaper, a blog by the Automattic Theme Team where we publish experiments, write about web design, WordPress themes, show-off our custom in-house themes, share team news and announcements, and explain what we’re all about
. New to me, despite being published since, erm… 2008? (via Ganesh Dahal)
Today I learned
In The Web Needs a Native .visually-hidden
, Ben Myers provides a few ideas on how to express that more semantically in HMTL or, ideally, CSS.
I wanted to understand if there really is a need for another display
or visibility
value or a new property altogether. Wasn’t there something already specified that could work just as well? I started from the discussion opened by Sara Soueidan.
At the ARIA level, there is technically aria-hidden="false"
, which would cause the element to be exposed to the accessibility API as if it was rendered.
Beyond objections in principle, the biggest practical hurdle with that seems to be that authors have misused it beyond the point of salvageable.
At the CSS level, speak: always;
would override the effect of display: none;
and visibility: hidden;
and can result in the element being rendered in the aural dimension even though it would not be rendered on the visual canvas
. Although I don’t have a mental model of how that would work out in practice, it remains a plausible mechanism.
Finally, there’s the idea that the technique is overused to the detriment of more appropriate solutions, which raises the question of whether a dedicated web platform feature would be a net positive addition [whatwg/html#4623].
On slack. Jenny Odell's new book, Saving Time: Discovering a Life Beyond the Clock, is out this month.
Soundtrack: Constant Smiles — Kenneth Anger