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
Chrome 86 will include support for
:focus-visible and you can read about it here.
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.
A video about navigation and keyboard accessibility.
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.
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
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.