3 ms·
Adding a :on-click pseudo selector would remove so many needless use of js for dynamically changing classes.
by The_rationalist 5y ago
Adding a :on-click pseudo selector would remove so many needless use of js for dynamically changing classes.
- henrikeh 5y agoWon’t :active do that?
- The_rationalist 5y agoNo, maybe in some limited cases but overall it's not the same
- mrweasel 5y agoYou can wrap things in a checkbox, and use :checked in CSS. It's a little weird and perhaps misuse of input fields.
- The_rationalist 5y agoI know, this is the only non-js way to achieve this but not sure it should be used in production
- c-smile 5y agoJust in case, in Sciter if you will add this: div { behavior:check; } then any div will behave as a checkbox - will toggle :checked flag on element and so we can use: div:checked { color:red; } no JS is required at all.
- slver 5y agoSince you're familiar with Sciter, how close it is to actual HTML/CSS? How does it differ? What are your high-level impressions.
- c-smile 5y agoHTML (as a language): supports all HTML5 constructs. CSS: CSS 2.1 in full + some most popular CSS3 modules like transition, animation, transform, etc. CSS flex and grid are supported but in Sciter specification, see: https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/ https://terrainformatica.com/2018/12/11/10-years-of-flexboxi... JavaScript: ES2020 specification in full + native JSX and Reactor, see: https://sciter.com/tutorials/reactor-hello-world/ https://sciter.com/tutorials/reactor-hello-world/ JavaScript runtime: + most popular and used JS DOM APIs + Node.JS runtime: FS, Net, Process + Desktop specific runtime, for example HTML Windows (https://sciter.com/html-window/ https://sciter.com/html-window/), components (https://sciter.com/tutorial-learn-sciters-html-components-in-5-minutes/ https://sciter.com/tutorial-learn-sciters-html-components-in...), etc. See: https://sciter.com/developers/for-web-programmers/ https://sciter.com/developers/for-web-programmers/
- slver 5y agoThat would be a drastic shift of the philosophy of CSS. Which currently is: (1) CSS holds no mutable state (2) CSS selectors are all based on existing DOM/device state. "On-click" is not a state, it's an event. CSS can't select an event. And toggling classes is new mutable state. CSS can't have mutable state. Also you may be overstating the problem with this "so many needless use of JS". It's a tiny snippet you can add once and reuse it everywhere in your document. https://jsfiddle.net/y1qv069p/5/ https://jsfiddle.net/y1qv069p/5/ document.addEventListener('click', e => { let n = e.target; do if (n.getAttribute?.('data-toggle') !== undefined) n.classList.toggle('on-click'); while (n = n.parentNode); });
- The_rationalist 5y agoCSS hold mutable state see e.g CSS counters. It's not just about concision, it's also about convenience (not need to do js at all) and about performance (no need to call the v8 engine, which is executed after css and has inherent, avoidable overhead)
- slver 5y agoYou're talking about the performance of a click action. How many clicks a second do your users do? Millions? Also counters aren't mutable state in the sense of a value changing in time. The "increment" name was chosen so it's intuitive. They're more like the nth-child selectors, where an attribute's value is determined by its position in a list of matching nodes (where the match is determined by the increment being specified in those elements).