Heutzutage müssen Webseiten responsiv sein. Ein Problem dabei kann aber die Ladegeschwindigkeit darstellen. Glücklicherweise gibt es eine Reihe von Techniken, um die Performance zu verbessern. Und wie das konkret geht, zeige ich in meinem Videotraining:
Responsive Webdesign – Performance Tuning – Online-Videotraining bei LinkedIn Learning
Laufzeit: 1 Std. 41 min
Gute Nachricht: Firefox 36 unterstützt die Eigenschaft isolation bei den Blendmodi. Das habe ich zum Anlass genommen, meinen Artikel zu isolation: isolate vom Juni 2014 zu aktualisieren.
In den beiden bisherigen Teilen meiner Artikelserie habe ich schon die Eigenschaft background-blend-mode und mix-blend-mode vorgestellt. Jetzt fehlt noch die Eigenschaft isolation. Bei der Eigenschaft geht es um die Frage: Mit welchen Elternelementen finden Vermischungen statt, wenn man mix-blend-mode verwendet?
Häufig möchte man, dass die Beschriftung zu einem Bild genauso breit wird wie das Bild selbst – und das soll möglichst natürlich auch dann funktionieren, wenn wir die Breite des Bildes nicht im Voraus wissen. Möglich wird das über den CSS3-Wert min-content. Und für den IE klappts über ein bisschen Trickserei mit Gridlayout.
CSS-Grids sind das CSS3-Layoutmodul für Raster. Relevant sind heute zwei Versionen von CSS-Grids: die aktuelle Spezifikation und die veraltete Version von 2011.
Die aktuelle Version funktioniert in Chrome ab 57, in Firefox ab Version 52, in Safari 10.1 und ebenfalls in Edge ab 16.
Die veraltete Version ist im Internet Explorer 10+ und in Edge < 16 implementiert und deswegen ist diese alte Syntax heute noch relevant.
An einem kleinen Raster möchte ich ein paar Beispiele für die unterschiedliche Syntax/Herangehensweise zeigen.
Das W3C hat den Arbeitsentwurf für die CSS-Pseudoelemente überarbeitet. Ich war gespannt, welche Pseudoelemente wir in Zukunft benutzen können und habe einmal reingeschaut. Neben klassischen, schon lange bekannten Pseudoelementen findet sich im Arbeitsentwurf Nützliches wie ::selection oder ::placeholder, die bereits (teilweise in leicht modifizierter Variante) in den aktuellen Browsern funktionieren.
Im meinen Beitrag geht es neben diesen neuen Pseudolementen außerdem um die klassischen Pseudoelemente, um doppelte und einfache Doppelpunkte und um die Darstellung der Pseudoelemente in Browserentwicklertools.
An verschiedenen Stellen stößt CSS in Bereiche vor, die vorher Bildbearbeitungsprogrammen vorbehaltet waren. Man kann Bilder beschneiden mit clip-path, Bilder und andere Elemente über die Blendmodi mischen und es gibt die Filter, um Effekte wie Farbverschiebungen oder Unschärfe auf Bilder und andere Elemente anzuwenden. Um diese Filter geht es hier.
Beim responsiven Webdesign geht man üblicherweise von einer HTML-Basis aus, die Anpassungen an die unterschiedlichen Viewportbreiten finden über Media Queries, d.h. über CSS statt. Das Problem dabei ist, dass auf einem klassischen Desktop-Monitor wesentlich mehr Platz zur Verfügung steht, als bei einem klassischen kleinen Smartphone-Screen.
Wenn Inhalte auf einem Smartphone einfach keinen Platz finden, greift man gerne zu display: none, um Inhalte gezielt auf einzelnen Endgerätegruppen auszublenden. Das hat jedoch so seine Nachteile. Wer sagt beispielsweise, dass Nutzer von kleinen Screens bestimmte Informationen nicht brauchen?
„optimiert für alle Endgeräte“ las ich gestern in einer Werbung für die digitale Ausgabe einer Printzeitschrift. So etwas liest man häufiger oder umgekehrt stellen Leute oft die Frage: „Wie kann man eine Webseite für alle mobilen Geräte optimieren?“
CSS-Shapes ermöglichen es, Inhalte nicht-eckig umfließen zu lassen. Eine Kurzeinführung gibt es hier im Blog, eine ausführlichere Behandlung bietet ein schöner Artikel von maddesigns oder mein Offline-Artikel für die Zeitschrift web & mobile-Developer, der in der Ausgabe 1/2015 erscheint.
Hier hingegen handelt es sich nicht um eine Einführung, stattdessen habe ich ein paar Tipps für die Arbeit mit CSS-Shapes gesammelt. Darunter sind auch Dinge, über die ich bei meinen eigenen Experimenten erst einmal gestolpert bin.
Schnell hat man sich bei einer CSS-Eigenschaft vertippt. Um derartige Fehler aufzuspüren, hilft es schon einmal einen passenden Editor zu verwenden. Ansonsten lassen sich solche Fehler gut im Google Chrome entdecken. Wie das geht, aber auch wann scheinbare Fehler keine Fehler sind, zeige ich in einem Video. Das Video ist ein Ausschnitt aus meinem video2brain-Videotraining CSS debuggen.
Weiterlesen