1. 34
  1.  

  2. 10

    For those who don’t want to watch the video, the trick is to nest blocks, where the title of a given tree level is in the element and the subtree consists of more details elements outside the summary, and use the rule

    details > *:not(summary) { padding-left: 2em; }
    
    1. 4

      I like this method of adding tree-like styling to these: https://iamkate.com/code/tree-views/

      1. 4

        Is this an in spec use of Summary/Details tags? Like, as opposed to using it for menus and modals? Maybe yes if information, no if navigation?

        1. 4

          After poking around on …

          https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details,

          https://w3c.github.io/aria/#group

          https://www.w3.org/TR/2011/WD-html5-author-20110809/the-details-element.html

          … I tend to think it is.

          The way I read those pages is that the details element is simply a group of stuff with a summary and the behavior that everything except the summary will only be displayed if the user wants to see it.

        2. 3

          Technically the trees are still trees and they’re still interactive without the rule. The rule just makes the tree/hierarchy visually noticeable 🙃