New blog - feed moved
QuirksBlog will be continued at the new URL https://quirksmode.org/quirksblog/ . It has entirely new RSS and Atom feeds. Please re-subscribe manually.
QuirksBlog
Latest posts
position: sticky, draft 1
I’m writing the position: sticky part of my book, and since I never worked with sticky before I’m not totally sure if what I’m saying is correct. This is made worse by the fact that there are no very clear tutorials on sticky . That’s partly because it works pretty intuitively in most cases, and partly because the details can be complicated. So here’s my draft 1 of position: sticky . There will be…
Breaking the web forward
Safari is holding back the web. It is the new IE, after all. In contrast, Chrome is pushing the web forward so hard that it’s starting to break. Meanwhile web developers do nothing except moan and complain. The only thing left to do is to pick our poison. Safari is the new IE Recently there was yet another round of “Safari is the new IE” stories. Once Jeremy’s summary and a short discussion…
Custom properties and @property
You’re reading a failed article. I hoped to write about @property and how it is useful for extending CSS inheritance considerably in many different circumstances. Alas, I failed. @property turns out to be very useful for font sizes, but does not even approach the general applicability I hoped for. Grandparent-inheriting It all started when I commented on what I thought was an interesting but…
Let’s talk about money
Let’s talk about money! Let’s talk about how hard it is to pay small amounts online to people whose work you like and who could really use a bit of income. Let’s talk about how Coil aims to change that. Taking a subscription to a website is moderately easy, but the person you want to pay must have enabled them. Besides, do you want to purchase a full subscription in order to read one or two…
Inherit, initial, unset, revert
Today we’re going to take a quick look at a few special CSS keywords you can use on any CSS property: inherit , initial , revert , and 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…
aspect-ratio
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. At the time of writing aspect-ratio is supported by Chrome 90, by Safari Technology Preview, and by Firefox 88 if you set the…
aspect-ratio and grid
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…
Two options for using custom properties
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.…
fit-content and fit-content()
Today we will look at fit-content and fit-content() , which are special values for width and grid definitions. It’s ... complicated — not as a concept, but in its practical application. min- and max-content Before looking at fit-content we have to briefly review two other special width values: min-content and max-content . You need those in order to understand fit-content . Normally (i.e. with…