222 private links
A powerful color picker with corresponding color palette. A clean & simple color picker for web designers.
In a nutschell: font-variant-numeric: tabular-nums; to make space between digit in a number consistent.
See https://twitter.com/i/status/1486059026064584711 for a animated example
Use gap to insert space on both axis left and right between elements
Nesting
Subgrid
Cascade Layers
New CSS color functions
accent-color
@when / @else
:has()
@container() query
I totally agree :)
Stylus on the Chrome Web Store has more than half a million users. Stylish has over three million. That’s a lot of people modifying the web to get what they want.
It is possible to activate/deactivate a class with node.classList.toggle('className', true/false)
The example provided about forms is impressive ! HTML and CSS are so much powerful ! I think I will use them more in vue and svelte :)
There is a <template> tag in HTML 5.
The componentization is still to be done though. I always forgot how HTML5 and CSS are powerful nowadays.
TL;DR; using css variables again
aspect-ratio can have two types of values:
3 / 2: a ratio of 3 in width and 2 in height3: a simple number where the width and height are equal
How to program a dark theme for a website. It is easier than expected with @media (prefers-color-scheme: dark) and css variables !
TL;DR; Use hsl isntead of RGB to create a gradient. This will avoid a grey zone. But using hsl is not available in CSS for now, so we can use a linear-gradient from a multiple of colors instead. Each color have to be similar to its neighbors... and it works !
and here the tool: https://www.joshwcomeau.com/gradient-generator/
Display an item on scroll.
TL;DR but still interesting. In case I need it, I know how to find it
I bookmark this post especially for this code snippet:
body {
margin: 0 auto;
max-width: 40rem; // can be bigger but not too much ! (<= 80 I think)
font-size: 1.2rem;
}It makes a HTML website directly readable :)
Now I understand how it is useful 👍
A minimal CSS reset with every line explained.
Why would I use this?
If you just want to launch already.
An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.
Solution: Using 1 subgrid per element inside a grid.
In the console: $0.offsetParent → $0 is the currently set element.
Then we can use the offsetParent object property to find the closest ancestor to that element that has its position set to something other than static.