Hacker News

encyclopedism
HTML Can Do That chrisburnell.com

dajonker2 hours ago

Popover, dialog, invoker commands, our entire production app uses these everywhere and it works really well! The fact that dialogs and popovers are rendered on the "top layer" and that nested popovers are also automatically stacked on top of each other and have 'cascading close' shows how well these standards were designed.

The only hard thing is still to position a popover near the element that triggers it, such as when you want to create a context menu that has to render above/below the button that triggered it. There is anchor positioning in CSS now but support is still limited and I find it hard to wrap my head around.

LLMs are also terrible at these new standards. If they even know about them, they often think they're not baseline yet and they have almost zero training data compared to the giant mountain of weird JS and CSS that people had to use before the introduction of these standards.

nozzlegearan hour ago

> The only hard thing is still to position a popover near the element that triggers it, such as when you want to create a context menu that has to render above/below the button that triggered it. There is anchor positioning in CSS now but support is still limited and I find it hard to wrap my head around.

I was going to suggest anchor positioning. I found it difficult to wrap my head around too, but once it clicks it's pretty simple. As a bonus, you can use it to position many other things than just popovers.

sublinear2 hours ago

I'm curious how many people are involved in the design of your app and what their concerns are.

Testing for accessibility and on mobile devices has a tendency to derail the best intentions. What tools are you using for those concerns? I'm not asking because I need advice. I'm asking because I want to know what you or your team did.

vee-kay33 minutes ago

[dead]

dematz5 hours ago

This comment by yurishimo should not be [dead], imo

>Just a heads up but datalist is not really a great solution if you need a strong contract. The user can still type whatever they want into the field and there is no fuzzy filtering or typo mitigation. Once you add those requirements, a library that gives you a more fully featured combobox is likely going to make a lot of sense in your project.

It is true! HTML can do a lot of cool stuff, it might get you 100% of the way depending on what you're doing. But if you have a lot of forms where users pick from a value set, and want to enforce no other strings and get a good search experience, datalist does not get you there.

yurishimo3 hours ago

Thanks for the vouch! The rest of the article was indeed good but I find a lot of value in hacker news comments precisely because someone comes back to the comments and lays out why what I just read might need a different perspective. If you just want to see cool stuff that a browser can technically do, we are all capable of reading the Chrome dev blog, but we come to HN for a wider perspective. Someone telling a war story about how some little tidbit came back to bite them is also valuable (imo).

honr3 hours ago

I mildly disagree. You still have to validate what the browser gives you. The user could have edited the "strong contract" using browser dev tools.

So, let the user type, then validate in javascript if you want instant feedback (by changing colors, say, to red / orange), but ideally don't fully block it from being seen by the server. And do the real validation on the server side. This is what I found to be fairly robust, while allowing mitigations if a bad rollout breaks something (delivering to clients is slower than updating something on the server side, most often).

jonahx2 hours ago

GP was addressing the client-side UX, not backend validation, which is an orthogonal concern.

yurishimo3 hours ago

Where did I say to forgo backend validation? Of course you validate on the backend as well, but the better UX would be to prevent the user from entering a bad value to begin with, assuming it fits within your team’s performance budget.

I’m not advocating for willy-nilly package inclusion, just highlighting a current shortcoming of datalist that is often not mentioned in these sorts of articles.

c-hendricks3 hours ago

That solves the validation portion, but not the rest of the UX issues

Gualdrapo5 hours ago

I seem to recall there was a proposal to add such thing to <select>s

bulder4 hours ago

I definitely remember seeing a post by a Chromium maintainer talking about starting development on a proof of concept implementation and surveying for semantics.

kotaKat5 hours ago

