← Tous les exemples

SoundCloud : encadrer les zones clés de la mise en page

Encadre les principaux conteneurs SoundCloud en pointillés pour faciliter l'écriture de CSS.

Code à copier

// 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';
  });
});

Comment utiliser cet exemple

1. Copiez le code avec le bouton ci-dessus.
2. Installez JustZix (2 minutes) et ouvrez l'extension sur la page cible.
3. Ajoutez une nouvelle règle correspondant à cette page.
4. Collez le code dans le panneau JavaScript de la règle et enregistrez — il s'exécute à chaque visite de page.