← Todos los ejemplos

SoundCloud: resaltar las regiones clave del diseño

Contornea los contenedores principales de SoundCloud con un borde discontinuo para escribir CSS más fácil.

Código para copiar

// Outline key SoundCloud layout regions to help write custom styles
const targets = ['.playControls', '.soundList', '.l-main', '.header', '.sidebarModule', '.playbackSoundBadge'];
targets.forEach(function (sel) {
  document.querySelectorAll(sel).forEach(function (el) {
    el.style.outline = '2px dashed #ff5500';
    el.style.outlineOffset = '-2px';
  });
});

Cómo usar este ejemplo

1. Copia el código con el botón de arriba.
2. Instala JustZix (2 minutos) y abre la extensión en la página de destino.
3. Añade una nueva regla que coincida con esa página.
4. Pega el código en el panel JavaScript de la regla y guarda — se ejecuta en cada visita a la página.