Skip to main content
1 de 4
Shaz
  • 29.2k
  • 18
  • 40
  • 61

Voy a aportar mis dos centavos:

En cuanto a accesibilidad, si bien la versión con JavaScript incluye botones "nativos" <button>, lo cual es recomendado, en términos de accesibilidad un lector de pantalla debería entender perfectamente el contexto de la solución con solo CSS si se utiliza role="button":

section {
  display: none;
}

input[name=pestana] { 
  display: none; 
}

#seccion-1-box:checked ~ #seccion-1,
#seccion-2-box:checked ~ #seccion-2 { 
  display: block;
}
<label for="seccion-1-box">Mostrar sección 1</label>
<label for="seccion-2-box">Mostrar sección 2</label>

<input type="radio" name="pestana" id="seccion-1-box" role="button" />
<input type="radio" name="pestana" id="seccion-2-box" role="button" />

<section id="seccion-1">Soy la sección 1</section>
<section id="seccion-2">Soy la sección 2</section>


No conozco una definición detallada sobre si es una buena práctica o no usar solo CSS para estas tareas "menores" (ya realicé la pregunta a alguien experto en el tema, y espero su respuesta), sin embargo, existen menús de navegación (en móviles principalmente) que utilizan solo CSS para su "toggling".

Aunque no en el mismo contexto que estamos discutiendo aquí, Google dice (sobre las animaciones con CSS y JS):

Usa CSS cuando tienes estados más pequeños e independientes para los elementos de IU. Las transiciones y animaciones de CSS son ideales para incorporar un menú de navegación desde el lateral o para mostrar información sobre herramientas. Tal vez necesites usar JavaScript para controlar los estados, pero las animaciones estarán en tu CSS.

Fuente: https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript

Si bien en teoría podría ser mejor la solución CSS, dependiendo la forma como se utilicen los selectores podría tener un rendimiento similar, mejor o peor que la solución de JS. (Aunque teniendo en cuenta lo pequeño de este contexto en la pregunta, sería despreciable la diferencia entre JS y CSS).

Shaz
  • 29.2k
  • 18
  • 40
  • 61