Below you find the last seven QuirksBlog entries.
Today we’re going to take a quick look at a few special CSS keywords you can use on any CSS property:
unset. Also, we will ask where and when to use them to the greatest effect, and if we need more of those keywords.
The first three were defined in the Cascading Level 3 spec, while
revert was added in Cascading Level 4. Despite 4 still being in draft
revert is already supported.
the MDN revert page,
Chris Coyier’s page,
and my test page
This week we’ll take a look at the new
aspect-ratio declaration and its use. Una Kravets wrote the introductory article, but there are some additional technical points to be made. I also wrote a little fallback that you might use if you need
aspect-ratio right now.
I’m currently investigating the new
aspect-ratio declaration and plan to write an article about it. However, I got stuck on
aspect ratios in a grid context. Chrome/Safari and Firefox do something different here, and I understand neither approach. So I hope I can get some help.
aspect-ratio is currently supported by Chrome 90, by Firefox 88 with the correct flag enabled, and by Safari Technology Preview. I tested mostly in the first two — for complicated reasons I cannot install STP right now, but a kind Twitter follower sent me a few screenshots. It behaves as Chrome.
Recently I interviewed Stefan Judis for my upcoming book. We discussed CSS custom properties, and something interesting happened.
We had a period of a few minutes where we were talking past one another, because, as it turns out, we have completely opposite ideas about the use of CSS custom properties. I had never considered his approach, and I found it interesting enough to write this quick post.
Today we will look at
fit-content(), which are special values for
width and grid definitions. It’s ... complicated — not as a concept, but in its practical application.
I need to figure out how to call a pair of fundamental CSS concepts in my upcoming book and would like to hear which option you think is best — or least confusing.
When introducing width and height I explain that by default width takes as much horizontal space as it can, while height takes as little vertical space as possible. This leads to a discussion of these two opposed models that I excerpt below.
My question is: which names do I give to these models?
A while ago I asked about the exact relationship between progressive enhancement and accessiblity. What were the responses?
Even older entries
See the March 2021 archive and beyond.