La idea de las “pestañas CSS” existe desde hace mucho tiempo. Si lo busca en Google, gran parte de lo que obtiene son pestañas CSS con estilo, pero menos cosas sobre la construcción de un área con pestañas realmente funcional. Al menos, funcional en el sentido en que pensamos en las áreas con pestañas hoy: haga clic en una pestaña, vea una nueva área de contenido sin actualización de página.
Abordar las pestañas CSS funcionales tiene una historia menos profunda. Brad Kemper estaba jugando con eso en 2008 tratando de utilizar el :checked pseudo selector con botones de opción y combinadores hermanos adyacentes. Esta es una técnica realmente genial que se puede utilizar para hacer cosas como expandir / contraer un menú estilo árbol o reemplazar visualmente elementos de formulario con gráficos (iniciada por Ryan Seddon).
Personalmente intenté jugar con las pestañas funcionales hace un tiempo y se me ocurrieron siete formas diferentes de hacerlo. La mayoría de ellos se centraron en el uso de :target selector de pseudo-clases y la mayoría de esas técnicas apestaban. Uno estaba bien. Todos tenían un defecto importante y era que era necesario utilizar hash de URL, lo que “salta” de la página al elemento con el ID correspondiente, y eso es totalmente inesperado, desigual y simplemente una mala experiencia en general.
Trabajar con el botón de radio /:checked La técnica es mucho mejor, pero había un error de WebKit de larga data que impedía que los selectores de pseudo-clases y los combinadores hermanos adyacentes trabajaran juntos. ¡Buenas noticias! Eso se solucionó a partir de las versiones estables del navegador Safari 5.1 y Chrome 13.
Así que hagamos esto :checked manera, que creo que es la forma más limpia de hacerlo por ahora y durante los próximos años.
¿Es un gato atigrado? ¡¿CONSÍGUELO?!
Estructura HTML
Un contenedor para todo el grupo, luego cada pestaña es un div que contiene el botón de opción (para la funcionalidad), una etiqueta (la pestaña) y un div de contenido.
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff
</div>
</div>
</div>Diseño CSS
Básicamente:
- Oculte los botones de opción (no necesitamos verlos, solo necesitamos que estén marcados o desmarcados).
- Haga flotar las pestañas para que las etiquetas caigan en una estructura de fila de vínculos.
- Absolutamente coloque las áreas de contenido exactamente una encima de la otra.
- Cuando un botón de radio está: marcado, haga que el área de contenido adyacente se ubique en la parte superior con el índice z (revelándolo visualmente y ocultando los demás).
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}Este es un CSS bastante ligero y es totalmente expandible a cualquier número de pestañas simplemente agregando más divs de “pestaña” en el HTML.
JavaScript
¡No hay, capitán!
Por que esta forma es asombrosa
- No usa: target, por lo que no hay salto de página y secuestro de botón de retroceso.
- Es accesible Los extraños botones de radio están ocultos con la pantalla: ninguno para que los lectores de pantalla no los vean y se confundan (presumiblemente) y nada del contenido real está oculto con display: none;
- Funciona en Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+ e IE 9+. Quizás un poco más profundo en Chrome, Firefox y Opera, pero Safari e IE son definitivamente correctos.
¿Por qué de esta manera no es genial?
- Requiere una altura determinada para el área con pestañas que apesta. Siento que puede haber una manera de solucionar este problema, aunque todavía no lo he entendido.
- Lo del botón de radio es un poco complicado.
- No tiene el soporte de navegador más profundo (IE 9 es mucho pedir). Si necesitas algo más profundo, ve a JavaScript.
Consíguelo, lo tengo, bien
Solo por diversión, agregué algunas transiciones a las pestañas en la demostración en vivo.
Ver la pluma
Pestañas CSS funcionales de Chris Coyier (@chriscoyier)
en CodePen.
El asombroso futuro teórico – display: stack;
Como mencioné, lo del botón de opción es un poco complicado. Es genial que ahora podamos hacer esto y la experiencia es bastante buena, pero la forma en que tenemos que codificar no es elegante ni intuitiva. Tab Atkins, que escribe especificaciones de CSS, piensa display: stack; es probablemente el futuro de una interfaz de usuario con pestañas a través de CSS.