318 private links
How to apply css for RSS feeds
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.
- 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