Secciones picantes | Programar Plus

0

¿Qué pasaría si HTML tuviera “pestañas”? Eso sería genial, digo yo. Dave ha estado gastando parte de su tiempo y energía, junto con un grupo de “Tabvengers” de OpenUI, en esto. Mucha investigación conduce a un pequeño giro en la trama:

Nuestra investigación mostró que hay muchas variaciones de lo que constituye un control de pestaña. También hay muchas variaciones en los patrones de marcado. Hay variaciones escritas en sistemas operativos, videojuegos, jQuery, componentes React y componentes web. Pero creemos que hemos hervido parte de este océano y hemos llegado a un consenso decente sobre lo que podría ser un buen <tabs> elemento… y no lo es <tabs>!!!

Todo se reduce a las posibilidades de diseño. Claro, el tipo de interfaz de usuario que se parece a las carpetas de manilla de papel literal es un tipo de diseño asequible. Pero es funcionalmente similar a un acordeón uno a la vez. Y los acordeones son bastante similares a <details>/<summary> elementos, por lo que tal vez lo más útil que HTML podría hacer es permitirnos usar diferentes posibilidades de diseño y tal vez incluso cambiar entre ellas según sea necesario (por ejemplo, en diferentes anchos).

Entonces la pregunta es, ¿qué HTML admitiría todos esos diseños diferentes? Eso en realidad tiene una respuesta bastante satisfactoria: HTML semántico normal basado en encabezados, así como:

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

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

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

Lo que significa…

  1. El HTML base es sólido y puede mostrarse bien como una opción de diseño
  2. Los encabezados pueden convertirse en una “pestaña” si ese diseño en particular
  3. Los encabezados pueden convertirse en un “resumen” en ese diseño en particular

Esta es la base de lo que llaman los Tabvengers <spicy-sections>. Simplemente envuelva ese HTML semántico en el componente web y luego use CSS para controlar qué tipo de diseño se activa y cuándo. 

<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 inventó un ejemplo:

También hice uno para tener una idea:

Aquí hay un video en caso de que estés en un lugar donde no puedas saltar fácilmente y cambiar el tamaño de una ventana del navegador para sentirte tú mismo:

Este es un componente web totalmente hecho a mano por ahora, pero tal vez pueda iniciar todas las conversaciones correctas en los niveles de escritura de especificaciones e implementación del navegador, de modo que algún día obtengamos algo similar en HTML y CSS “reales”. Estaría feliz con eso, ya que eso significa que menos desarrolladores (incluyéndome a mí) tienen que codificar “pestañas” desde cero, y probablemente arruinar la accesibilidad en el camino. Cuanto más de eso, mejor.

Si desea obtener más información sobre todo esto, consulte ShopTalk 486 a las 15:17. Además, aquí hay algo de exploración de Hide de Vries. Y si está interesado en obtener más información sobre los componentes web y cómo pueden ser increíblemente útiles, no solo para cosas como esta, sino mucho más, consulte la reciente charla HTML de Dave con Superpowers.