¿Pestañas en HTML? | Programar Plus

Sabes lo que son las pestañas, Brian.

Quiero decir … Los usas todos los días, en todos los sistemas operativos. Todo el mundo sabe que existen en cada caja de herramientas. Todo lo que queda es “¡simplemente pavimentar los caminos de las vacas!” Pero cuando lo haces, es mucho más complicado que eso.

Brian Kardell comparte un poco sobre el progreso de llevar “Tabs” a HTML. Creemos que sabemos lo que son, pero hay que ser muy específico al tratar con las especificaciones y definirlas. Es complicado. Entonces, incluso si se decide por una definición sólida, una expresión HTML de eso no es exactamente clara. Hay todo tipo de expresiones de pestañas que tienen sentido a su manera. Imagínese marcar pestañas donde coloca todas las pestañas como una fila de enlaces o botones en la parte superior, y luego un montón de paneles debajo de eso. A eso lo llaman un estilo de marcado de “Tabla de contenido”, y tiene algún tipo de sentido lógico (“el marcado ya parece pestañas”). Pero también tiene algunos problemas, y parece que las secciones con encabezados son más prácticas (“Si tienes el encabezado, puedes construir el TOC, pero no al revés”). Las secciones picantes son un patrón totalmente diferente. Y ese es solo un problema al que se enfrentan.

No envidio el trabajo, pero espero con ansias el progreso en gran parte porque la creación de pestañas es un asunto complicado. No es difícil de hacer, pero sí muy difícil de hacer bien. He hablado en el pasado sobre cómo he creado pestañas muchas veces en jQuery donde solo un controlador de clic en una fila de enlaces oculta o muestra algunos divs coincidentes a continuación. Eso “funciona” si ignora la accesibilidad por completo (por ejemplo, cómo navega entre pestañas, gestión de enfoque, expectativas de ARIA, etc.).

Aquí está la discusión de ShopTalk y aquí hay una perspectiva diferente en una charla que tuve con Stephen en CodePen Radio donde entramos en nuestra <Tabs /> Reaccionar componente en CodePen.

Enlace directo →

(Visited 8 times, 1 visits today)