Details, details, details...
-
So... long story long, I had written this nice shim for
<details>
and<summary>
, and I wrote it totest for built-in support and kick in only if the browser didn't support them already...
var isDetailsSupported = (() => { var d = document.createElement('details'); if (!('open' in d)) return false; var p = d.appendChild(document.createElement('p')); p.appendChild(document.createTextNode('?')); document.body.appendChild(d); var h = p.offsetHeight; document.body.removeChild(d); return !h; })();
So that was working very nicely, until
all of a sudden the nice ▶ or ▼ wasn't showing up anymore...
...do those "Answer" things look clickable to you? Well, they are.This puzzled me, so I first assumed maybe I'd broken my userscript. But there were no errors in the console, and it still seemed okay. Then I inspected the element, and lo and behold, there's the bog standard
<details>
and<summary>
tags, which tells memy script definitely didn't do anything
...because it was supposed to replace
<details> <summary>...stuff...</summary> ...stuff... </details>
with
<label class="details"> <input type="checkbox"> <span class="summary">...stuff...</span> <div>...stuff...</div> </label>
... and there was CSS to make the checkbox
display: none
, and CSS to make the<div>
with the stuff to be eitherdisplay: none
or not, depending on thechecked
state of that checkbox, and CSS to make the nice arrowhead in the::before
, which also depended on thechecked
state of the checkbox so it indicated opened or closed.So that puzzled me even more, and I wondered if maybe Ben changed his shim and it was making mine break. I put a
console.log
in my script, and it wasn't even running my shim. Which meant... could it possibly be... FF 49.0 added native support for<details>
and<summary>
? ... but there's no opened/closed arrowhead?So I took the raw HTML and stuck it in a blank HTML document and loaded it and, lo and behold, there is native support now, and what's more, it has an arrowhead, just like it's supposed to. So something in NodeBB's CSS is killing the arrowhead.
Anyway, to wrap this thing up, I discovered that the rule
details, summary { display: block; }
was killing it, because the arrowhead widget is a list style, and that changing it to:
details { display: block; } summary { display: list-item; }
fixes it.
Pretty please?
-
Pull requests accepted!
-
showme
yeah
-
-
@xaade said in Details, details, details...:
showme
yeah
-
@xaade it's spelled Shomi, duh, weren't you paying attention to @Lorne-Kates 's rant?
-
@Yamikuronue said in Details, details, details...:
weren't you paying attention to @Lorne-Kates 's rant?
Does anyone?