Maybe useful for later

How to fill the gap left by the GOAT css tricks?

Look, the dream goal is Piccalilli fills a hole that’s been left by Digital Ocean and their mis-handling of CSS-Tricks.

A great media query for example disabling custom fonts!

Project Wallace is a set of CSS analyzers that check your complexity, specificity, performance, Design Tokens and much more. And all of that in a single web app.

A list of triangle shapes that can be reused

background-repeat: space makes the background kind of responsive.

More techniques than Resource: The Complete Guide to Centering in CSS | Modern CSS Solutions.

It covers a lot of cases:

• when the element size is known or unknown
• depending of the layout algorithm currently used

As I write this in early 2024, browser vendors are in the process of implementing align-content in Flow layout, so that it controls the “block” direction alignment of content.

🤯 so we will be able to stick to the default layout.

So, for many years, I treated CSS like a collection of patterns. I had a bunch of memorized snippets that would paste from my brain, to solve whatever problem I was currently facing.

When to use which method

• aspect-ratio
• object-fit
• margin-inline
• text-underline-offset
• outline-offset
• scroll-margin-top / bottom
• color-scheme
• accent-color
• width: fit-content
• overscroll-behavior: it will isolate the scrolling to the contained region
• text-wrap: balance
• text-wrap: pretty but https://caniuse.com/?search=pretty

A simple layout for nav with negative margins

Carousel are still complicated, but better

The lh unit is even more useful [for icon sizes] though because it is relative to the computed line height.

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

system-ui is a good typography because it falls back on the system font (that is readable). It means 0 bandwidth cost.

Exactly.

Law 1: Utility Classes Consume the Design System, They Don’t Create It
Law 2: Utility Classes Cover Only the Low-Hanging Fruit
Law 3: Utility Classes Complement, not Supplant, Semantic CSS

:has has a lot of possibilities with drag'n'drop. Here the developer uses 3 items: mushrooms, potions and .

For example: dragging some items to make parts of the site grow. https://lynnandtonic.com/assets/images/thoughts/case-study-2022-mushroom-header.mp4

See https://lynnandtonic.com/assets/images/thoughts/case-study-2022-david-rose.mp4 for more real interactions.

A potion adds color: https://lynnandtonic.com/assets/images/thoughts/case-study-2022-home-potions.mp4