Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Browser werden immer besser

Mittwoch, 28. September 2016

Moderne Browser - in Verbindung mit CSS3 - ersparen dem Webworker immer mehr Arbeit.

Aktuelles Beispiel:
position:sticky

Die Aufgabenstellung:

Ein bestimmtes Element einer Webseite - typischerweise eine Navigation - soll immer sichtbar, und damit nutzbar - sein. Bisher erforderte diese Aufgabenstellung den Einsatz von JavaScript plus CSS. Und beides musste sehr genau aufeinander abgestimmt werden. Probleme mit unterschiedlichen Monitorgrößen (Stichwort RWD) waren vorprogrammiert.
Ein Beispiel mit der bisher nötigen Technik zeigt diese Demo

"position:sticky" erledigt nun diese Aufgabe mit einer einzigen CSS Anweisung. Auf intelligente Weise.

Browser Unterstützung:

  • Unterstützt wird "position:sticky" von allen modernen Browsern.
  • Wie nicht anders zu erwarten: Microsoft-Produkte kennen das Feature nicht.
  • Im Chrome-Browser muss dazu unter chrome://flags "experimental Web Platform features" enabled werden.
  • Schön, dass iOS das Feature unterstützt. Gerade auf iPads kann das sehr hilfreich sein.

Eine Anmerkung: Einen ähnlichen Effekt kann man natürlich auch mit position:fixed erreichen. Allerdings ist position:fixed bei weitem nicht so flexibel. Es fixiert einen Bereich immer in Relation zum Viewport, also zum Browserfenster. Im schlimmsten Fall kann position fixed dazu führen, dass Elemente nicht mehr sichtbar/nutzbar sind. Nämlich dann, wenn der fixierte Bereich größer ist als das Browserfenster. Wenn es sich um eine Navigation handelt, dann wäre das der GAU!
position:sticky fixiert in Relation zum übergeordneten Container, und greift nur, wenn es benötigt wird. Die Fixierung wird bei Bedarf durch Scrollen aufgehoben. Das Risiko einer nicht nutzbaren Navigation wird dadurch zuverlässig vermieden.

Wenn dein Browser das Feature unterstützt (und das Browserfenster klein genug gezogen wird), dann kannst du die Funktion hier auf der Seite in Aktion sehen. Und wenn nicht: dann ist die Navigation natürlich dennoch nutzbar.

Nachtrag 16.10.2016

Im aktuellen Chrome Version 54 mit "experimental Web Platform features" enabled, und ebenso Opera, ist die Umsetzung von position:sticky leider buggy. Na ja, es heißt dort ja auch zu Recht "experimental".
Aber es gibt Abhilfe: Ein Polyfill namens stickyfill.js als jQuery-Plugin. stickyfill bei Github
Alles, was es dazu braucht:

<script src="/scripts/stickyfill.min.js"></script>
 
<script>
$('#menuwrapper').Stickyfill();
</script>

Und damit klappt's jetzt auch auf IE 9+ und Edge.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE