221 private links
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.
- 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
Create an accessible <marquee> tag
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.