4 ms·

Ask HN: HTML actions that replace JavaScript/CSS?

9 points by tagawa 3y ago

Following on from today’s HTML redirects post ( https://news.ycombinator.com/item?id=35670325 ), I was wondering what other actions exist within HTML, that many devs use JavaScript or CSS for. The “summary” element for showing/hiding details springs to mind. What else is there?

deleted 3y ago
[deleted]
doodlesdev 3y ago
There is a trick for collapsible sidebars where you can use a checkbox and style the sidebar display conditionally based on the checkbox :checked pseudo-selector, AFAIK this is the only way to make this style of sidebar without JavaScript. [0][1][2] [0]: https://www.digitalocean.com/community/tutorials/css-collapsible https://www.digitalocean.com/community/tutorials/css-collaps... [1]: https://webdevtrick.com/css-sidebar-menu/ https://webdevtrick.com/css-sidebar-menu/ [2]: https://webdevtrick.com/demos/css-sideout-menu/ https://webdevtrick.com/demos/css-sideout-menu/
fogzen 3y ago
The datalist element, which can be used for browser native autocomplete of input options https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...
- tagawa 3y ago
  Oh, I'd forgotten about that – good one, an underused feature of HTML.
tagawa 3y ago
Just thought of another couple – the input types "date" and "color".
kypro 3y ago
There's quite a lot you can do with just CSS using hidden inputs for state and clever selectors to dynamically update content. It's possible to create a non-JS tab implementation using just hidden inputs and CSS for example, although I wouldn't recommend it. You can also do basic client-side form validation with just HTML (although you'll need some CSS to display the errors I think). The summary element is a good example and the first that came to my mind. Most of the things I can think of would require at least some CSS, or are already reasonably well known.

4 ms·

Ask HN: HTML actions that replace JavaScript/CSS?

9 points by tagawa 3y ago

deleted 3y ago
[deleted]
doodlesdev 3y ago
There is a trick for collapsible sidebars where you can use a checkbox and style the sidebar display conditionally based on the checkbox :checked pseudo-selector, AFAIK this is the only way to make this style of sidebar without JavaScript. [0][1][2] [0]: https://www.digitalocean.com/community/tutorials/css-collapsible https://www.digitalocean.com/community/tutorials/css-collaps... [1]: https://webdevtrick.com/css-sidebar-menu/ https://webdevtrick.com/css-sidebar-menu/ [2]: https://webdevtrick.com/demos/css-sideout-menu/ https://webdevtrick.com/demos/css-sideout-menu/
fogzen 3y ago
The datalist element, which can be used for browser native autocomplete of input options https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...
- tagawa 3y ago
  Oh, I'd forgotten about that – good one, an underused feature of HTML.
tagawa 3y ago
Just thought of another couple – the input types "date" and "color".
kypro 3y ago
There's quite a lot you can do with just CSS using hidden inputs for state and clever selectors to dynamically update content. It's possible to create a non-JS tab implementation using just hidden inputs and CSS for example, although I wouldn't recommend it. You can also do basic client-side form validation with just HTML (although you'll need some CSS to display the errors I think). The summary element is a good example and the first that came to my mind. Most of the things I can think of would require at least some CSS, or are already reasonably well known.