What You Need to Know about Modern CSS (Spring 2024 Edition)
frontendmasters.com
frontendmasters.com
It strikes me that the more useful additions are implemented by Firefox, and the lesser ones not.
I had expected that by now we would have a super light (kernel) spec for SPAs, and the heavier spec for design heavy documents. Chrome cannot keep up with Firefox wrt CSS performance. I don't understand why Google is overloading its own camel; the web is not going to render faster with more added complexity.
You can also create new DOMs out of arbitrary HTML trees with a `DOMParser`, and can then run queries against those. Really useful when run against the responses from `fetch` requests.
Usually that's using mutation observers or by adding super short animations and listening for animation end events. Both are annoying to use _and_ result in a slight jank where the wrong thing flashes for a split second if you're doing large layout changes.
The advantage of using CSS is that after you inject it, everything happens synchronously, so there are no rendering glitches.
I was more saying that if someone reading this thread doesn't need pure CSS for this -- like if you have other needs but a similar problem -- there are additional options.
My experiments with scraping have been running headless chrome, grabbing all the HTML after stuff renders, dumping that to BeautifulSoup in Python and processing it there. I'm really curious how you do it in a user script.
Basically I went from screwing around in a console to reimplementing the same thing using Violentmonkey[0] to eventually using `astral` (a Deno-based browser automation lib)
For a simple example, to walk through a paginated list: check the first page's DOM for a "next page" link. Make a `fetch` request against its href, get the response's HTML content using `res.text()`, and then pass it into a `DOMParser`. Then, check that DOM for another "next" button. And so on. (Obviously running whatever page scraping logic you might need each time you run the loop.)
Another example of why you might do this is, say, to replace sections of a comment history while you overwrite them. (Though, to your point, when I did that to my Reddit account I had to use old reddit for this part in particular. I was trying to do the whole thing within the browser, and that turned out to not be possible in New Reddit bc client-side routing kept spawning new console instances.)
Browser automation libs come with handlers for stuff like selection anyway, but it's still there if you need client-side logic -- you can use `page.evaluate()` to execute code within the browser context and pass data back out.
Like cascade layers, nesting and scoped CSS are basically built for component systems, and are going to be so handy for implementing styles for those going forward.
Didn't know about margin trim either... that sounds like it'll be a godsend when it's fully implemented. So much extra CSS required to overwrite the margin on the last element in a container almost every time the situation comes up...
There's some good stuff here for sure.
That should be the real title of the article.
Some of those properties are new-ish. If you follow the events, you will have known of them for a while but I agree most people may not be aware of them.
CSS nesting looks like a nice quality-of-life improvement in some cases.
I'm not CSS-ninja enough for any of the other items to catch my eye, though the "stylable select element" tease at the end looks interesting.