3 ms·

Is it possible, without Javascript, to have: - drag drop reorder and move? - accessibility? - draw on top of webpage? - popup menus? - show/hide sidebar?

by xet7 5y ago

Is it possible, without Javascript, to have: - drag drop reorder and move? - accessibility? - draw on top of webpage? - popup menus? - show/hide sidebar? Any links for examples?

vereis 5y ago
Popup menus, sidebars, drawing on top of a pages can all be done to a certain extent with some CSS Accessibility is possible with standard semantic HTML and aria tags (again to a certain extent) D&D is probably not workable though
devit 5y ago
1. Probably not in general? Maybe with a vertical <input type="range"> for each item and a lot of server-generated CSS hackery, for small lists? 2. Use ARIA 3. Use position: absolute? 4. Create it with position: absolute/relative and use CSS :hover selector to show it (or see #5 for explicit open/close) 5. Use <details> or a checkbox along with the appropriate CSS
Zealotux 5y ago
>accessibility? HTML is pretty accessible by itself, simply follow the standard and WAI-ARIA. >popup menus? https://www.w3schools.com/howto/howto_css_dropdown.asp https://www.w3schools.com/howto/howto_css_dropdown.asp >show/hide sidebar? You can use the checkbox way to handle that: https://codepen.io/Sfate/pen/nLBGr https://codepen.io/Sfate/pen/nLBGr The rest isn't really possible without JS as far as I know.
- no_way 5y ago
  That popup menu is not accessible though, no keyboard navigation and if you really wanted follow all accessibility guidelines you still need javascript to toggle attributes and stuff. https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-b...
  - eldelshell 5y ago
    It also isn't a "pure" HTML solution as all the magic is happening on CSS. So, convoluted CSS or two lines of JS?
    - smichel17 5y ago
      As someone who browses with js off by default (uMatrix rule) and has implemented a fancy drop-down using css rather than js[1], my current opinion is that it's better to display all menus expanded by default and then hide them if/when your js loads. It's less effort to write and, more importantly, browsing with js disabled means I want interactivity off. If I want the "full experience as intended", I'll enable js. I frequently do. But I browse without it by default because frequently that experience is a downgrade from just the raw (well, styled) content. Leaving the fancy stuff to js suits everyone best. [1] please note the content on the page is outdated, this is just a prototype -- the drop-down below "PayPal": https://sdproto.gitlab.io/donate/ https://sdproto.gitlab.io/donate/
  - Wowfunhappy 5y ago
    If a native html feature isn't accessible, that sounds like something the browser makers need to correct, no? (Although, you could argue the end-result for users who need accessibility features is the same, regardless of who is at fault.)
simonw 5y ago
The progressive enhancement way to do show/hide sidebar used to be to have the sidebar content displayed in full at the bottom of the page, then use an anchor link that jumps the user down to that content. Then the JavaScript that loads can hide that area and cause it to display in place when the show link is clicked. Or... these days you can get a lot done with the HTML summary/details elements - including implementing popup menus.

by xet7 5y ago

Is it possible, without Javascript, to have: - drag drop reorder and move? - accessibility? - draw on top of webpage? - popup menus? - show/hide sidebar? Any links for examples?

vereis 5y ago

Popup menus, sidebars, drawing on top of a pages can all be done to a certain extent with some CSS Accessibility is possible with standard semantic HTML and aria tags (again to a certain extent) D&D is probably not workable though

devit 5y ago

1. Probably not in general? Maybe with a vertical <input type="range"> for each item and a lot of server-generated CSS hackery, for small lists? 2. Use ARIA 3. Use position: absolute? 4. Create it with position: absolute/relative and use CSS :hover selector to show it (or see #5 for explicit open/close) 5. Use <details> or a checkbox along with the appropriate CSS

Zealotux 5y ago

>accessibility? HTML is pretty accessible by itself, simply follow the standard and WAI-ARIA. >popup menus? https://www.w3schools.com/howto/howto_css_dropdown.asp https://www.w3schools.com/howto/howto_css_dropdown.asp >show/hide sidebar? You can use the checkbox way to handle that: https://codepen.io/Sfate/pen/nLBGr https://codepen.io/Sfate/pen/nLBGr The rest isn't really possible without JS as far as I know.

no_way 5y ago
That popup menu is not accessible though, no keyboard navigation and if you really wanted follow all accessibility guidelines you still need javascript to toggle attributes and stuff. https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-b...
- eldelshell 5y ago
  It also isn't a "pure" HTML solution as all the magic is happening on CSS. So, convoluted CSS or two lines of JS?
  - smichel17 5y ago
    As someone who browses with js off by default (uMatrix rule) and has implemented a fancy drop-down using css rather than js[1], my current opinion is that it's better to display all menus expanded by default and then hide them if/when your js loads. It's less effort to write and, more importantly, browsing with js disabled means I want interactivity off. If I want the "full experience as intended", I'll enable js. I frequently do. But I browse without it by default because frequently that experience is a downgrade from just the raw (well, styled) content. Leaving the fancy stuff to js suits everyone best. [1] please note the content on the page is outdated, this is just a prototype -- the drop-down below "PayPal": https://sdproto.gitlab.io/donate/ https://sdproto.gitlab.io/donate/
- Wowfunhappy 5y ago
  If a native html feature isn't accessible, that sounds like something the browser makers need to correct, no? (Although, you could argue the end-result for users who need accessibility features is the same, regardless of who is at fault.)

simonw 5y ago

The progressive enhancement way to do show/hide sidebar used to be to have the sidebar content displayed in full at the bottom of the page, then use an anchor link that jumps the user down to that content. Then the JavaScript that loads can hide that area and cause it to display in place when the show link is clicked. Or... these days you can get a lot done with the HTML summary/details elements - including implementing popup menus.