OnePager mit skip-to-top-Link
bearbeitet von
Hallo Gunnar,
~~~js,bad
topLink.style.display = !entry.isIntersecting ? 'block' : 'none';
topLink.style.display = entry.isIntersecting ? 'none' : 'block';
~~~
nein, weder noch.
Wenn überhaupt über `style.display`, dann so:
~~~js
if (entry.isIntersecting)
topLink.style.display = "none";
else
topLink.style.removeProperty("display");
~~~
womit sich die Frage erübrigt, was der richtige display-Wert für `topLink` ist, wenn er nicht versteckt wird.
Ich bestreite damit nicht, dass `hidden` trotzdem eleganter ist. Man muss nur achtgeben, es kann nämlich passieren, dass `hidden` keinen Effekt hat.
Im Browser-Stylesheet steht
~~~css
[hidden] { display: none; }
~~~
Wenn das auszublendende Element seine display-Eigenschaft über eine CSS-Regel im Autorenstylesheet bekommt, dann ist diese Regel [auf Grund der Kaskade](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#Kriterien_der_Kaskade) spezifischer und die Browserregel hat keinen Effekt. Man muss sein eigenes Stylesheet dann um passende Regeln erweitern.
Deshalb kann es **noch** sinnvoller sein, eine eigene Klasse vorzusehen, die den Sachverhalt "wird gerade nicht gebraucht" darstellt und mit geeigneter Spezifität eine CSS Regel aktiviert, die die nötigen Styles zuweist. Diese Klasse kann man dann mittels classList.toggle bedarfsweise aktivieren.
~~~js,good
topLink.classList.toggle("out-of-screen", entry.isIntersecting);
~~~
_Rolf_
--
sumpsi - posui - obstruxi
OnePager mit skip-to-top-Link
bearbeitet von
Hallo Gunnar,
~~~js,bad
topLink.style.display = !entry.isIntersecting ? 'block' : 'none';
topLink.style.display = entry.isIntersecting ? 'none' : 'block';
~~~
nein, weder noch.
Wenn überhaupt über `style.display`, dann so:
~~~js
if (entry.isIntersecting)
topLink.style.display = "none";
else
topLink.style.removeProperty("display");
~~~
womit sich die Frage erübrigt, was der richtige display-Wert für `topLink` ist, wenn er nicht versteckt wird.
Ich bestreite damit nicht, dass `hidden` trotzdem eleganter ist. Man muss nur achtgeben, es kann nämlich passieren, dass `hidden` keinen Effekt hat. Und zwar dann, wenn das Element seine Display-Eigenschaft über einen Klassen- oder ID-Selektor zugewiesen bekommt.
Im Browser-Stylesheet steht
~~~css
[hidden] { display: none; }
~~~
also ein Attributselektor. Wenn das auszublendende Element seine display-Eigenschaft über eine CSS-Regel bekommt, die durch einen Klassen- oder ID-Selektor ausgewählt wird, dann ist diese Regel spezifischer und die Browserregel hat keinen Effekt. Man muss sein eigenes Stylesheet dann um passende Regeln erweitern.
Deshalb kann es **noch** sinnvoller sein, eine eigene Klasse vorzusehen, die den Sachverhalt "wird gerad nicht gebraucht" darstellt und mit geeigneter Spezifität eine CSS Regel aktiviert, die die nötigen Styles zuweist. Diese Klasse kann man dann mittels classList.toggle bedarfsweise aktivieren.
~~~js,good
topLink.classList.toggle("out-of-screen", entry.isIntersecting);
~~~
_Rolf_
--
sumpsi - posui - obstruxi