It can be useful :)

1. Writing mode
2. Gap in flex or grid layouts
3. Flip with transform
4. scroll-behavior: smooth;
5. Scroll-snapping with scroll-snap-type for the container and scroll-snap-align for the children
6. Resize elements both with overflow: auto; resize: both;
7. Line clamp based on how many lines is expected.
8. Linear gradient and apply the gradient on text only
9. object-fit: cover to avoid the fill effect of images. The image is not fully displayed thoughts.
10. pointer-events: none; make elements not selectable anymore.

Well I knew them 😁

The Mozilla Documentation Network published a curriculum to become a frontend developer.

It seems to contain relevant resources, also for confirmed developers.

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.

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