5 ms·

> A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript A bit tangential, but so much more should be done in C

> A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript A bit tangential, but so much more should be done in CSS rather than resorting to JavaScript. One gripe I've always had are hamburger menus that fail to work with JS disabled. Most of my browsing is done with Safari on iOS and I've disabled JS on that browser since 1) I enjoy the privacy benefits 2) popup modals and other distractions are non-existent. You can code a hamburger menu that opens when you click on it, without JS. Yes, CSS is not just for styling it can also be used for functionality.

krono 4y ago
The majority of those CSS "hacks" are not at all accessible, however. You'd get to browse the web without JavaScript, and millions of others would not be able to browse the web at all.
- chrismorgan 4y ago
  This is what’s often (OK, almost always) missed with such JavaScriptless components: progressive enhancement with JavaScript, so that it works without JavaScript, and works better with just a little JavaScript. Most of the traditional CSS hacks can be made just as good as the JavaScript version designed with accessibility in mind without too much effort. Most of the time it’s just managing some ARIA attributes and no more. Occasionally you might add an extra supporting element or slightly restructure an existing one.
- BeFlatXIII 4y ago
  Is that a problem with the browsers not providing functionality that should be standard or is it a problem of custom components that need the JS for the dev to specify how they work?
  - krono 4y ago
    Not entirely sure if I fully understand your question. To clarify, these CSS hacks often use checkbox inputs for isomorphic state management and that is simply incompatible with the semantics those elements are designed and expected to represent. ECMAScript is a browser standard and was specifically invented for adding interactivity like toggling a hamburger menu. Yes it's also used for less savoury business but that's not the end-user's fault and shouldn't be made into their problem.
    - agileAlligator 4y ago
      > To clarify, these CSS hacks often use checkbox inputs for isomorphic state management and that is simply incompatible with the semantics those elements are designed and expected to represent. The one mentioned in the article, does not use checkboxes. It uses functionality built into HTML itself
  - bobthepanda 4y ago
    browsers do provide that functionality, just with JS. CSS is not designed, to be something you're supposed to write Doom in even though you can. It hasn't been really updated with the purpose of 'obviate javascript' because the browsers don't really want to do that.
chrismorgan 4y ago
It’s worth noting here that it’s HTML that’s doing the actual heavy lifting here, rather than CSS—the CSS is just making it look prettier. Something like the venerable checkbox hack is a case of CSS providing the functionality. That’s imperfect. <details> is HTML providing the functionality. That’s the ideal.
Waterluvian 4y ago
99% of users don’t make a fuss about javascript and the developers know. It would probably be wrong to get so distracted by satisfying a tiny sliver of user base (the pickiest sliver?) with a disproportionate share of work. Which is a shame because there’s something very elegant about using CSS. It’s usually much more performant.

krono 4y ago

The majority of those CSS "hacks" are not at all accessible, however. You'd get to browse the web without JavaScript, and millions of others would not be able to browse the web at all.

chrismorgan 4y ago
This is what’s often (OK, almost always) missed with such JavaScriptless components: progressive enhancement with JavaScript, so that it works without JavaScript, and works better with just a little JavaScript. Most of the traditional CSS hacks can be made just as good as the JavaScript version designed with accessibility in mind without too much effort. Most of the time it’s just managing some ARIA attributes and no more. Occasionally you might add an extra supporting element or slightly restructure an existing one.
BeFlatXIII 4y ago
Is that a problem with the browsers not providing functionality that should be standard or is it a problem of custom components that need the JS for the dev to specify how they work?
- krono 4y ago
  Not entirely sure if I fully understand your question. To clarify, these CSS hacks often use checkbox inputs for isomorphic state management and that is simply incompatible with the semantics those elements are designed and expected to represent. ECMAScript is a browser standard and was specifically invented for adding interactivity like toggling a hamburger menu. Yes it's also used for less savoury business but that's not the end-user's fault and shouldn't be made into their problem.
  - agileAlligator 4y ago
    > To clarify, these CSS hacks often use checkbox inputs for isomorphic state management and that is simply incompatible with the semantics those elements are designed and expected to represent. The one mentioned in the article, does not use checkboxes. It uses functionality built into HTML itself
- bobthepanda 4y ago
  browsers do provide that functionality, just with JS. CSS is not designed, to be something you're supposed to write Doom in even though you can. It hasn't been really updated with the purpose of 'obviate javascript' because the browsers don't really want to do that.

chrismorgan 4y ago

It’s worth noting here that it’s HTML that’s doing the actual heavy lifting here, rather than CSS—the CSS is just making it look prettier. Something like the venerable checkbox hack is a case of CSS providing the functionality. That’s imperfect. <details> is HTML providing the functionality. That’s the ideal.

Waterluvian 4y ago

99% of users don’t make a fuss about javascript and the developers know. It would probably be wrong to get so distracted by satisfying a tiny sliver of user base (the pickiest sliver?) with a disproportionate share of work. Which is a shame because there’s something very elegant about using CSS. It’s usually much more performant.