Links
SPA view transitions land in Chrome 111
The View Transition API lets you update the DOM in a single step, while generating an animated transition between the two states. These kinds of transitions were a frequently-requested feature from developers, including me, and I think we've managed to land it in a way that balances good defaults with extensibility and customization. That sounds like we're patting ourselves on the back, but developer feedback was key to the design of this feature. An earlier prototype of this feature was much less flexible, and folks (like you?) who took the time to play with the prototypes and provide feedback triggered a total rethink. Thank you!
Creating a Clock with the New CSS sin() and cos() Trigonometry Functions
There are other trigonometry functions in the pipeline — including
tan()
— so why focus just onsin()
andcos()
? They happen to be perfect for the idea I have in mind, which is to place text along the edge of a circle. That’s been covered here on CSS-Tricks when Chris shared an approach that uses a Sass mixin. That was six years ago, so let’s give it the bleeding edge treatment.
Stretchy Numbers Apple Watch Face via Variable Fonts
I just noticed this morning my Apple Watch has a slick face where tinkering with the knob makes the numbers on the clock face stretch wide and narrow, to rather extreme degrees.
An end to typographic widows on the web
Currently shipping in Chrome Canary, and thus soon to be in Blink-based browsers including Edge, is a relatively new CSS declaration which promises to virtually end typographic widows.
A beginner's guide to manual accessibility testing
Manual accessibility testing means going through your website or software like a real user with a disability would. That means using assistive technology, a keyboard, and zooming to make sure it’s accessible. It can seem intimidating, but once you know how, manual accessibility testing can become quicker and easier.
Videos
Playing With a `blockquote` Using Modern CSS Features
Features like: Native CSS Nesting; Logical Properties;
text-decoration-*
; OKLCH;text-wrap: balance
; Inline SVG background as a data URL;
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.