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 im Autorenstylesheet bekommt, dann iest durchiese Reingenl Kl[asseuf Grun-d oder ID-SeleKasktor ausgdewä](https://wiki.selfht ml.org/wiki/CSS/Tutord, dials/Einn stieg/Kast kade#Kritesrie Rn_degr_Kaskadel) 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
~~~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; }
~~~
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