Reminder: if you don't use JavaScript, you don't get crashes. And don't need loading screens.

I'm liking this post:

And he's got a list of things he wants to be able to do without JS. discuss?

"1. Why can't we have a standard search element that filters a list on the client side (similar to how ng-repeat | filter: worked on Angular)?
2. Wouldn't a standard HTML element for drag-and-drop sorting be awesome?
3. More advanced validation functionality, like comparing equality of two different form fields.
4. The ability to do the modal/checkbox trick above without it feeling like a hack and writing weird CSS."

Show thread

@alcinnz Basically what you need for 4 is the ability for an element to toggle the hidden attribute on another element. Maybe a 'shows' and/or 'hides' attribute?


@alexbuzzbee I'd add that I think modals have become a useful and dominant enough UI pattern on The Web (particularly in the form of "lightboxes") that I believe they should be native to HTML.

Maybe there's an attribute on links and buttons for that. Which could also set a side of this element to place it on, or maybe even pull in entire webpages for UIs like Stripe or OpenStack Horizon.

@alcinnz Perhaps add a 'modal' attribute to <button> that opens a modal document iframe-style? Or perhaps a modal element which is given by id?

Actually, there is already an element for dialogs, lightboxes and modals, but it's still not supported everywhere (ex. It doesn't work on Firefox for android)

@ranfdev @alexbuzzbee From what I can tell from that page, this doesn't fully answer the need: how do you open the dialog without JS? But it would be useful to encourage using this element alongside what we were discussing.

You still need a bit of js to toggle the open attribute of the <dialog>, but at least it should be more accessible than a custom modal.
Maybe they could add a way to connect the value of an attribute (like open="true") to a checkbox's state

Sign in to participate in the conversation

For people who care about, support, or build Free, Libre, and Open Source Software (FLOSS).