handling elements that use javascript when javascript isn't available.
Hey, if you have an element that utilizes javaScript, perhaps a button that opens up an accordion, however the user either has javascript turned off on their browser or something in your code/browser causes it to fail to load, how do you appropriately handle that element, since it won't do anything?
i'd appreciate any insight. Thanks in advance.
12 Replies
for an accordion, i would use
<details>, which doesn't require any javascript at all to function
if you want to keep just 1 open at a time, then you can emulate support for it using javascript, but it isn't something absolutely mandatory for it to work
but for other things, well, it depends
for example, a form that needs javascript is a bad form
you can submit and have validation without javascript
but, for example, for a dialog with extra content, it's a good idea to have a page that google can index and that the non-javascript links can default to
for a menu, there's the checkbox hack
or use details, if you want people to scream and shot, but works fine-ish
it really really depends exactly on what you want to do
and how you want it to work
and how happy you are with the failure methodsi thought
details wasn't fully supported yet? wouldn't you need js for a fallback if browsers don't support it?
and for forms, i thought you needed javascript to pull the data to either use it or send it somewhere?where did you get that idea that
<details> wasn't supported?
it's been supported by chrome for 13 years, and by firefox for 8 years
what is new is setting a name attribute and only one of them is open, which you have to polyfill in javascript
corejs should have it working, or you can ignore it
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#multiple_named_disclosure_boxes
and about the forms, what you said is absolutely not true
forms existed before javascript was a figment of anyone's imagination
you can use javascript, but you don't have toi've just seen most people use js instead of
details, i knew it existed but hadn't seen it used or come across it so i assumed it wasn't a supported thing. with details the whole summary element is clickable, if you have a button you want to click instead of the text as well, which is what i more commonly saw, i assume that'd need js
in terms of fallbacks, i assume fallbacks for accordions that use js would just to have the content be visible if the js can't load. for styles you want to apply if js isn't active, you'd put them between a noscript tag right?oh, so with forms how is it sent somewhere, is it a data attribute? i had this sort of thing in mind when i mentioned it. i assume to check the correct answer for something like this you'd have to compare the input against an answer with js?
no, you can make the
<summary> look like a button
and in terms of fallback, what exactly are you referring to?
oh, fallbacks for the element
well, depends
if the javascript is disabled, you can do nothing
just show everything
depending on how you implement it
the action and the method attributes control that
you have to do ALL, ANY AND EVERY SINGLE CHECK in the server
doing in javascript is "optional"
better yet: html already has some validation included!
and you can do a lot more than you imagine with just the html validationi meant something like this, i assume changing the
summary's display to achieve that isn't valid? And when i referenced the button, i meant something like the plus icon on the end. I assumed you'd have to .addEventListener that if you just wanted that to open it since the whole summary element is clickable. https://codepen.io/deerCabin/pen/XWvKyRy
and for the forms, do you put a url in the action and it sends it there? also, do you have an resources for the html validation for it?you assume absolutely wrong
you can easily put an icon there, and you can change the display of
<summary>
you can do an inline-grid with grid-template-columns: auto 24px
and for the form, yes the action is where the url goes
and if you use method="dialog" to submit to a dialog, the action is ignored
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#actionoh cool, what if you just wanted the icon to activare the accordion though?
and thanks for the link 🙂
you do absolutely nothing
and everything activates it
if you want just the icon, then you can use
pointer-events: none on the element with textohh i see, thank you for all the help
you're welcome