1. 34

  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 …




          … 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 🙃