Design Engineer https://xitter.cf/t.co/ZkQxbAwI7F https://xitter.cf/t.co/Fzq4yZT5u4
Joined June 2024
- Tweets789
- Following56
- Followers765
- Likes978
css tip: stop trying to animate height to auto.
the browser can't animate to height: auto, so the panel just jumps open.
animate grid-template-rows from 0fr to 1fr instead. the row grows to the real height of the content, whatever it is.
.panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease-out;
}
.panel.open {
grid-template-rows: 1fr;
}
.panel > div {
overflow: hidden;
}
css tip: tooltips that know when they’re about to get clipped.
new way (flips automatically):
.trigger {
anchor-name: --tip;
}
.tooltip {
position: fixed;
position-anchor: --tip;
position-area: right;
position-try-fallbacks: flip-inline, flip-block;
}
old way (gets cut off near edges):
position: absolute;
left: 100%;
translate: 0 -50%;
older browsers, do it in js:
render it outside (portal or popover)
measure the viewport space
flip to the side that fits
slide it back inside
re-measure on scroll and resize
either way:
point the arrow at the trigger
animate from the arrow
escape closes it, hover onto it, show on focus
watch out:
overflow: hidden parents clip it anywhere
anchor positioning needs chrome 128, firefox 147, safari 26
fixed triggers? just pick the open side
css tip: stop hardcoding icon sizes in px.
set the icon height to 1cap instead.
1cap is the height of a capital letter in the current font, so the icon automatically matches the text at any font-size.
.label {
display: flex;
align-items: baseline;
}
.label svg {
block-size: 1cap;
}
Something new is coming to Rynix Studio.
A fresh effect you can apply on images and videos. Going live in a few days
If you find it useful, feel free to visit the repo.github.com/Nexvyn/Nexvyn-ui
