258 private links
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.
Solutions:
-
styling it manually through CSS :
input:focus { outline: 2px solid deeppink; } -
A keyup tab event listener. Think about adding the class through JS, that way the focus will still be accessible if JS fails to load.
-
the property
::focus-visible
The background color of checkboxes will be the one determined by accent-color. Nice !
And the surrounding stays accessible whatever this color is as the webbrowsers have their own implementation of this.
When to use the drop-shadow filter:
- on a non-rectangular shadow (or clipped elements)
- on a group of box
Limitation: it does not have the spread parameter.
A code snippet is provided for it. Well done.
A curated list of CSS named colors.
mBarker84 made a list with these names only on Github