Details, details, details...

anotherusername

So... long story long, I had written this nice shim for <details> and <summary>, and I wrote it to

test 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 me

my 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 either display: none or not, depending on the checked state of that checkbox, and CSS to make the nice arrowhead in the ::before, which also depended on the checked 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?

@ben_lubar

ben_lubar

Pull requests accepted!

tdwtf/plugins/nodebb-plugin-tdwtf-customizations/custom.less at c40340383c1ce0b3c848ba3f7da417f4eccd0384 · boomzillawtf/tdwtf

Custom CSS and headers for what.thedailywtf.com. Contribute to boomzillawtf/tdwtf development by creating an account on GitHub.

xaade

showme

yeah

Luhmann

@xaade said in Details, details, details...:

showme

No.

Maciejasjmj

@xaade said in Details, details, details...:

showme
yeah

https://www.youtube.com/watch?v=SU0Ypufo6BM

Yamikuronue

@xaade it's spelled Shomi, duh, weren't you paying attention to @Lorne-Kates 's rant?

masonwheeler

@Yamikuronue said in Details, details, details...:

weren't you paying attention to @Lorne-Kates 's rant?

Does anyone?