> but on a paradoxically hard page (like the HTML5 living standard, single page edition) with the wrong query, maybe not.
Yeah, I use that page as a crash-test too :)
Anyway, I haven’t dived in the source yet but I’m very interested in how this is implemented. How much can you hook into the browser’s selector engine / how much functionality do you have to duplicate? (I took over the cssselect project for WeasyPrint, but it is in Python without dynamic updates so the context is very different.)
We'll have to write up an article about how it works. I'm sure we'll be iterating on the source quite a lot now that we have a nice working set of things...
Essentially though, we look at the modification to narrow down the potentially matching rules, then we use querySelectorAll/matchingfns at the appropriate spot in the tree. Each selector (like :-hitch-has) then has a filter function which merely returns true/false (just like jquery) and based on that we toggle an associated class on the element and the rest is just the browser's native CSS doing what it does.
Comments
> but on a paradoxically hard page (like the HTML5 living standard, single page edition) with the wrong query, maybe not.
Yeah, I use that page as a crash-test too :)
Anyway, I haven’t dived in the source yet but I’m very interested in how this is implemented. How much can you hook into the browser’s selector engine / how much functionality do you have to duplicate? (I took over the cssselect project for WeasyPrint, but it is in Python without dynamic updates so the context is very different.)
We'll have to write up an article about how it works. I'm sure we'll be iterating on the source quite a lot now that we have a nice working set of things...
Essentially though, we look at the modification to narrow down the potentially matching rules, then we use querySelectorAll/matchingfns at the appropriate spot in the tree. Each selector (like :-hitch-has) then has a filter function which merely returns true/false (just like jquery) and based on that we toggle an associated class on the element and the rest is just the browser's native CSS doing what it does.