Details, details, details...



  • 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...

    0_1474654680650_Untitled.png
    ...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



  • Pull requests accepted!



  • showmeyeah



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

    showme

    No.




  • I survived the hour long Uno hand

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


  • Impossible Mission - B

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

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

    Does anyone? :trolleybus:


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.