Klebriger Mist (position: sticky)

[Rolf B]

Hallo,

so, der Scroll-Container hat auch meinem Handy geholfen, und ich habe die Visualisierung der Varianten nochmal vereinfacht, so dass es jetzt "Basic", "Modell A" (=Fummelei Rolf) und "Modell B" (=Fummelei Gunnar) gibt.

Als zweite Auswahl habe ich die Einheit für die Paddings, denn die verhageln unter Chrome (nicht Edge!) das Layout. Es gibt

• em
• em gerundet: round(0.2em, 1px)
• px

round() erwies sich in meinen Tests als eine brauchbare Methode, den em-Angaben unter Chrome die Rundungsfehler auszutreiben und ist laut MDN seit einem Jahr Baseline. Gunnar hat sich in seinen Codepens diesem Problem geschickt entzogen, indem er vertikal 0.25em verwendet hat. Bei 16px Fontsize ist er dann aus dem Schneider. Aber das ist ja nicht verallgemeinerbar.

Bevor ich das in den sticky-Artikel einbaue, bitte ich nochmal einen Blick auf das Beispiel zu werfen. Es soll

• unterschiedlichen Varianten auswählbar haben
• das verwendete CSS visualisieren
• die Darstellung zeigen

Mit den Farben bin ich noch nicht glücklich. Ich will im Beispiel keine Styles aus dem Makeover-Skin einbinden, und das Selfhtml-Skin ist im Dark-Mode untauglich. Deshalb ist - bei mir - bei aktiviertem Browser-Darkmode der Scrollbar kontrastschwach. Das guck ich mir noch an, meine Frage ist nur, ob ein solches visualisierendes Beispiel brauchbar ist.

Tabelleninhalte kann man auch noch verschönern, Gunnars Planetentabelle ist eine gute Idee, die würde ich gern übernehmen.

Rolf