OT: marquee tags were a missed opportunity to implement horizontal scrolling often used on shopping websites. Now it uses JS to achieve the same.
I have been trying to find other more commonly known UI patterns that could be done natively. The time has long come for tabular data to be put into HTML tables just by referencing the source. Xslt almost did that. Another one is integrating xml http requests with native html. I think HTMz came close to this.
There's a usability and design issue with that as you lose what you're reading as it scrolls off the screen. Also, scrolling is a styling issue and not a document description issue which is what HTML is for.
Note: <marquee> has never been part of any HTML standard since the beginning except the current one which only has it for the purpose of marking it obsolete so people will quit using it.
Sounds great <table type="text/csv" src="mydata.csv"> Then have it generate actual html so that you can target th's, tr's and td's with css.
I believe the lowest hanging fruit would be <div src="article.html">
I think formData should also be available as interactive JSON but perhaps it is possible to also populate a form with fields from a json with something like:
<form src="mydata.json">
<table>
<input name="baz" type="number">
</table>
</form>
Where mydata.json is: {"foo" : "bar", "baz" : "42"}
And have something like this come out: <form><table>
<tr>
<td><label for="foo">foo</label></td>
<td><input type="text" name="foo" value="bar"></td>
</tr>
<tr>
<td><label for="baz">baz</label></td>
<td><input type="number" name="baz" value="42"></td>
</tr>
</table>
</form>
It wouldn't cover everything but it is very nice not to have the later if you don't really need it.
> marquee tags were a missed opportunity to implement horizontal scrolling often used on shopping websites. Now it uses JS to achieve the same. I have been trying to find other more commonly known UI patterns that could be done natively.
Are you sure you are talking about the functionality of the marquee tag? What exactly do you mean by "implement horizontal scrolling often used on shopping websites. Now it uses JS to achieve the same"?
For a banner-type text "Sale: 50% off until New Year" I can imagine this. And this is possible with almost no JS, by using a CSS animation on translateX. I think you need to pass the initial width of the content one time from JS to CSS via a custom property IIRC, and update that variable on resize, for example using a ResizeObserver, to avoid a jump when reaching the "wrap around"...
But – sorry if this a misunderstanding – I have a sneaking feeling that you might also have things in mind like swipable horizontal lists etc?
This is also possible using CSS in theory (scroll-snap and overflow-auto, and CSS to hide the scrollbars). But last I tried to use it, it simply wasn't good enough to sell it, compared to a fat JS library that did the trick, perfectly, on mobile and desktop.
When it comes to UX niceties, I feel it's pretty common to have HTML+CSS solutions that are good enough in theory, but suck in practise.
For the horizontal scrolling with "snap", I would also like a good JS-free solution. But I feel that the more interactive and complex the UX patterns become, it would be senseless bloat to build a specific implementation into the platform.
I think that "autocomplete" inputs are a good example for this, as discussed in another thread.
I once tried to implement a custom autocomplete using datalist (including dynamically updating the list with xhrs). In the end, the native element had so many issues that it was a waste of time and a JS solution was way better. At the time, that JS solution was Alpine.Js, because it was a b2b app with minimal a11y requirements and JS-allergic developers.
Within an hour, I was polishing keyboard use while the "near-native" solution using datalist was broken in a thousand different ways in every browser and in the end didn't work well at all.