4 ms·

The :has selector is huge if you like customizing sites with grease monkey. You can now modify parents based on their children with pure css. Saves you having t

by doix 2y ago

The :has selector is huge if you like customizing sites with grease monkey. You can now modify parents based on their children with pure css. Saves you having to use mutation observers in those cases (assuming the site is built with a React-like thing).

duffyjp 2y ago
I just checked and Firefox finally supports it (added Dec 2023). I have a javascript workaround still in place for Firefox and it looks like I can remove that. ;) All the other mainstream browsers added :has in 2022 and it was an excellent fit for some layout optimizations. https://caniuse.com/?search=%3Ahas https://caniuse.com/?search=%3Ahas
beezlewax 2y ago
Yesos this is an excellent addition. I've used it recently and it got me out of a tight spot!
chaosharmonic 2y ago
If you don't require pure CSS, nested `querySelector` calls are also great for this -- you can use it to segment out smaller slices of a DOM with more generalized queries, that don't rely on detailed selector logic. I'm a fan of this for its composability, but nesting -- also referenced in the OP -- could be used to achieve a similar result. 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.
- doix 2y ago
  I don't really see how that helps you when you're trying to modify a SPA. As soon as you try to use JavaScript to modify anything, you need to figure out how to run that JS after whatever framework has finished rendering. 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.
  - chaosharmonic 2y ago
    It doesn't, the use case I had picked up a userscript manager for was to experiment with Web scraping. 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.
    - doix 2y ago
      Do you have an examples you can share where you use what you're describing? I love learning "weird tricks", but I'm struggling to understand yours without a code sample. 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.
      - chaosharmonic 2y ago
        Have a giant hodgepodge of a project log: https://bhmt.dev/blog/scraping https://bhmt.dev/blog/scraping 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. [0] https://violentmonkey.github.io/ https://violentmonkey.github.io/

by doix 2y ago

duffyjp 2y ago

I just checked and Firefox finally supports it (added Dec 2023). I have a javascript workaround still in place for Firefox and it looks like I can remove that. ;) All the other mainstream browsers added :has in 2022 and it was an excellent fit for some layout optimizations. https://caniuse.com/?search=%3Ahas https://caniuse.com/?search=%3Ahas

beezlewax 2y ago

Yesos this is an excellent addition. I've used it recently and it got me out of a tight spot!

chaosharmonic 2y ago

If you don't require pure CSS, nested `querySelector` calls are also great for this -- you can use it to segment out smaller slices of a DOM with more generalized queries, that don't rely on detailed selector logic. I'm a fan of this for its composability, but nesting -- also referenced in the OP -- could be used to achieve a similar result. 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.

doix 2y ago
I don't really see how that helps you when you're trying to modify a SPA. As soon as you try to use JavaScript to modify anything, you need to figure out how to run that JS after whatever framework has finished rendering. 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.
- chaosharmonic 2y ago
  It doesn't, the use case I had picked up a userscript manager for was to experiment with Web scraping. 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.
  - doix 2y ago
    Do you have an examples you can share where you use what you're describing? I love learning "weird tricks", but I'm struggling to understand yours without a code sample. 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.
    - chaosharmonic 2y ago
      Have a giant hodgepodge of a project log: https://bhmt.dev/blog/scraping https://bhmt.dev/blog/scraping 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. [0] https://violentmonkey.github.io/ https://violentmonkey.github.io/