@@Jensen > Habe es versucht und es hat tatsächlich im Edge und Chrome funktioniert. Leider läuft es im Firefox nicht Wie in Kommentaren in meinem Beispiel steht, läuft es bereits im Firefox mit gesetztem Feature-Flag. Laut [Can I Use](https://caniuse.com/mdn-css_properties_animation-timeline) ist auch für die nächsten Releases noch nicht geplant, das allgemein freizuschalten. > dazu ist ein Polyfill notwendig Nö. Notwendig ist die Verkleinerung des Headers nicht. Du kannst das getrost als **progressive enhancement**{:@en} ansehen und nur in Browsern machen, die *scroll-driven animinations*{:@en} unterstützen. Oder du kuckst dir auf meinen [Star-Trek-Seiten](https://bittersmann.de/startrek/) ab, wie ich die Linie unterm Header anzeigen/verschwinden lasse: per `IntersectionObserver` wird dem `body` eine Klasse `"scrolled"` verpasst bzw. weggenommen. Observiert wird dabei der `head` – wenn er schon mal da ist, braucht man kein zusätzliches Element. [Vorgestellt](https://noti.st/gunnarbittersmann/JMA6En/where-no-one-has-gone-before) habe ich das u.a. auf der Jam Session der Smashing Conference Freiburg 2022, siehe insb. [Slides 12 und 13](https://noti.st/gunnarbittersmann/JMA6En/where-no-one-has-gone-before#s6eaWO4). --- > Font Awesome Icons werden z. B nicht dargestellt... Du verwendest die Icons aber hoffentlich nicht als Webfont, oder? Kwakoni Yiquan {:@art-x-kwejian} -- *Ad astra per aspera*{:@la}

@@Jensen > Habe es versucht und es hat tatsächlich im Edge und Chrome funktioniert. Leider läuft es im Firefox nicht Wie in Kommentaren in meinem Beispiel steht, läuft es bereits im Firefox mit gesetztem Feature-Flag. Laut Can I Use ist auch für die nächsten Releases noch nicht geplant, das allgemein freizuschalten. > dazu ist ein Polyfill notwendig Nö. Notwendig ist die Verkleinerung des Headers nicht. Du kannst das getrost als **progressive enhancement**{:@en} ansehen und nur in Browsern machen, die *scroll-driven animinations*{:@en} unterstützen. Oder du kuckst dir auf meinen [Star-Trek-Seiten](https://bittersmann.de/startrek/) ab, wie ich die Linie unterm Header anzeigen/verschwinden lasse: per `IntersectionObserver` wird dem `body` eine Klasse `"scrolled"` verpasst bzw. weggenommen. Observiert wird dabei der `head` – wenn er schon mal da ist, braucht man kein zusätzliches Element. [Vorgestellt](https://noti.st/gunnarbittersmann/JMA6En/where-no-one-has-gone-before) habe ich das u.a. auf der Jam Session der Smashing Conference Freiburg 2022, siehe insb. [Slides 12 und 13](https://noti.st/gunnarbittersmann/JMA6En/where-no-one-has-gone-before#s6eaWO4). --- > Font Awesome Icons werden z. B nicht dargestellt... Du verwendest die Icons aber hoffentlich nicht als Webfont, oder? Kwakoni Yiquan {:@art-x-kwejian} -- *Ad astra per aspera*{:@la}