(iirc if you have [showdead] on you can click on the timestamp to the comment and will get a [vouch] option as a reverse-flag, fwiw. i see it and don't have showdead enabled, so enough people have re-vouched it!)

jamescun5 hours ago

I'm that minutia in your statistics that is still rocking NoScript in 2026, enabling JavaScript on a site-by-site basis, but this is increasingly difficult with the modern web.

Hopefully these and others modern HTML features gain adoption, along with realizing perhaps a Single Page Application isn't necessary in most instances.

I don't often have to write frontend code, but when I do, there is very little in terms of interactivity you cannot do with HTML these days, worst case a little sprinkle of something like HTMX.

bee_rider5 hours ago

Thank goodness you exist, the fingerprinters will be confused as to which one of the two of us went to their website!

jamescun4 hours ago

How? There are dozens of us! DOZENS!

Perz1val4 hours ago

How would you count?

steanne3 hours ago

"you don't have to, they'll tell you."

(+1)

jccalhoun2 hours ago

i'm right there with you!

gunalx4 hours ago

Single page applications are one of the most anoying web patterns i know of. Please just let me have one page for each ting to do so i actually can bookmark it properly.

phyzix57614 hours ago

Once backend and frontend became two separate teams frontend people didn't want to keep asking backend to make logic changes for state, so frontend took things into their own hands. The mistake was making it two separate teams.

tyre3 hours ago

This is possible and, in my experience building them, the norm. SPAs have routers and update navigation state, including history for browser Back/Forward

gunalx3 hours ago

Yes true. But also way to often neglected.

ThunderSizzle3 hours ago

Ive made SPAs in Blazor that make it a point to update the URL whenever a "navigation" occurs. I also made it a point to ensure refreshing or loading the URL restored the state.

It's a small problem compared to the ease of use for development you can gain via Blazor, so I don't see any reason not to solve it.

culi3 hours ago

On the other hand, converting a SPA to a PWA is often a breeze

evenhash2 hours ago

One thing you notice running NoScript is how prevalent Google is.

Even if a site doesn’t monetize with Google Ads, there’s a decent chance it’s pulling a script from ajax.googleapis.com, and Google still knows that you visited the site from the Referer of the script download.

nozzlegearan hour ago

Does HTMX work with NoScript? Doesn't it require JS?

ipsodan hour ago

Nope, doesn't work. Doesn't stop you from making it a PWA, though.

zelphirkalt4 hours ago

This is part of how I judge how well made or how shitty a website is. If it requires scripts from a dozen third parties, then it usually sucks and one can easily recognize when not much effort has been put into making it.

djoldman4 hours ago

oh my. Looks like NoScript is way better than what I've been using. Thanks!

https://noscript.net/

silvestrov4 hours ago

I'd really wish I could force ISO format for the date input as the current "platform native" is confusing for some users when the OS use a different language than the web page that is shown.

For some multi-country companies it makes sense to have all admin pages in English no matter the underlying OS language. Imagine sending a screenshot where the OS date format is different from what everybody else expects from an English page.

crote2 hours ago

Alternatively: have the <time> element actually do something by hooking it up to the new Moment API and having it display the specified timestamp in the user's locale. That would at least provide an easy way to have the input format and the display format be the same.

But yes, there's also a very good argument to be made in favor of having such localized elements follow the content's `lang` attribute - potentially with a `lang="initial"` to reset it to "whatever the user has configured for their OS".

hk13374 hours ago

I'd be okay with regional date format for the user but it always submits as ISO 8601 date format.

crote2 hours ago

That's already how it works, is it not?

jimmygrapes2 hours ago

Dealing with this right now. Got some people whose devices are set to display dates as dd/mm/yyyy and the janky pay submission form records it verbatim rather than translate to its internal mm/dd/yyyy format. If it's invalid date it will reject, but a guy submitted for August 4 and got denied for the system recording it as April 8. Spreadsheet MS Forms nonsense. Nobody cares.

hk__25 hours ago

Related to this, I’d love that HTML natively support sortable tables. This is a common need but every single time I have to reimplement it.

jwran hour ago

This is… not obvious. It's only easy if you want the simplistic approach of sorting lexicographically or numerically. But in more complex tables, you will often encounter cases where the data representation for sorting is different from data representation for display.

Of course most JavaScript-based tables get this wrong, too.

hk__239 minutes ago

You could have a `sortkey` attribute, a bit like <option> that has a `value` attribute in case the value you want is different from the value you display.

hahn-kev3 hours ago

I feel like there's so few times it would actually work how I want it that it seems like there's little point.

wild_egg4 hours ago

You want client side table sorting?

It's really easy to do this with server rendered HTML. Put a link with the sort param in the column headers and be done.

mxuribe3 hours ago

I used to do this in the early 2000s! Some folks back then would ask whether i was afraid that clicking a link (which loads a "new" web page) would slow things down and create an awful experience for users...but, my team and I would really focus on keeping web pages slim/lightweight to begin with...so it rarely was a problem. I don't think we were geniuses or anything like that, but keeping things light (always and from the beginning) enabled us to "cheat" (like this "hack" of the links in the column headers) in ways that were beneficial but with very low risk. Sometimes it took an extra moment or two at the beginning of an effort...but it ALWAYS paid off down the road, and in many different ways.

wild_egg3 hours ago

It still works exceptionally well in 2026 and generally creates better and faster experiences than an SPA with far, far less code.

hk__236 minutes ago

You don’t need an SPA for that; Wikipedia has client-side sorted tables for example.

culi3 hours ago

I hate what it does to my back button

hnal9433 hours ago

HTMX is the solution

zarzavat2 hours ago

So instead of using JS to sort the table directly, now you make a JS fetch() request to sort the table?!

It does make sense in one situation, if the table is a large server-side paginated one and the sorting is really an ORDER BY clause. But for a basic table that fits entirely on the client, it doesn't make sense at all. There are tiny JS libraries that will make <table>s sortable when you add a particular class name.

nozzlegearan hour ago

Trading one javascript for another?

xboxnolifes3 hours ago

I want tables that can be sorted on multiple columns without triggering a page refresh on every click.

wild_eggan hour ago

View Transitions are your friend

[deleted]3 hours agocollapsed

krapp4 hours ago

That's what javascript is supposed to be for. All of this is what javascript is supposed to be for.

HTML describes layout, CSS describes style, JS adds interactivity.

Want sortable tables? Get a jquery plugin and spend five minutes, done.

This was all solved a decade or more ago.

hk__234 minutes ago

> Want sortable tables? Get a jquery plugin and spend five minutes, done.

I want sortable tables without having to rely on a third-party plugin to a third-party library. HTML describes content, not just layout. It would be a `sortable` attribute on the table, just like you already have attributes that have nothing to do with layout such as `autocomplete` or `aria-*`.

krapp7 minutes ago

Everyone already complains that browsers are too bloated and now you want to have every browser support sortable tables when a single, simple JS file would work?

zephenan hour ago

> HTML describes layout

News to me.

krappan hour ago

That's understandable, because almost no one actually works with HTML directly anymore, but it's true. HTML contains tags like <H> for headers, <p> for paragraphs, <br> for line breaks <pre> for prerendered text, <ol> and <ul> for ordered and unordered lists, <table> for tables as well as <main>,<div>,<header>,<section>,<nav>,<article>,<aside>,<summary> and <footer> to both explicitly and implicitly describe the layout of an HTML document. In fact, "HTML" itself is an acronym (HyperText Markup Language) in which the "Markup" describes the function of HTML to "mark up" text in a similar way that editors once did in the print industry, describing which parts of the text should be bold, italicized, etc. or divided up and in what way.

crab_galaxyan hour ago

HTML describes the structure of a document, not really the layout.

If HTML had <inline> <block> <column> <row> or <grid> tags, sure. But CSS determines the layout via display/position properties.

krapp14 minutes ago

<span> is inline

<div> is block

<table>,<tr> and <td> are your grid, row and column.

CSS improves on describing layout with positioning but HTML was still doing that before CSS even came along.

aitchnyu4 hours ago

Saw Grouped <details>, ctrl+F'd the hidden content and it opened and highlighted the text in Firefox. Was waiting for this fix ever since I learned about details.

culi3 hours ago

You can also control this behavior for almost any hidden element with the `hidden="until-found"` attribute

https://css-tricks.com/covering-hiddenuntil-found/

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

hakesson5 hours ago

Yeah, I'm a great fan of both HTML and CSS "can do that". I find more useful things on the CSS side like :has, keyframes and container queries. Why duplicate code when you have it for free :)

Sohcahtoa825 hours ago

Yeah I've seen a page that described a whole bunch of things you can do with CSS. So many animation options!

stagas4 hours ago

I started textlog.cc as an experiment to see how far I can go without introducing JS. It turns out, pretty far! If you exclude the Web Push notifications which required a Service Worker script, all the rest is server-side rendered React. As a visitor, with all the hover cards and popovers you would think there is some JS going on, but it’s all HTML-only. I am enjoying very much the constraint and it hasn’t hindered any progress. It’s a proof a lot can be achieved by just HTML.

florianherrengt2 hours ago

I’m a big fan of simple things but I always go back to using a library or framework because it’s much easier to create a good, consistent UX

jdlshore5 hours ago

The “hidden until found” feature surprised me. What’s the use case for something like that?

dofm5 hours ago

Looks like it's basically like a one way show-hidden mechanism, but the browser's built-in search will pop it open on matches.

So you could use it for additional notes, things like "view pricing terms" or "show exclusions" on product listings — stuff people need to read only when they need to read it — without it being hidden from them if they search for it.

dspillett4 hours ago

It won't be an intended use case, but it might be a convenient place to put poisoned content for the “benefit” of scrapers…

Though humans will accidentally find it too, so using a details tag with appropriate summary as a warning would be more friendly than just hidden content. It'll still get opened, but the user at least has a way of closing it again afterwards.

Also before using it I'd want to check what old UAs including accessibility tools tend to do when they hit a value that they don't recognise for the hidden="" attribute - would what they don't recognise as a valid value result in defaulting to the content being hidden or visible/read/other?

megaman821an hour ago

I use it for tabbed content. That way search will reveal the tab and content on page search match.

wvbdmp4 hours ago

Pretty cool! I’ve been using <details> for this. One example would be a collapsible tree hierarchy of our organization that you can CTRL+F and still find collapsed teams and people. Or an accordion, or anything collapsible, really.

pseudosavant2 hours ago

There is a common accessibility pattern where the first tab focusable item is a "Skip to content" link in the top left corner. The link is initially hidden until you tab to it. That is the only use case I could think of when checking it out.

akersten2 hours ago

On a big page with lots of collapsed content, I want control+f to search it and find anything in the collapsed sections without having to manually expand them all before I hit control+f

seki2855 hours ago

One thing that comes to mind is JS-less image preview, clicking on an image thumbnail reveals the full preview.

dspillett4 hours ago

Though that wouldn't have a method of closing the full image afterwards, if you have a few thumbnails and want one full to be open at a time (closing when the next is selected).

prinny_an hour ago

I eagerly await the day we can fully style the date & time component so that we can put all those JS libraries to (a well deserved) rest.

Dweditan hour ago

Grouped Details example really needs a hand cursor. An "I" cursor for selecting text doesn't tell you that an element is interactible.

bingemaker5 hours ago

<img> also supports "srcset" which can make the image component responsive. Hope they add a placeholder to it which can account for loading state.

hk13374 hours ago

The only one not mentioned I think should be utilized more is properly names in html forms. Everyone has gotten used to just doing things in javascript when a lot of times if you name the fields in a correct way, you can do a simple form post and let the backend validate it with little to no modifications (hopefully none if you did it correctly).

I think the big issue with some of items listed is not all the browsers either implement it or they implement it differently. I'm sure your first instinct will be Safari but Chrome, while it may implement a lot, tends to do it quite different than the others. The date picker in browsers is one feature that comes to mind.

dawnerd2 hours ago

I use most of these but the one that somehow slipped past me was the name attribute for details. That's going to be incredibly useful. I want to go rip out all of the js accordions now.

yipinwong3 hours ago

JS has been in front-line for these functionalty, and HTML has been dog-slow to catch up with slow standardization (not based on usage more academical) and recommendations.

HTML can do that. yes. but adoption? welp, I don't really care nor will I use it unless I have to. I will use whatever was available in practice and continue to use them.

afavour2 hours ago

Odd to both complain about adoption and out yourself as someone unwilling to move to a better solution because it’s less familiar. What do you expect the answer to be here?

underdeserver30 minutes ago

Loved the Zelda reference.

yoz-y5 hours ago

I think it’s neat but at the same time I’m cautious about implementing an “almost feature” in what’s supposed to be a declarative language.

Now everybody needs to support it and nobody can really use it.

I’m talking about the features in work like media controls on dialog buttons.

220hertz2 hours ago

Here we all are in 2026, talking about HTML, like madmen.

br0ceph14 minutes ago

js is web remote code execution. we need to return to an html only browser world.

theres no reason for a browser to be an OS/compiler/abi, for remote code.

this is the dumbest shit in the history of computers. why didnt everyone have they torches and pitchforks, when web2.0 became a thing?

ChadNauseaman hour ago

my personal favorite, although css not html, is “field-sizing: content”. Finally with iOS 26 we can have input fields that expand to fit the content

hendurhance4 hours ago

Most people use divs for everything now. This is a breath of fresh air.

nobleach3 hours ago

With the exception of using divs for things that have a more appropriate element. Buttons for example - for the love of all that is holy - when I see an onclick handler and aria attributes on divs, I think, "couldn't you have restyled the button??"

xboxnolifes3 hours ago

Even worse, using buttons everywhere that you should use an a href.

cush2 hours ago

It's weird that the pure html dialog still doesn't handle inertness yet

CodesInChaos4 hours ago

What I'd like to see are searchable drop-downs (not to be confused with text input with suggestions).

And the date/time picker controls are too limited for many applications.

Aachen3 hours ago

Do I understand that first one correctly as datalist without allowing the user to submit a value not on the list?

CodesInChaos3 hours ago

That, and how it's rendered needs to be separate from the value the the input gets. Just like `<option value="123">John Doe</option>` or ideally even rich html like `<option value="123"><small>123</small> John Doe</option>`.

I guess the best way to render it would be exactly like `<select>` when closed, but when opened there should be a search box where it'd normally show the first option.

Clicking search would call a javascript function, which could then adjust the set of available options via the standard DOM APIs.

Alternatively they could add support for a special element `<selecthead>` which can contain whatever you want, which would render fixed at the when the drop down is opened and can be interacted with like normal html elements. Then you could place your own search fields inside.

hyperhello5 hours ago

I don’t understand why the group invented these new attributes and methods of action for dialogs that don’t seem relevant to anything else. Was there some silly patent to work around?

esprehn5 hours ago

As opposed to what? Not sure what the alternative you're picturing is.

hyperhello5 hours ago

popovertarget="example-dialog" popovertargetaction="hide"

It’s all binding. This is what JavaScript is for: dynamic content.

Aachen3 hours ago

Input fields are dynamic elements. Textareas can be resized. Pages can be scrolled. Why implement everything anew in custom code if it can be implemented once per browser engine in native code, native UI, and expected/homogenous UX?

hyperhello2 hours ago

I mean the action and target attributes don’t seem to appear anywhere else but the popover api. I’m in favor of HTML dialogs, I just don’t see the point in the trend of making everything into this declarative nightmare it’s becoming when we have onclick=dialog.show() without even quotes.

esprehna minute ago

[delayed]

werdnapk2 hours ago

<details> is still not animatable?

peesem2 hours ago

once again, i will ask: why do people care so much about only having one <details> element open at a time? let me see what i want to see!

devinhades3332 hours ago

This page loads so slow it did not evenwork for me. guess html was not enough

mabini4 hours ago

Just because you can, it doesn't mean you should

Aachen3 hours ago

Exactly. Why reïmplement features in JS just because you can? Waste of effort and usually a worse user experience!

Wait, that wasn't what you meant?

metalliqaz2 hours ago

What on Earth is hidden-until-found for?

encom3 hours ago

>popover

Why are we cool with popups again? Anything that interrupts and blocks content is annoying, and is nearly guaranteed to make me leave immediately. It can be used responsibly, but it almost never is.

vazark2 hours ago

It is commonly used in dashboards when you want a confirmation dialog

teddyh3 hours ago

totallygeeky20 hours ago

I've been tooling with site for years now and I'm always shocked at what can be done with raw HTML. These are some really neat examples, some work a bit funny when it comes to mouse vs. arrow key functionality though (in particular the dropdown/autocomplete), I'm wondering if that's an Edge specific issue or Chromium.

bellowsgulch4 hours ago

The older I get, the less I want to use new browser features that have already been somehow possible with existing ones that typically have been around for literal decades.

Adopting them makes a future with multiple browser engines more labor intensive and unlikely as the number of standards targets one is required to support grows and it becomes a game of asking yourself what sites you want your browser to support.

If you don't have a lot of experience in web software, you might think, that's a silly thing to think about, but I think it's that level of maybe exceptional thoughtfulness that has really profound ramifications. If you do have a lot of experience in web software and you think it's silly to think about, you suck.

[deleted]4 hours agocollapsed

zuzululu2 hours ago

ngl i was surprised for the modal dialogs i always thought we needed javascript as i have been doing so forever with jquery

a bit off topic but wish we could bring back <frames> and <tables>. just good old fashioned stuff from the late 90s

yurishimo21 hours ago

Just a heads up but datalist is not really a great solution if you need a strong contract. The user can still type whatever they want into the field and there is no fuzzy filtering or typo mitigation. Once you add those requirements, a library that gives you a more fully featured combobox is likely going to make a lot of sense in your project.

vlucas5 hours ago

Very true, and ran into this one specifically myself when going down the "HTML can do this!" road. HTML can NOT, in fact, replace a good combobox with search input. Datalist has significant shortcomings. I wound up using a React island for this single input inside otherwise normal HTML, despite my own objections, because it really it just that much better than the native options.

sarchertech5 hours ago

There’s still browser/OS typo mitigation.

Groxx3 hours ago

Wow, yeah - years later and I still get nothing in Firefox, and support is quite spotty in general (and clearly still buggy): https://caniuse.com/?search=datalist

Hard pass, that's essentially unusable.

reaperducer5 hours ago

That's the whole sanitize vs. validate argument debate that keeps coming up.

How you handle it is project-dependent. But if you're doing a real web site, not an SPA, you can show an error/help page, or re-load the current page with the error/help message.

yurishimo2 hours ago

For sure; and it will continue to be an issue as long as we allow old browsers to exist. I’m definitely not saying you shouldn’t have backend validation, just highlighting where the frontend validation provided by the browser is not as universal as it might appear on the surface.

FWIW I find the native date picker to also still be quite poorly performing in practice, despite quite robust browser support. I wish it worked better but for many reasons, I still see plenty of users (or bots?) who submit dates in the wrong format for whatever reason. My current hypothesis is largely focused on password managers though since they will often do whatever they want directly in the value attribute of an input element.

Arch-TK2 hours ago

This is specifically about good UX not about security, validation, or sanitisation.

iamgopal5 hours ago

[dead]

Theoleff2 hours ago

[flagged]

karamalaskar4 hours ago

[dead]

hollowturtle4 hours ago

An "HTML Can't Do That" would be hundreds pages long, and at the pace of getting features like dialogs every decade we're limiting ourselfs on any further development and creating serious apps. It wasn't created for apps, it was created for light document formatting. When we will pretend a drawing api we can call directly from webassembly? Outside of web ui frameworks are doing just fine and way better and more performantly than html and dom

gear54rus4 hours ago

> When we will pretend a drawing api we can call directly from webassembly?

Hopefully, never. There's enough ad-blocking arms race as it is.

hollowturtle3 hours ago

You confuse marketing websites with productivity apps, google docs, figma and many more already render on a canvas using webassembly or not. It's a matter of exposing the right tools

hn-front (c) 2024 voximity
source