In Level 4 der CSS Media Query-Spezifikation sind die sog. »Interaction Type Media Queries« hinzugefügt worden. Es ist nun möglich abzufragen ob Mouse-Over-Zustände unterstützt werden und wie fein die Spitze des Eingabegeräts ist. Somit lassen sich auch Rückschlüsse auf das verwendete Endgerät ziehen.
Eine der drei Grundvoraussetzungen, die Ethan Marcotte 2010 in seinem legendären Artikel »Responsive Webdesign« als Grundlage für selbiges aufgeführt hat, sind die Media Queries. Mit Media Queries kann man das Layout einer Website anhand von Geräteeigenschaften verändern. Beispielsweise, wenn der Viewport eine bestimmte Größe über- oder unterschreitet. Seit 2010 ist einige Zeit vergangen und es hat sich in der Praxis herausgestellt, dass für die Veränderung des Layouts die Viewportgröße nicht immer der ideale Ausgangspunkt ist. Häufig wäre es besser, wenn ein Element immer dann verändert werden könnte, wenn der Raum für dieses spezielle Element einen bestimmten Punkt über- oder unterschreitet. Genau das sollen sog. Element Queries bzw. Container Queries erledigen. Und noch vieles mehr.
Wenn der Inhalt einer Website kürzer ist als der Viewport hoch ist, kommt es häufig zu der Fehldarstellung. Es entsteht ein Freiraum unter der Fußzeile, da diese sich an der Länge des Inhalts orientiert. Mit Hilfe eines sog. »Sticky Footers« wird die Fußzeile immer am Ende der Seite bzw. am unteren Ende des Viewports positioniert. In diesem Beitrag zeigen wir verschieden Lösungen.
Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.
Mit Hilfe der CSS-Eigenschaft filter lassen sich zahlreiche interessante Effekte realisieren. Für die Eigenschaft backdrop-filter stehen die gleichen Effekte zur Verfügung, allerdings wirken sich die Filter nicht auf das Element selbst aus, sondern auf alles was optisch hinter dem Element liegt. Mit Backdrop Filtern ist es also beispielsweise möglich eine fixierte, halbtransparente Navigationsleiste zu erstellen, hinter der bei Scrollen alle Inhalte leicht unscharf dargestellt werden.
Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.
In komplexen Benutzeroberflächen kann es vorkommen, dass Elemente einander überlagern und die Interaktion mit verdeckten Schaltflächen erschwert wird. Mit der CSS-Eigenschaft pointer-events könnt ihr bewirken, dass Elemente vom Cursor ignoriert werden – ihr also durch ein Element hindurch klicken könnt.
Moderne Web- bzw. Frontend-Entwicklung entwickelt sich rasend schnell weiter und umfasst zahlreiche Technologien und Tools. Es ist schwer den Überblick …
Beitrag zu Ende lesenScrolling zählt zu den elementaren Bedienkonzepten im Web. Dennoch gibt es viele Probleme bei der Implementierung der gewünschten Scrolling-Funktion sowie beim …
Beitrag zu Ende lesenDie Front-End Tooling Umfrage hat ein ziemlich geradliniges Ziel – herauszufinden welche Werkzeuge von Frontend-Entwickler derzeit in unserer Branche eingesetzt werden. …
Beitrag zu Ende lesenIm responsive Webdesign werden Bilder gegebenenfalls automatisch verkleinert. Leider rendert Google’s Browser Chrome Bilder beim Verkleinern nicht so, wie es …
Beitrag zu Ende lesenEs hat über drei Jahre gedauert aber jetzt ist es da – Bootstrap 4. Die Beta Phase ist offiziell vorbei …
Beitrag zu Ende lesenLaut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the …
Beitrag zu Ende lesen