Skip to main content
Limpiar código
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Limpiando el código de un sitio web que estoy desarrollando, me encontré con que tengo un widget en una barra lateral que tiene un sistema de pestañas para mostrar pequeñas secciones con datos relacionados.

El widget está desarrollado con HTML + JS + CSS y funciona más o menos así (ejemplo simplificado para demo):

var pestanas = document.querySelectorAll(".pestana");
for (var x = 0; x < pestanas.length; x++) {
  pestanas[x].addEventListener("click", function() {
    var pestanaActiva = document.querySelector(".pestana"section.activa");
    if (pestanaActiva) { pestanaActiva.className = "pestana";classList.toggle("activa"); }
    document.querySelector(this.dataset.target).className = "pestana activa";classList.toggle("activa");
  });
}
section {
  display: none;
}

section.activa {
  display: block;
}
<button class="pestana" data-target="#seccion-1">Mostrar sección 1</button>
<button class="pestana" data-target="#seccion-2">Mostrar sección 2</button>

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

Pero podría realizar algo similar utilizando solamente HTML y CSS, sin nada de JavaScript:

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" />
<input type="radio" name="pestana" id="seccion-2-box" />

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


La funcionalidad en estos dos snippets es la misma (las secciones se muestran y esconden como deben) y las dos versiones son HTML válido. Comprendo que se podría decir que la versión sin JavaScript no es ideal porque se está usando etiquetas y estilos para realizar una acción y ese no es su objetivo principal (aunque esa acción es básicamente aplicar unos estilos u otros).

¿Existe alguna ventaja de usar una versión sobre la otra (especialmente desde el punto de vista de la accesibilidad web)? ¿O alguna definición de buenas prácticas sobre esto?

Limpiando el código de un sitio web que estoy desarrollando, me encontré con que tengo un widget en una barra lateral que tiene un sistema de pestañas para mostrar pequeñas secciones con datos relacionados.

El widget está desarrollado con HTML + JS + CSS y funciona más o menos así (ejemplo simplificado para demo):

var pestanas = document.querySelectorAll(".pestana");
for (var x = 0; x < pestanas.length; x++) {
  pestanas[x].addEventListener("click", function() {
    var pestanaActiva = document.querySelector(".pestana.activa");
    if (pestanaActiva) { pestanaActiva.className = "pestana"; }
    document.querySelector(this.dataset.target).className = "pestana activa";
  });
}
section {
  display: none;
}

section.activa {
  display: block;
}
<button class="pestana" data-target="#seccion-1">Mostrar sección 1</button>
<button class="pestana" data-target="#seccion-2">Mostrar sección 2</button>

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

Pero podría realizar algo similar utilizando solamente HTML y CSS, sin nada de JavaScript:

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" />
<input type="radio" name="pestana" id="seccion-2-box" />

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


La funcionalidad en estos dos snippets es la misma (las secciones se muestran y esconden como deben) y las dos versiones son HTML válido. Comprendo que se podría decir que la versión sin JavaScript no es ideal porque se está usando etiquetas y estilos para realizar una acción y ese no es su objetivo principal (aunque esa acción es básicamente aplicar unos estilos u otros).

¿Existe alguna ventaja de usar una versión sobre la otra (especialmente desde el punto de vista de la accesibilidad web)? ¿O alguna definición de buenas prácticas sobre esto?

Limpiando el código de un sitio web que estoy desarrollando, me encontré con que tengo un widget en una barra lateral que tiene un sistema de pestañas para mostrar pequeñas secciones con datos relacionados.

El widget está desarrollado con HTML + JS + CSS y funciona más o menos así (ejemplo simplificado para demo):

var pestanas = document.querySelectorAll(".pestana");
for (var x = 0; x < pestanas.length; x++) {
  pestanas[x].addEventListener("click", function() {
    var pestanaActiva = document.querySelector("section.activa");
    if (pestanaActiva) { pestanaActiva.classList.toggle("activa"); }
    document.querySelector(this.dataset.target).classList.toggle("activa");
  });
}
section {
  display: none;
}

section.activa {
  display: block;
}
<button class="pestana" data-target="#seccion-1">Mostrar sección 1</button>
<button class="pestana" data-target="#seccion-2">Mostrar sección 2</button>

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

Pero podría realizar algo similar utilizando solamente HTML y CSS, sin nada de JavaScript:

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" />
<input type="radio" name="pestana" id="seccion-2-box" />

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


La funcionalidad en estos dos snippets es la misma (las secciones se muestran y esconden como deben) y las dos versiones son HTML válido. Comprendo que se podría decir que la versión sin JavaScript no es ideal porque se está usando etiquetas y estilos para realizar una acción y ese no es su objetivo principal (aunque esa acción es básicamente aplicar unos estilos u otros).

¿Existe alguna ventaja de usar una versión sobre la otra (especialmente desde el punto de vista de la accesibilidad web)? ¿O alguna definición de buenas prácticas sobre esto?

Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

¿Cambiar sistema de visualización de JS a CSS?

Limpiando el código de un sitio web que estoy desarrollando, me encontré con que tengo un widget en una barra lateral que tiene un sistema de pestañas para mostrar pequeñas secciones con datos relacionados.

El widget está desarrollado con HTML + JS + CSS y funciona más o menos así (ejemplo simplificado para demo):

var pestanas = document.querySelectorAll(".pestana");
for (var x = 0; x < pestanas.length; x++) {
  pestanas[x].addEventListener("click", function() {
    var pestanaActiva = document.querySelector(".pestana.activa");
    if (pestanaActiva) { pestanaActiva.className = "pestana"; }
    document.querySelector(this.dataset.target).className = "pestana activa";
  });
}
section {
  display: none;
}

section.activa {
  display: block;
}
<button class="pestana" data-target="#seccion-1">Mostrar sección 1</button>
<button class="pestana" data-target="#seccion-2">Mostrar sección 2</button>

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

Pero podría realizar algo similar utilizando solamente HTML y CSS, sin nada de JavaScript:

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" />
<input type="radio" name="pestana" id="seccion-2-box" />

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


La funcionalidad en estos dos snippets es la misma (las secciones se muestran y esconden como deben) y las dos versiones son HTML válido. Comprendo que se podría decir que la versión sin JavaScript no es ideal porque se está usando etiquetas y estilos para realizar una acción y ese no es su objetivo principal (aunque esa acción es básicamente aplicar unos estilos u otros).

¿Existe alguna ventaja de usar una versión sobre la otra (especialmente desde el punto de vista de la accesibilidad web)? ¿O alguna definición de buenas prácticas sobre esto?