Hacker News new | past | comments | ask | show | jobs | submit login
HTML and CSS techniques to reduce your JavaScript (perfplanet.com)
19 points by feross 46 days ago | hide | past | favorite | 3 comments

My favorite is to use sibling element selectors and checkboxes to make no JavaScript single page sites. Not the most useful (except maybe for tabs) but a really cool trick non the less. You can really take advantage of the sibling selectors to make no JavaScript modals and menues as well!

Depending on use case, you can even skip the checkbox and use tabindex + :focus/:focus-within as well (I’m doing this for image zoom and footnote-popovers on a project I’m building). And you can use radio buttons for any kind of xor-like state eg tabs.

I do want to add a few notes of caution:

- Edit to add (first because it’s a usability issue for most users): if you use any of these tricks, test on mobile to be sure you have a working escape hatch. For example if you use :focus etc, you very likely want tabindex=“-1” on body to allow the user to exit focus with touch. For checkboxes/radios, you may need some kind of conditionally touchable label to deactivate.

- These kinds of tricks can be awful for screen readers, so do research the appropriate a11y solutions for your usage. And actually test with screen readers to verify you haven’t botched it.

- These kinds of tricks can also wreak havoc with various Readability modes, sometimes totally demoting content arbitrarily. This definitely requires manual testing or automated snapshot testing because most readability modes are intentionally undocumented to prevent cheating.

- A lot of folks recommend details/summary for a variety of interactive behaviors, but don’t fall into this trap. They’re basically a semantic black box for screen readers.

Do you have an example? Thanks.

Applications are open for YC Summer 2021

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact