CSS: Nutzt User dunkles oder helles Theme?

@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: black;
        --body-bg-stronger: rgba(255,255,255,.3);
        --control-bg: rgba(255,255,255,.15);

        --body-color: rgba(255,255,255,.5);
        --front-color: white;
        --active-color: rgba(255,255,255, .9);
    }
}

Mit dem neuesten Update von macOS wird Safari 12.1 installiert. Damit ist Safari der erste Browser, der das neue CSS Media-Query-Feature prefers-color-scheme unterstützt.

Beitragsbild: cmonphotography, Quelle: Pexels

„CSS: Nutzt User dunkles oder helles Theme?“ weiterlesen

Lösung für Twenty Seventeens stockenden Header

Für eine lange Zeit habe ich für diesen Blog eine angepasste Version des WordPress Themes „Twenty Seventeen“ genutzt. Generell finde ich den Theme ziemlich nett, aber es gibt einen kleinen „Bug“ (?), der mich schon länger gestört hat.

There’s also an english version of this article on my Medium site. Beitragsbild: Pixabay, Quelle: Pexels

„Lösung für Twenty Seventeens stockenden Header“ weiterlesen

CSS: Die Nutzung von System-Fonts

Web Fonts zu nutzen ist nett, aber manchmal ist es sinnvoll, eine Schriftart zu nutzen, die bereits auf dem System installiert ist. So kannst du die Perfomance etwas verbessern, weil der Browser so nicht mehr die Font-Datei laden muss. Außerdem kannst du dem Nutzer so einen gewohnten Look präsentieren, wenn die Schriftart auf der Webseite zu dem seinen Betriebssystems passt.

There’s also an english version of this article on my Medium site. Beitragsbild: mali maeder, Quelle: Pexels

„CSS: Die Nutzung von System-Fonts“ weiterlesen

UI Design – Die Herausforderung eines Dark Themes

Entwickler lieben sie schon seit Ewigkeiten, nun werden sie immer salonfähiger: dunkle UI Themes. Viele empfinden sie als augenfreundlicher. Ob das wirklich stimmt, kann ich nicht beurteilen. Zu mindest kann dunkles UI-Design aber zu einer besseren Energieeffizienz bei Geräten mit OLED-Displays beitragen, da hierfür schwarze Pixel nicht mit Strom versorgt werden müssen.
Abgesehen davon kann dunkles Design auch einfach ästhetisch besser aussehen.

„UI Design – Die Herausforderung eines Dark Themes“ weiterlesen

Wie ihr Frosted Glass fürs Web nutzen könnt

Der sogenannte Frosted Glass-Effekt (oder von Microsoft auch Acrylic genannt) ist momentan sehr angesagt. Ich habe auch schon mal ein Video produziert, in dem ich gezeigt habe wie ihr den Effekt mit CSS erzeugen könnt. Leider gibt es mit dieser Technik noch ein paar Probleme, wodurch man sie noch nicht wirklich produktiv einsetzen kann.

Ein Problem ist, dass für die Technik immer ein Hintergrundbild definiert werden muss. Das setzt aber voraus, dass zwischen dem Element mit dem Effekt und dem Hintergrund nichts liegen darf.

Das Element mit dem Effekt ist nämlich nicht wirklich transparent, sondern hat nur den gleichen Hintergrund wie der Body.
Man könnte eine Art Screenshot machen und dieses als Hintergrund benutzen.
Das habe ich mal ausprobiert:

Wie im Beispiel beschrieben, nutze ich html2canvas um das HTML in ein Canvas zu konvertieren. Das Canvas wandel ich dann wiederum in ein Bild um, damit es als Hintergrundbild genutzt werden kann.
Das gesamte Beispiel gibt es hier: https://lgkonline.github.io/frosted-glass/

Die React Komponente react-acrylic geht hier den gleichen Weg, um den Effekt zu erzeugen. Es sei aber gesagt, diese Technik nicht sehr performant ist, da es sehr rechenintensiv ist ein Screenshot zu erzeugen und je nachdem wie viele Elemente es auf der Seite gibt, dauert es auch länger.

Ein anderes Problem ist, dass Browser wie Edge und Firefox beim Scrollen stocken, wenn ein Hintergrundbild als fixed gesetzt ist. Dafür habe ich leider noch keine Lösung gefunden. Diese Problematik wird hier auf Stack Overflow auch genannt.

Auch ist es doch sehr aufwändig, den Effekt zu erzeugen. Es gibt aber Möglichkeiten, sich die Arbeit zu erleichtern.
Auf CodePen habe ich ein Beispiel veröffentlicht, in dem ich eine React Komponente erstellt habe, wodurch ich den Effekt schneller an jeder beliebigen Stelle einbinden kann:

See the Pen FrostedGlass React Component by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

Update

Ich habe eine neue CSS-Spezifikation gefunden, mit der es deutlich einfacher wird, den Effekt einzusetzen: backdrop-filter
Mit backdrop-filter: blur(10px); könnte man also Frosted Glass realisieren.
Derzeit wird backgroup-filter leider nur von Safari für macOS und iOS unterstützt, soll aber auch in der nächsten Edge-Version verfügbar sein (Quelle: caniuse.com).

Ich konnte backdrop-filter erfolgreich in diesem Pen testen.

Link zum CodePen: https://codepen.io/lgkonline/pen/GQrLeV

„Swipeable Bar“: Vielleicht neuer UI-Trend?

Zuletzt habe ich meine Website lgk.io überarbeitet und im Zuge dessen ein neues Element in meiner CI eingeführt: ich nenne sie „Swipeable Bar“ oder auch „Pill Bar“.

Gemeint ist eine kleine aber dickere horizontale Linie oben mittig einer Anwendung.
Dieses Element signalisiert: „Mich kannst du ziehen / wischen“
Daraufhin passiert etwas am oberen Ende der Anwendung. In meinem Fall wird eine Leiste eingeblendet, die auf meine anderen Projekte und Services verweist.

Die Idee ist von Apple

Genauer gesagt vom iPad. Seit iOS 11 können dort nämlich Fenster gelöst werden und frei auf dem Bildschirm verschoben werden. Und dort signalisiert das Element ebenfalls: „Hier kannst du ziehen“

Beim iPhone X hat ein ähnliches Element den Home-Button abgelöst. Hier aber permanent auf der unteren Seite des Displays. Wischt der Nutzer hier nach oben, gelangt er auf den Startbildschirm.
Die Leiste hat hier aber noch mehr Funktionen: Wischt man horizontal (also nach links oder rechts), wechselt man die aktuell geöffnete App.

Offizielle Bezeichnung?

In Apples Dokumentationen und auch sonst im Netz konnte ich noch keinen Begriff für dieses UI-Element finden. Deswegen habe ich extra einen Thread in User Experience Stack Exchange eröffnet: https://ux.stackexchange.com/questions/114790/whats-apples-term-for-horizontal-swipeable-bar

Update: Das Element scheint keine offizielle Bezeichnung zu haben. Allerdings wird der Streifen, der beim iPhone X unten den Home-Button ersetzt in einer Methoden-Dokumentation als „Home Indicator“ (Quelle: Apple Developer Documentation) bezeichnet.
Als allgemeine Bezeichnung könnte man also „Swipe Indicator“ wählen.