HTML nur Überschriften zeigen

[Rolf B]

Hallo Linuchs,

ein style Element im Body funktioniert, ist aber nicht standardkonform.

Meine Anregung wäre, es über eine Klasse zu steuern. So:

.outlinemode :not(:is(h1,h2,h3,h4,h5,h6)) *,
.outlinemode > :not(:is(h1,h2,h3,h4,h5,h6)) {
  display: none;
}
.outlinemode :is(h1,h2,h3,h4,h5,h6) {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
.outlinemode h2 {
  margin-left: 1em;
}

Also: Alles, was kein h1-h6 Element als Mama oder Papa hat, wird ausgeblendet. Damit die direkten Nichtüberschrift-Kids des .outlinemode Elements auch verschwinden, muss auch die > Regel dazu.

Das hab ich deshalb so gemacht, weil Du ggf. ein <font>, <br> oder <center> Element innerhalb einer Überschrift verwenden könntest. Oder ein <img>. Hm. Möglicherweise HAST Du Bilder in Überschriften und WILLST sie im Outline-Mode ausblenden? Dann müsste man das noch feintunen.

Die :is Pseudoklasse erspart Dir eine lange kommaseparierte Liste von Selektoren. Mit dem Margin an tieferen Überschriften hast Du auch gleich eine eingerückte Gliederung.

Du musst dann nur die outlinemode Klasse hinzufügen. Entweder auf dem Body, oder auf dem .main Element. Zum Entfernen F5 drücken 😉 - oder dafür sorgen, dass der Toggle-Button nicht vom Outline gefressen wird.

Bei etwas komplexeren Seitenlayouts mit Grid oder Sticky-Zeugs könnte es sein, dass die genannten Eigenschaften nicht reichen. Aber das wirst Du dann ja merken und kannst es ergänzen. Mit scheint, als wäre das primär ein Tool nur für Dich.

Eine nur mausbedienbare Methode, die Gliederung auszuschalten und den gewünschten Abschnitt anzuspringen, bestünde darin, noch einen click-Eventhandler zu registrieren und bei click auf eine Überschrift den outline-Mode auszumachen und dann auf der Überschrift die scrollIntoView-Methode zu rufen. Das muss man ggf. über setTimeout hinter die Layoutphase verschieben.

Um sicher zu sein, dass deine Regeln Vorrang haben, ohne dass Du mit Atombomben werden musst, kannst Du versuchen, mit @layer zu arbeiten. Der Fuchs kann das schon, Chrome auch, Edge angeblich nicht obwohl er doch verchromt wurde.

Rolf