299 private links
A transition to open or close a modal
Width and height in CSS does not work properly, The parent height takes priority over the child height.
In order for something like height: 50% to work, the parent’s height can’t depend on the child’s height.
A fixed height works just fine. There is one thing to consider though
when we tell
to have height: 50%, that percentage isn’t based on the parent element’s total size, it’s based on the parent’s “content box”. This is the space inside the element, within its border and padding.
It doesn't work with min-height because the size of the element is dynamic.
CSS Grid's children will grow to fill their grid cell as if they have a height: 100%. Another approach is to use flexbox with flex: 1 on the child.
Layouts are mini-languages indeed. See https://shaarli.lyokolux.space/shaare/TPKfkQ
Une vidéo explicative de Grafikart.
(via https://warriordudimanche.net/article2114/6825e02dcfcba)
Only transfer the useful part of a font. It subsets static Unicode-ranges, so only a part of the font will be downloaded.
WebTUI is a CSS library that brings the beauty of Terminal User Interfaces (TUIs) to the browser
Funny!
There is a new lh for "line-height" unit in css.
* + * as known as the howl selector: targets all elements that have the previous same selector.
This selector is great because it has no specificity.
An alternative is *:not(:first-child)
Use appearance: base; on legen style could unlock a lot of styling issues for <legend>
- Too small target areas
- Not using gap with Flexbox
- Unforgiving target areas for dropdowns
- No delay before closing drodowns
- Not animating anchor links
text-wrap: pretty avoids short last lines, bad rag, poor hyphenation and typographic river.
pretty can be applied to anything on the page.
balance should be used for anything where you want all the lines to be the same length
Better CSS defaults
rgba(from currentColor r g b /. 35
or for better support:
color-mix(in srgb, currentColor 35%, [#0000)](https://shaarli.lyokolux.space/./add-tag/0000))
I can see potential advantages to target all details content (except summary) as one container.
Browser support is not enough (~69% at the time of writing) and Firefox does not support it though: https://caniuse.com/?search=%3A%3Adetails-content
Let's see in months or 1-2 years!
Sometimes the outline is hidden because of some overflow though.
a:not(:is(:hover, :focus)) {
text-decoration-color:
color-mix(in srgb, currentColor, transparent 75%);
}"The Jedi use the cascade for knowledge and defense, never for attack."
...
"But only the Sith deal in absolutes!"
:where() apply styles with 0 specificity. It's a great way to provide defaults to css classes.
Another modern solution is to use @layer.