222 private links
- 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.
Wow! mix-blend-mode: multiply; and the linear-gradient effect are awesome.
There can be a day where Carousels will be implemented only in CSS.
Avoid layered text-shadows for text outlines.
Use paint-order: stroke fill instead!
How to customize gaps between elements?
We don't have a great way to do it currently.
- Adjust the vertical margin of the title or description.
Wrap title and description in a new container and re-apply flexbox with a smaller spacing.
Use the default flow layout with margins.
Show elements in an input?
✨ Chrome: DevTools Settings > Preferences > Elements > ✅Show user agent shadow DOM
✨ Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true
Use inset: -8px to make the element overflows in its container.
Naming conventions for CSS
Focus by demotion or the focus stands out because all other elements are hidden.
A switch input with an Astronaut