Spicy Sections – CSS-Tricks

What if you had “tabs” in your HTML? I. Dave says he is spending his time and energy with a group of “Tabvengers.” open UI, Therefore. a lot of research It leads to a bit of a twist.:

Our research shows that there are many variations of the elements that make up a tab control. There are many variations of markup patterns as well. There are variants written in operating systems, video games, jQuery, React components, and web components. But we do think we’ve reached quite a bit of agreement about what we can do to make something good by boiling some of this ocean. <tabs> element … and it is not <tabs>!!!

It boils down to a kind of design affordance. Of course, the UI type that literally looks like a paper manila folder is a kind of design affordance. However, functionally, they resemble an accordion, one at a time. The accordion is quite similar to the following: <details>/<summary> Elements — Perhaps the most useful thing HTML can do is Different You can also design affordances and switch them as needed (eg to different widths).

Then the question is, What HTML will support all those different designs? It actually has a pretty satisfactory answer.

<h2>Header</h2>
<p>Content</p>

<h2>Header</h2>
<p>Content</p>

<h2>Header</h2>
<p>Content</p>

In other words…

1. Basic HTML is sound and can render well with one design choice.
2. A header can be a “tab” of a specific design.
3. A header can be a “summary” of a particular design.

This is the bass the Tap Vengers sing. <spicy-sections>. You wrap semantic HTML in a web component and then use CSS to control when and what type of design starts.

<spicy-sections>
  <h2>Header</h2>
  <p>Content</p>

  <h2>Header</h2>
  <p>Content</p>

  <h2>Header</h2>
  <p>Content</p>
</spicy-sections>

spicy-sections {
  --const-mq-affordances:
    [screen and (max-width: 40em) ] collapse |
    [screen and (min-width: 60em) ] tab-bar;
  display: block;
}

Brian Kardell made the following example:

I made one too to get a feel for it.

Here’s a video for those cases where you can’t easily pop over and resize the browser window to get the feel.

This is a completely handcrafted web component for now, but it could spark all the right conversations at both the spec writing and browser implementation levels, so that one day you might get something along these lines in “real” HTML and CSS. I’m happy with it because it reduces the number of developers, including myself, having to code “tabs” from scratch, and can mess up accessibility in the process. The more the better.

If you want to hear more about all of this, check it out. ShopTalk 486 at 15:17. If you’re more interested in web components and how they can be useful, you can learn a lot more from Dave’s recent talk, as well as cases like this one. HTML with superpowers.