Web design bits

Web browsers have become very strong display and UI platforms. They often need some wrestling but can reward with good performance, accessibility at lower cost and excellent stability and compatibility over time. Provided you avoid frameworks of course.

Layouts using display: grid and semantic HTML are often not directly compatible. This is because grid cells must be children of the DOM node using display: grid while semantic HTML may impose different constraints on the DOM tree. It looks like the DOM tree needs to be flattened to make nodes direct children which would entail removing some nodes that only add to semantics.

One of the typical solution to this is to use display: contents on nodes which are used solely for their semantics. No box will be created for nodes that use display: contents and their children will be used for layout as if their parent didn't exist in the DOM tree.

However, consider the following: 

<body style="display: grid;">
  <nav style="display: contents">
    <details style="display: contents">
      <summary style="grid-row: 1; grid-column: 1;">Click me to see the navigation</summary>
      <div style="grid-row: 1; grid-column: 2;">some stuff</div>
      <div style="grid-row: 1; grid-column: 3;">some other stuff</div>
    </details>
  </nav>
</body>

This won't work right and Firefox' inspector will indicate that the grid-* rules on children of <details> don't apply because they're not grid cells, except for <summary>.

What is needed is an additional style on ::details-content. While I'm not completely clear on the whole picture, it makes sense that non-<summary> nodes are in an implicit box in the DOM hierarchy and we therefore need display: contents for that box too.

This leads to the following CSS code: 

details {
    &, &::details-content {
      display: contents;
    }
}

#Updates

#Reports

#Notes