5 ms·

I also really like CSS selectors. Maybe they were obvious, or based on something that came before, but I've just never had any trouble using it.

DaiPlusPlus 5y ago
> but I've just never had any trouble using it. I have. I'd love to write JavaScript-free webpages that use (FP-pure) deterministic CSS techniques in more cases (like the ":checked-trigger" trick which enable limited interactivity in pages), but which are sometimes absolutely impossible just because sometimes it's impossible to move the hidden trigger input to the right-place to enable the selector to work. With very limited exceptions[1], CSS selectors are strictly "forward only": a CSS selector could only match elements based on preceding ancestors and siblings in the DOM, but not on any subsequent siblings or ancestor's subsequent siblings. For example; a selector can match a <p> element that's preceded by an <img> element, or a <ul> element that's a descendant of a <div> element, but you cannot select a <div> element that contains a <ul> descendant, nor an <img> element that's then followed by a <p> element. I understand the original reason for being strictly forward-only was to prevent progressively-loaded HTML documents being re-styled (quite possibly quite dramatically) as it loaded over everyone's 56K connections at the time. Considering how bad FOUC ("Flash of unstyled content") still is today on poorly architectured websites despite our multi-gigbit home Interet connections I'd say it's a sensible restriction. ------------------- [1] The exceptions are things like `:focus-within` and `:last-child/-of-type/-nth-last` - but also `:has()`... ...but the problem is that the `:has()` selector-function is so expensive to evaluate it can only be used inside JS's `querySelector()`, `querySelectorAll()`, `matches()`, and `closest()` functions: i.e. it cannot be used in selectors inside stylesheets (both <style> and .css files). Since 2021 there is work being done to allow `:has()` in in stylesheets for limited patterns that aren't as expensive as allowing general-case selectors in `:has()`: https://chromestatus.com/feature/5794378545102848 https://chromestatus.com/feature/5794378545102848

DaiPlusPlus 5y ago

> but I've just never had any trouble using it. I have. I'd love to write JavaScript-free webpages that use (FP-pure) deterministic CSS techniques in more cases (like the ":checked-trigger" trick which enable limited interactivity in pages), but which are sometimes absolutely impossible just because sometimes it's impossible to move the hidden trigger input to the right-place to enable the selector to work. With very limited exceptions[1], CSS selectors are strictly "forward only": a CSS selector could only match elements based on preceding ancestors and siblings in the DOM, but not on any subsequent siblings or ancestor's subsequent siblings. For example; a selector can match a <p> element that's preceded by an <img> element, or a <ul> element that's a descendant of a <div> element, but you cannot select a <div> element that contains a <ul> descendant, nor an <img> element that's then followed by a <p> element. I understand the original reason for being strictly forward-only was to prevent progressively-loaded HTML documents being re-styled (quite possibly quite dramatically) as it loaded over everyone's 56K connections at the time. Considering how bad FOUC ("Flash of unstyled content") still is today on poorly architectured websites despite our multi-gigbit home Interet connections I'd say it's a sensible restriction. ------------------- [1] The exceptions are things like `:focus-within` and `:last-child/-of-type/-nth-last` - but also `:has()`... ...but the problem is that the `:has()` selector-function is so expensive to evaluate it can only be used inside JS's `querySelector()`, `querySelectorAll()`, `matches()`, and `closest()` functions: i.e. it cannot be used in selectors inside stylesheets (both <style> and .css files). Since 2021 there is work being done to allow `:has()` in in stylesheets for limited patterns that aren't as expensive as allowing general-case selectors in `:has()`: https://chromestatus.com/feature/5794378545102848 https://chromestatus.com/feature/5794378545102848