CSS Layout News - Issue 310

Despite the fact that last week seemed to have at least 426 days, it is once again Tuesday. This week I've got a fairly eclectic collection of layout adjacent things, covering accessibility, internationalization, improvements in browsers, plus a proposal for a new CSS feature.

Rachel Andrew

News

Release Notes for Safari TP 127

A few interesting bits in here, however, I'm happy to see animation support for grid-template-rows and grid-template-columns coming into Safari.

Learn

rtl.wtf

This is great. A site with loads of information about right-to-left languages, and how to create better experiences for people who experience the web RTL.

TablesNG in Chromium

Bramus writes about some of the key things enabled by the work on TablesNG.

Using CSS to enforce accessibility

A post with examples, and links to further posts on the subject. Some good suggestions in this post, including a roundup at the end of problems that come with trying to take this approach when using Tailwind.

Overlay Fact Sheet

Overlays are a broad term for technologies aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website.

This site explains why accessibility overlays are problematic. It's not layout, but perhaps some of you might find yourself in a situation where such a solution is being proposed. Find the arguments you need against the things here.

Ready-made counter styles

A collection of over 100 counter-style code snippets. This document provides counter styles that meet the needs of languages and cultures around the world.

The Counter styles converter pulls from this list to test and create copy and paste code for counter styles.

Thanks to Richard Ishida for his work on this and also raising an issue so it could be added to the counter styles page on MDN.

Interesting

Anchored positioning: a call for feedback

A request for feedback and use cases on anchored positioning. This is where you have an element, such as a popup menu, that is anchored to the top of a button. If the viewport changes you might want it to then be anchored to the bottom of the button, in order to remain visible.

There is a proposal to bring this idea to CSS, if you recognize the issue and have thoughts, please share them.

Improving CSS variables in WebKit

A detailed post on some improvements made to CSS variables in WebKit, with lots of interesting detail in terms of how these things work under the hood, and everything that needs considering.