Hacker News Reader

Comment by jraph | Hacker News Reader

Completely off-topic, but I discovered the existence of the <details> HTML tag [1] with this page.

I was surprised that I could unfold these questions at all with Javascript disabled. Usually, I am stuck with this kind of pages.

Please webmasters, use <details> for your FAQs if you want foldable questions.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...

View on HN

The issue is that the compatibility and styling (animations etc.) are not fully supported or available. This should have been standardised much earlier, alas here we are with a half-assed solution to a very common pattern.

I guess you can always hack something in Javascript if you wish to have animations, which is always better than to go with an implementation in full Javascript.

The one thing that does not stop boggling my mind on a daily basis is the lack of a consistent feature detection and the subsequent fallback mechanism for the web. I need to look at all these weird angles and use polyfills just to check if the feature is there in the first place. Even then, I cannot accomplish this without JS, and cannot react to it without JS.

It's not a choice I have, so fuck it: I'll make it viewable without JS, and usable with JS.

You can always detect whether tag <foo> is supported in JavaScript by testing whether HTLMFooElement is defined (but I understand you are speaking more generally).

I understand your feeling, and by making it usable without JavaScript you are already going a long way, but using those tags also makes your pages accessible.

Making your pages beautiful with animations is only extra. Things already work out of the box in any case without <details> without effort, only better if it is supported.

HTML is mostly designed to gracefully degrade, detection is not always necessary.

How would you like things to be handled? Handling retro compatibility is hard and I find HTML does a good job at it.

Out of a stance that is now more political than anything, the applications I've been building are entirely operating with server-side HTML templates with absolutely minimum to no JS (only for the occasional page load event or whatnot). When you respond to requests in under 100ms (plus network latency), you don't need an SPA layer to fool people into thinking that they're not in a web page.

Bosses are particularly impressed with the speed.

And I guess they are also simpler code wise? :-)

I've built a website like that, for someone drawing comics. Fully works in simple HTML, looks better with CSS, and faster and slightly more enjoyable with JS. The JS avoids jumps and flashes (especially annoying since the website has a black background) when opening a page by only reloading relevant parts so the browser does not need to fully redraw the website, with great care to handle history correctly and consistently with what would happen with JS disabled.

There are pretty straightforward CSS-only solutions too, for example: https://stackoverflow.com/a/38215801/584552

And I bet the CSS animations look a lot less janky than JS equivalents.

As an user, animations are not my issue at all.

Indeed. Or rather: as an user, the animations only an issue when they're broken (or performance-intensive). Which immediately suggests a way for correctly doing such expandable paragraphs: just don't animate them if you can't make it work perfectly everywhere.

Sounds like a good feature to me!

Don’t style it, let the user agent use the appropriate style.

Don’t animate it, let the user agent use the appropriate animation.

<details> are quite handy for github comments. (Yes, they work!)

Unsupported by the usual suspects, that's why.

They are disappearing and it gracefully degrades, I think we should not care in most cases now :-)

edit: and I guess a JS shim can be used if it really matters.

Edge never really gained popularity so that disappearing (with Chrome-Edge) is neither here nor there. IE11 is here to stay until at least 2025.

In no small part due to Microsoft's decision to make IE11's rendering engine the only browser that could support: Java Applets, Flash, ActiveX, that almost all major companies and large governments use. If they had incorporated those into Edge and hidden them behind ten layers of security warnings, we wouldn't be in this mess.

Try to service large corporations and governments. Our IE11 user share is over 70% for the product (but under 30% for the marketing/public pages). This won't change until every last Java Applet/Flash/ActiveX control dies, and that isn't happening fast -- companies literally in 2019 still sell products using the tech' (Oracle!).

> Try to service large corporations and governments. Our IE11 user share is over 70% for the product

I was excluding this from the "most cases", but thanks for the wake up call anyway. Outch.

You beat me to it :)

Yes this is too bad. Great feature.

Convenience link (obviously implied: IE, Edge don't support it): https://caniuse.com/#feat=details

Woah, I was using the checkbox CSS hack to do exactly this, I had no idea there was an actual element for this.

Reply on news.ycombinator.com