In-depth with the display specification, sortable tables, and accessible navigation
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.
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.
Navigating Navigation - Designing in the Browser - YouTube
A video about navigation and keyboard accessibility.
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
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.
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
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.