Replying to
@Vivaldi@social.vivaldi.net Ok, but what if… a “random” preset? Just randomize all the settings!
Remote
Roma Komarov
@kizu@front-end.social
mastodon 4.7.3Inventing weird CSS things.
CSSWG Member (previously: an invited expert).
Frontend engineer working on Datadog’s design system.
Ask me about: #CSS, #Frontend, #DesignSystems.
Located in France. He/him.
1791 Followers
414 Following
39 Posts
Joined November 06, 2022
Articles and Experiments:
Less polished blog:
GitHub:
Current Mood:
Sleepy, thinking about a new article to write 🍵:blobcatmelt:
New blog post: “Fixing Baselines”.
https://blog.kizu.dev/fixing-baselines/
Do you know how to center things in CSS? In year 2025? Easy! You just… align… or justify…, ok, maybe just place? your content… or items? …Forget it, this post is not about alignment. Or is it?
This post is about another common alignment concept that might seem simple: baseline alignment. In it, I share a technique I have already used for twelve years.
> RESOLVED: make all property descriptors in @property optional
https://github.com/w3c/csswg-drafts/issues/13211#issuecomment-4040028009
Selectors in CSS are fast, but not when your app has too many DOM nodes and the selector in question is a non-optimal `:has()` — that can still introduce significant performance regressions in practice.
`:has()` should be your last resort — very often, using static templating or even JS instead could be a better idea.
Bad: `.foo:has(.bar)`
Ok: `.foo:has(> .bar)`.
Even the `:has() > …` should also be avoided with not precise selectors like `> *` or `> :first-child` — those can be bad too.
This time, going to #CSSDay on Tuesday and going back on Sunday because there will be a full-day pre-event and a post-event (https://cssday.nl/schedule.html).
It is almost a CSS Week now.
Replying to
@radiofreefedi@musician.social cc @TodePond@mas.to & #pastagang — just in case you were not familiar with Radio Free Fedi — sadly, it is no longer active, but they still sometimes share related things, which feel nicely adjacent.
I don't know who needs to hear it, but I just test out an attempt to conditionally chain more than 10000 elements one to each other with anchor positioning, and in Chrome it works. Neither Safari nor Firefox don't currently work well with even a few chained elements, but, I guess, I now have a good benchmark :blobcatknife:
I was struggling to find a solution for a problem for a while.
Turns out, the solution was to double the number of scroll-driven animations I was using.
It would’ve been great to do this with fewer of them, but hey, I’ll take what I can.
Replying to
@mwichary@mastodon.online
*squints* Is this a 2d multi-thumb range input? *summons @utilitybend@front-end.social*
Replying to
@runevision@mastodon.gamedev.place @efi@chitter.xyz I am not an expert in any way, but from what I remember, the most important thing is how different types of trees create different types of undergrowth — coniferous forests usually have sparse vegetation below the trees, with the ground mostly covered in needles and cones. Deciduous forests, on the other hand, often have more bushes and grass. And the type of ground (earth/sand/rock) frequently dictates which trees and which vegetation will be there.
What was the last thing you wanted to do with #CSS but couldn’t?
Replying to
@sturobson@front-end.social please, add your use case to the https://github.com/w3c/csswg-drafts/issues/9572 — I feel that this could potentially help solve this! (In a train, so can’t verify how exactly, haha)
Replying to
@runevision@mastodon.gamedev.place @efi@chitter.xyz If I may :)
https://pixey.org/p/kizu/868603779147464017 — a bit of hilly terrain in Spain.
Although, it is always my favorite terrain near ocean/sea, as it gets a lot more diverse and interesting there.
https://pixey.org/p/kizu/941477902061096057 — France, forest on top of a hill, mostly flat, forest with mostly oaks, but with some mixed trees.
https://pixey.org/p/kizu/736693771435422928 — same forest, different place/time; a lot of dense vegetation alongside the path in deeper between the trees.
Replying to
@runevision@mastodon.gamedev.place @efi@chitter.xyz Could be cool to match the type of earth, and thus the trees that grow there with their undergrowth based on the altitude and angle of the terrain, as well as closeness to the water sources, etc.
Replying to
@shoptalkshow So, about style-querying that light-dark()… https://blog.kizu.dev/querying-the-color-scheme/ :)
Replying to
Replying to
@mayank @swithinbank (before moving Navidrome to my NAS, I also ran it as a service on my macbook — worked pretty well as well)
Replying to
@mayank @swithinbank Most apps for home media servers allow offline downloads: I set up mine so I just did a one-time download of all the music I need, and it is now on my phone.
I would also never really expose my home network, but I'm pretty happy that offline works (and it can even scrobble everything you listened back to last.fm or whatever after it goes online).
Replying to
@subtl @Meyerweb Sounds like the https://github.com/w3c/csswg-drafts/issues/2923 which was resolved to have in CSS, and there is currently a prototype of it (column-height property, which you could use viewport units for, of course) in Chrome Canary.
Replying to
@cheeaun git, but rebasing my branch with my changes on the latest version.
(doing this once in a while, totally not often and not automated)
Decided to try matrix (for Nth time). For now, in a “lazy” mode: instead of looking for a good instance to join, using the “main” one for now.
@cinnyapp@fosstodon.org seems like the best client so far — custom emojis/stickers is a must when going from something like a discord/slack, and it works very well as an installed web app on the desktop/iOS so far.
If anyone wants to try chatting there — feel free to send me a DM here with your matrix address :)
Replying to
@darin@mas.to In the future, anchor positioning will help with this, as it will be able to escape the overflow. Otherwise, yeah, mostly just splitting the overflow for production code right now.
Replying to
Forgot to include in the stats that I encountered at least 5 bugs when implementing the mixing from the article — filled four (though one was a duplicate of another), and posted my test case into another pre-existing report. And there might've been bugs that I already knew about, so I just worked around them (like with all the tan(atan2()) stuff).
Ah, and also at least one bug that was only in an older version of a Chrome, but fixed in Canary, so did not report it.
Replying to
Some random stats!
In the end, on the desktop, the article is 42060px high (65460 after expanding the details with the full commented code of the mixin), has 38 headers, and 24 sidenotes.
The mixin's code is 862 lines, 19567 bytes, including 63 comments. 8378 bytes minified without comments. 2kb–2.2kb when minified with brotli/gzip/deflate. Not that it matters, as you shouldn't use it in production :D
I started working on both right after publishing my previous article, so on December 25.
Replying to
@jakegiltsoff@mastodon.social @piccalilli@front-end.social @5t3ph@front-end.social It should be possible to adapt https://kizu.dev/fit-to-width/ to do this, but I don't have time to do it. Basically, if we know the lower and upper bounds of the wdth axis, we can add an extra step at the beginning. First, as usual, we render the font with the smallest font and wdth, then we can render it with the highest value of wdth and check if it still fits or overflows [1/2]
Replying to
@HEX @css Great font! It is for sure easier to adjust the variable axis compared to the current workarounds with regular fonts that people do, like with just positioning, or with more involved techniques like https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/ by @amit_sheen :)
Replying to
@jakegiltsoff@mastodon.social @piccalilli@front-end.social @5t3ph@front-end.social [2/2] If it fits -> we keep this value and continue growing as usual, otherwise apply only the wdth proportionally to the overflow value.
(I am assuming we will start from small and grow, as I strongly consider this the only proper way of handling this type of technique, and any shrinking variant can be expressed as growing anyways)
Replying to
@ppk@front-end.social Was resolved to have this ~a year ago, but probably not implemented anywhere as needs edits to the spec: https://github.com/w3c/csswg-drafts/issues/11104
Replying to
@ppk@front-end.social Put your thumb somewhere here: https://github.com/w3c/csswg-drafts/issues/11068 or — even better — submit your use case there :)
Replying to
@ppk@front-end.social So, this is total overkill for your case, but https://kizu.dev/preview-mixin/
Replying to
@ppk@front-end.social Well, then the solution is simple: to understand everything that's going on there! 
Replying to
@darin@mas.to I mean, for those that shipped it — what is there should be already enough, this is a pretty basic thing for anchor positioning (likely requires position: fixed and maybe anchor-scope if there is a chance there could be multiple dialogs).
Replying to
@markusms@mastodon.cloud Clearly, the circle+square icons stand for “that shape goes into a square hole”.