OnePager mit skip-to-top-Link

[Rolf B]

Hallo Gunnar,

topLink.style.display = entry.isIntersecting ? 'none' : 'revert';

MDN:

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.

Fett von mir. Die Spec macht mehr Worte, sagt aber das Gleiche.

Wenn das topLink-Element seinen gewünschten display-Wert aus dem User- oder Useragent-Stylesheet bekommt, dann wird revert funktionieren. Aber wenn es den display-Wert aus einem Autorenstylesheet bekommt, dann funktioniert es nicht. Weil style-Attribut und Autorenstylesheet der gleiche style origin sind.

Damit ist es eine Lösung, über deren Verwendbarkeit man nachdenken muss, bevor man sie anwendet – bzw. die einen nachträglich in die Ferse beißen kann, wenn man dem Element nachträglich im Autorenstylesheet eine display-Eigenschaft geben will. Und deshalb habe ich removeProperty vorgeschlagen.

.a {
  display: flex;
}

<div class="a">...</div>

Wenn Du jetzt dem div.a ein display:revert ins style-Attribut schreibst, ist die Flexbox weg. Die bleibt nur da, wenn Du display ganz entfernst - oder Müll zuweist, z.B. display: -g16n-whatever.

Aber wir sind uns ja einig: Finger weg von der style-Eigenschaft (bzw. vom Attribut), wenn man ein Element ausblenden will.

[hidden] { display: none !important }

Deshalb kann es noch sinnvoller sein, eine eigene Klasse vorzusehen

Womit sich das wohl erledigt hat.

Wenn es nur um das display:none geht, ja. Aber das war nicht das, was ich meinte. Es ist ja durchaus möglich, dass in dem Zustand "topLink nicht sichtbar" auch noch andere Dinge zu stylen sind. Weshalb ich ja auch von „kann sinnvoller sein“ sprach; vielleicht hätte ich das kann hervorheben sollen.

Rolf