Issue 269

Being a bit light on content this week, mostly because I had my head in a bunch of projects that were all finishing at once, I've created one of my in-depth sections gathering pieces from my archives. This time I've collected up some pieces on the Display Specification. One of the many sad things about this year was not getting to do the talk on Display that I wrote for An Event Apart at all the different shows.

I hope you are all keeping well, wherever you are and whatever state of lockdown you are in right now.

Rachel Andrew, CSS Layout News

Chromium Blog: Giving users and developers more control over focus

Chrome 86 will include support for :focus-visible and you can read about it here.

chromium.org

Sortable Table Column Mad Libs | Adrian Roselli

Adrian has been testing to find the most accessible methods of sorting table columns and has created a tool to help you make more accessible sortable tables.

adrianroselli.com

Navigating Navigation - Designing in the Browser - YouTube

A video about navigation and keyboard accessibility.

youtube.com

Digging Into The Display Property: The Two Values Of Display — Smashing Magazine

Something that is interesting to understand is the two things that setting a value of display changes. It changes whether the external box of the element is block or inline, which is one of the very first things most people learn about CSS. However, in the case of flexbox and grid we also know that it changes the way the child elements behave. Turning them into flex or grid items. I explained this dual nature, and a refactoring of the display spec in this article.

smashingmagazine.com

Digging Into The Display Property: Box Generation — Smashing Magazine

Some values of display deal with box generation, and the situations where you don't want to generate a box at all. This article looks at the values of none and contents.

smashingmagazine.com

CSS Lists, Markers, And Counters — Smashing Magazine

In the display specification are the values which deal with lists and list items. Until recently however, styling a list bullet was a tricky thing to do. In this post I introduce a new pseudo-element, ::marker. At the time it was only available in Firefox, but is now landing in Chrome too.

smashingmagazine.com