(I tried to fight for this six years ago β https://github.com/w3c/css-houdini-drafts/issues/994 β great that the general mood changed and led to this being now accepted :blobcatmelt:)
@kizu.front-end.social.ap.brid.gy
Inventing weird CSS things. CSSWG Member (previously: an invited expert). Frontend engineer working on Datadog's design system. Ask me about: #CSS, #Frontend [β¦] π bridged from β https://front-end.social/@kizu, follow @ap.brid.gy to interact
(I tried to fight for this six years ago β https://github.com/w3c/css-houdini-drafts/issues/994 β great that the general mood changed and led to this being now accepted :blobcatmelt:)
> RESOLVED: make all property descriptors in @property optional
https://github.com/w3c/csswg-drafts/issues/13211#issuecomment-4040028009
My brain went all the way to thinking how I could work around that with what we have in CSS. And there is a lot we can hack there today already, haha. I am not sure if I will ever actually make a demo for some of it though β too many other things to poke at.
I wish I could just do all these [β¦]
Re: keyboard shortcuts β my wish from a very long time ago was for CSS to have some pseudo-classes (or some kind of queries) that would tell you if some keyboard modifier is currently pressed. Like, if you press option/shift/ctrl etc β and the UI could respond to that.
Like, in macOS when you [β¦]
There will also be need for something similar to https://github.com/w3c/csswg-drafts/issues/7017, or some other way to make the click-to-drag work for panning a scrollable container without JS β so you could either dedicate some area for this and exclude interactive elements, or still allow it [β¦]
There are some very small movements towards something like that. For example, this issue by @flackr that was resolved on the last CSSWG F2F β https://github.com/w3c/csswg-drafts/issues/13207 β to make it possible to disable the default axis-locking that browsers do for containers that you can [β¦]
I wish CSS had native pan & zoom support. Basically, what maps, infinite canvases, etc. do β an ability for some container to be independently, infinitely (or with some constraints) zoomed and panned/scrolled around.
Elements inside could listen to the zoom level and transform, simplifying [β¦]
My next article will be for sure about Scroll-Driven Animations (as I promised in my last article), but I think now that theyβll go into interop, it is time to push for something that is not there yet β I think I will really try to work on my various multicol & exclusions drafts.
Yay, scroll-driven animations and style queries in Interop 2026!
Now, letβs look if there is something about typography and multicolβ¦
β¦
:blobcatsadreach:
Current state of this:
p {
text-transform: lowercase;
&::first-line {
text-transform: capitalize;
}
}
- Chrome: capitalized
- Firefox: all uppercase
- Safari: all lowercase
Also, works only with `::first-line`, a nested span will not work and keep things uppercase.
Listened to the @shoptalkshow, and there was a question about `text-transform: capitalize` not being able to _reduce_ the all-uppercase text. I think, for sure, there should be an issue about making this possible (`force-capitalize` or something?).
Meanwhile, what I tested is if there are [β¦]
That feeling when you get 50 items removed from your Bandcamp wishlist on Friday, and now more of the music that youβre used to listening to all the time is available on your local setup.
:blobcatuwu:
A photo of a black Carrion Crow standing in some short green grass mixed with a few fallen leaves and thin branches and sticks. The crow looks a bit aside curiously. The focus is on the crow, with the grass going out of focus rather quickly.
A photo from a short walk on 2026-01-31.
π· OM-3 & 75 mm Ζ1.8
This Friday is a Bandcamp Friday, btw.
For those who are planning to buy stuff there β the last time I tried, I only managed to buy like 10% of what I planned, as with the way it does stuff, my banks at some point started denying the requests, lol. Because it kinda does one purchase per [β¦]
Basically: βWe have a circularity? Letβs do a CSS-only while loop until we happen not to have it!β
Was thinking about a problem and found a hypothetical solution that will require a continuous random in CSS (one that is different each time it is recalculated for any reason).
What would you say if my next article will be explicitly about breaking certain CSS rules? Not that my past articles did not do that⦠But hey, this time I will be explicit about that.
RE: https://front-end.social/@kizu/115966776474014598
In case you missed it, I wrote a new article about my new CSS technique. If you worked with CSS for a while, you likely stumbled upon the problem it solves.
The article is long, so if you did not find an opportunity to read it yet β I hope [β¦]
`display: inline-grid lanes`
Random thought: if I ever redesign/rewrite my main website, I will likely need to keep all the old articles intact in the old design & markup, as I pretty often hack things around its current design & implementation, and would not want to make sure every article will still look the same with [β¦]
@sarajw Congrats, and see you there!
Also, as always, everything is written by my hand, months of research, etc.
β¦And I have a few more articles to write already. I hope Iβll manage to finish them faster, haha. But almost always, when you start writing an article, even if you think you know what your destination is, it moves. You [β¦]
As usual, the credits!
- @fantasai for the www-style thread
- yisibl for opening the shrinkwrapping CSSWG issue.
- @vasilis, @argyleink, @simevidas, @leaverou, @mia, @5t3ph who, among others, contributed to this issue.
- @AmeliaBR for a helpful Tardis metaphor.
- @css for his article on [β¦]
A screenshot of one of the articleβs examples. On a white background, there are several boxes visible in a three-dimensional view. The one in the back has rounded corners, green background and a pink outline, and is shorter. The one in the middle is longer, going the full width of the screenshot, and has a pink background. The one in the front has the following text: βI am a Longer Header; I Will Wrap & Look Bad! Oh no! What Can We Do?β, wrapped after the ampersand and balanced.
I wrote a new article: βSolving Shrinkwrap: New Experimental Techniqueβ
https://kizu.dev/shrinkwrap-solution/
In this article, I present my new technique for solving a #CSS problem that was deemed impossible β true shrinkwrapping of an element with [β¦]
[Original post on front-end.social]
- [x] proofreading (likely, still errors and typos, but eh)
- [x] typography pass (same)
- [x] checking if all sidenotes are in the correct places (only at the default resolution lol)
- [ ] making fallback videos
- [ ] sleep
- [ ] probably finishing the fallback videos
- [ ] release?
I lied: I added one more example. But not another sidenote. Unless youβd count the captions for the examples that look like sidenotes but are not numberedβ¦
A crop of a screenshot of the gap between the main part of the article and a column with sidenotes, focusing on the number β22.β near one of the sidenotes.
Sidenotes.
5k more pixels of articleβs height, and I think the text and examples are doneβ¦ This evening, after work, will be spent by proofreading everything, making fallback videos for all examples, checking if everything works as I expect itβ¦ :blobcatreading:
I am not saying I came up with container queries without containers, but.
Ok, I need to finish that one article, then another, and only then, _maybe_, get to that one. But should I?
Me: wtf, why doesnβt this element get its intrinsic dimensions right?
Also me: added inline-size containment to this element earlier.