Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Dreimal CSS4 zum Mitnehmen

Dreimal CSS4 zum Mitnehmen

Advent, Advent, ein Lichtlein brennt. Erst 1, dann 2, jetzt 3, bald 4, steht neues CSS vor der Tür. Lange bevor CSS3 als Standard verabschiedet wird, brüten schlaue Köpfe dessen Nachfolger aus. Sandra Kallmeyer zeigt drei CSS4-Tricks, die bereits jetzt einsetzbar sind.

Beim Rückblick auf das Jahr 2011 fällt positiv auf, dass HTML5 und CSS3 sich langsam auch hier in Deutschland in der Breite durchsetzen. Mit Progressive Enhancement, Polyfills und nützlichen Frameworks wie dem HTML5 Boilerplate und 320 and up sind wir gut aufgestellt, die neuesten Features in unseren Projekten sinnvoll einzusetzen.

Unterstützung erfahren wir dabei von den Browserherstellern, die nach einem (teilweise) langen Dornröschenschlaf aufgewacht sind und mit großer Begeisterung Feature um Feature implementieren. Es ist ein kleines Wettrennen, das wir in diesem Jahr beobachten konnten und das uns reichlich kreativen Aufwind beschert hat. Daher ist es nur passend, zum Jahreswechsel einen Ausblick zu wagen: Was kommt Neues mit CSS4? Gibt es schon Ansätze für Implementierungen einzelner Features in den Browsern? Können wir vielleicht schon irgendwas verwenden? Dies soll keine vollständige Abhandlung über sämtliche Neuerungen sein, sondern vielmehr eine Zusammenstellung von kleinen Tricks, die ihr jetzt schon einsetzen könnt.

Doch Obacht! Um die verlinkten Beispiele nachvollziehen zu können, braucht ihr die Nightlies der jeweiligen Browser. Wer also nicht nur lesen, sondern auch ausprobieren möchte, installiert jetzt:

Da Webkit nur eine Engine ist und kein kompletter Browser, müsst ihr vorab Safari installieren, der dann die Webkit Nightly als Engine nutzt. Tipp: Ihr könnt alle drei Browser in eine virtuelle Maschine installieren. So haltet ihr alles schön separat von eurem Produktivsystem.

Fertig? Prima. Auf geht’s!

Mischen possible: cross-fade()

Die CSS4-Meldung, die bislang am meisten Aufsehen erregt hat, ist, dass Webkit eine teilweise Unterstützung für das Cross-Fading von Hintergrundbildern implementiert hat. Mit eurem frisch installierten Webkit Nightly könnt ihr euch zunächst das Live-Demo dazu ansehen:

Demo: cross-fade()

Hier ein Screenshot für alle, die noch keinen Webkit Nightly installiert haben:

0%, 50% und 100% Crossfading-Zustände
0%, 50% und 100% Crossfading-Zustände

Mit cross-fade könnt ihr zwei Hintergrundbilder ineinander überblenden. Dazu gebt ihr die URLs für zwei Hintergrundbilder an, sowie einen Prozentsatz, mit dem das vordere Bild in das hintere geblendet werden soll. Bei 0% ist nur das hintere Bild sichtbar, bei 100% nur das vordere. Dazwischen könnt ihr beliebig abstufen. 50% blendet die Bilder 1:1 ineinander. Im Demo liest sich das so:

  1. background-image: cross-fade(
  2.   url("logo-box.png"),
  3.   url("logo-bare.png"),
  4.   50%);

Dies ist besonders spannend für die Kreativen unter uns, die nun nicht mehr jedes Mal PhotoShop oder Gimp öffnen müssen, um zwei Hintergrund-Texturen miteinander zu kombinieren. Ihr könnt direkt im Browser experimentieren.

Das beste daran: Ihr könnt diesen Effekt bereits jetzt verwenden. Solange ihr ein herkömmliches Hintergrundbild als Fallback einbindet, das den anderen Browsern angezeigt wird, könnt ihr nach Belieben mit Cross-Fading spielen. Eine Holztextur mit einer Kratzertextur verbinden? Kein Problem! Und wie üblich gilt: Je mehr ihr euch mit den Features beschäftigt, die ein Browserhersteller implementiert hat, umso größer der Anreiz für die anderen Hersteller nachzuziehen. Und je mehr Browser ein Feature implementiert haben, umso größer die Wahrscheinlichkeit, dass es seinen Weg in die Spezifikation findet.

Momentan funktioniert das vierte Beispiel des Demos noch nicht, da Webkit noch keine Animation für cross-fade verwirklichen konnte. Ein animiertes Cross-Fading sieht theoretisch so aus:

  1. background-image: cross-fade(
  2.   url("logo-box.png"),
  3.   url("logo-bare.png"),
  4.   0%);
  5. animation: fading 3s infinite;

Hier sollten die Bilder innerhalb von drei Sekunden ineinander überblenden, und die Animation würde sich unendlich oft wiederholen. Sobald dieses Feature implementiert ist, eröffnet es völlig neue Möglichkeiten für interaktive Elemente, Slideshows und vieles mehr. Das Naheliegendste ist sicher eine einmalige cross-fade-Animation bei hover/focus auf ein Element. Die Entwürfe zur Spezifikation sehen zudem vor, dass cross-fade für alle Bilder implementiert werden soll, also zum Beispiel auch für border-image. Entdecke die Möglichkeiten!

Die erste Implementierung von cross-fade wird voraussichtlich mit Chrome 17 auf den Markt kommen. Also wahrscheinlich gleichzeitig mit dem Projekt, an dem ihr gerade arbeitet.

Schnell im Bilde mit image-rendering

Bleiben wir noch einen Moment bei den Bildern. Diejenigen von uns, die bereits mit großer Begeisterung Responsive Designs konzipieren, haben sicher festgestellt, dass das Rendering von Bildern, die im Browser vergrößert oder verkleinert werden, in letzter Zeit unheimlich an Qualität gewonnen hat. Erinnert ihr euch noch an die Zeit, als jeder sofort sehen konnte, dass ein Bild im Browser verkleinert wurde? Die hakelig verpixelte Katastrophe, die dabei herauskam? Genau! Gleiches gilt für Transformationen wie Drehen oder Stauchen von Bildern. Wo anfangs noch Mausezähnchen blitzten, gibt’s heute schöne glatte Bilder, denen wir die Manipulation im Browser kaum mehr ansehen können.

Mittlerweile haben nämlich alle Browser Methoden implementiert, die in solchen Fällen die Bildqualität optimieren. Bilineares Filtern nennt sich das und entspricht dem, was in professionellen Bildbearbeitungsprogrammen beim Manipulieren von Bildern geschieht. Diese Art der Bildoptimierung ist inzwischen in allen Browsern die Standardeinstellung und sorgt dafür, dass Kanten geglättet werden und alles schön ansehnlich bleibt. Responsive Design Win!

Allerdings schlägt die Optimierung der Bildqualität auch auf die Performance: je anspruchsvoller die Bildoptimierung, desto langsamer das Rendering. Bei einem einzelnen Bild wird das kaum zu Buche schlagen. Bei einem flotten Browserspiel oder einer komplexen Canvas-Animation kann sich die Performance-Einbuße aber durchaus bemerkbar machen. Ein weiteres Problem entsteht immer dann, wenn scharfkantige Elemente auch bei der Bildmanipulation im Browser scharfkantig bleiben sollen. Das kann ein Logo sein, eine Infografik usw. – bilineares Filtern glättet auch hier die Kanten und alles wird unabsichtlich verwaschen.

Wir benötigen also einen Mechanismus, um die Voreinstellung wieder zu überschreiben. Hier kommt crisp-edges ins Spiel.

Kleiner Einschub: Zunächst sahen die Entwürfe zur Spezifikation vor, dass es für image-rendering die Optionen optimizeSpeed und optimizeQuality geben solle. Diese sind nun bereits wieder als »deprecated« gekennzeichnet. Die neuen Optionen heißen auto (Standardeinstellung, Optimierung auf Qualität) und crisp-edges (Option, Optimierung auf Detailschärfe und Geschwindigkeit). Befassen wir uns also im Folgenden mit crisp-edges.

Das Gute: alle relevanten Browser unterstützen diese Eigenschaft bereits jetzt! Firefox ist bereits seit Version 3.6 dabei, also seit 2009! Internet Explorer hatte bis Version 7 die geschwindigkeitsoptimierte Variante als Voreinstellung, seit IE8 setzt man auf Qualität. Schnelles Rendering und scharfe Kanten entlockt man aber auch dem IE8 noch mit -ms-interpolation-mode: nearest-neighbor. Opera hat vor wenigen Wochen nachgezogen und die in CSS4 vorgesehenen image-rendering Optionen implementiert.

Die Syntax lautet derzeit:

  • Mozilla: -moz-crisp-edges
  • Opera: -o-crisp-edges
  • Webkit: -webkit-optimize-contrast
  • Internet Explorer: -ms-interpolation-mode: nearest-neighbor

crisp-edges ist also ein weiteres Beispiel für eine Technik, die schon weit vor der Veröffentlichung als Spezifikation flächendeckend einsetzbar ist.

Die Beispiele von Mozilla und das interaktive Demo, auf das Opera verweist, verdeutlichen crisp-edges in der Theorie ganz gut, sind aber insgesamt etwas blutleer und wenig anschaulich. Wo sind Projekte, bei denen durch den Rendering-Modus echte Probleme gelöst werden?

Ein gutes Beispiel ist Pixel-Art; eine Kunstform, in der Bilder aus einzelnen, scharf voneinander abgegrenzten Pixeln zusammengesetzt werden. Man könnte es auch Mosaik nennen. Wenn ich nun ein solches Kunstwerk vergrößere oder verkleinere, sei es, um hineinzuzoomen, sei es, weil das Webdesign responsive sein soll, greift sofort der qualitätsoptimierte Renderingmodus der Browser. Die Folge ist, dass die Kanten geglättet werden und die einzelnen Pixel verwischen. Sinn und Zweck der Kunstform sind damit hinüber. Ärgerlich.

Die Plattform Pixeljoint wurde von der plötzlichen Bildoptimierung seitens der Browserhersteller überrumpelt und suchte nach Lösungen. Schnell entdeckte man die bis dahin proprietäre Mozilla-Lösung im Mozilla Developer Network und band sie (und das IE-Äquivalent) ins CSS ein.

  1. img[src$=".gif"], img[src$=".png"] {
  2.   image-rendering: -moz-crisp-edges;         /* Firefox */
  3.   -ms-interpolation-mode: nearest-neighbor;  /* IE */
  4.   }

Wenn ihr ein beliebiges Pixel-Art-Bild auf der Pixeljoint-Webseite mit dem Firefox aufruft und mit dem + darunter vergrößert, seht ihr, dass die Pixel schön scharfkantig erhalten bleiben. Nehmt ihr das -moz-crisp-edges jedoch z.B. mit der Developer Toolbar heraus, verwischen die Pixel sofort.

Monstergesicht einmal mit und einmal ohne crisp-edges
Monstergesicht einmal mit und einmal ohne crisp-edges

Wir merken uns: image-rendering ist dein Freund, wenn du Responsive Space Invaders basteln möchtest.

Den Rahmen sprengen mit full-screen

Der Pseudo-Selektor full-screen ist zwar noch nicht Teil der CSS4-Entwürfe, sondern wird im Rahmen der Fullscreen JavaScript API entwickelt. Aufgrund der bereits weit verbreiteten Implementierung wird er aber sicher Eingang in CSS4 finden. Doch worum geht es hier genau?

Jeder von uns kennt den Fullscreenmodus eines Browsers. Beim einen ist er mit F11 erreichbar, beim anderen mit CMD+Shift+F – in jedem Falle bewirkt er, dass das Browserchrome ausgeblendet wird und der eigentliche Inhalt den gesamten Bildschirm füllt. Wir alle nutzen das gern, um Filme anzuschauen oder Spiele zu spielen oder Webseiten zu lesen, die für größere Bildschirme »optimiert« wurden als der, den wir gerade nutzen. Es ist aber ein bisschen wie bei der Knoff-Hoff-Show: man muss erstmal wissen, dass und wie es geht.

Mit der Fullscreen API gibt es nun einen Weg, die Fullscreen-Ansicht über einen simplen Button als Option bereitzustellen. Aber damit nicht genug! Was z.B. F11 macht ist, sämtlichen Inhalt einer Website im Fullscreenmodus anzuzeigen. Mit der Fullscreen API habt ihr ab sofort die Möglichkeit, einzelne Elemente wie ein Foto oder Video in den Fullscreenmodus zu heben. Denkt ihr auch gerade an eine Lightbox? Genau, sowas in der Art.

Mit dieser simplen Syntax zeigt ihr ein div im Fullscreenmodus an:

  1. div.webkitRequestFullScreen();
  2. div.mozRequestFullScreen();

Und mit dieser Syntax beendet ihr den Spuk wieder:

  1. document.webkitCancelFullScreen();
  2. document.mozCancelFullScreen();

Zugegebenermaßen hat das noch nichts mit CSS zu tun. Nun kommt aber wieder der Pseudo-Selektor full-screen ins Spiel. Und Achtung, jetzt wird’s mächtig! Mit full-screen könnt ihr nämlich alle Elemente anfassen, die sich in dem Moment im Fullscreenmodus befinden.

Denkbar ist, einen Mediaplayer Fullscreen anzuzeigen, aber im Fullscreenmodus die Bedienelemente zu verbergen. Möglich ist auch eine Bildergalerie, bei der die Bilder im Fullscreenmodus einen aufwändigen Rahmen haben, der in der normalen Ansicht nicht sichtbar ist. Der Pseudo-Selektor full-screen macht’s möglich. Unser Element kann im Fullscreenmodus komplett anders aussehen als in der normalen Ansicht.

Ihr könnt das in diesem Beispiel z. B. mit dem Google Chrome nachvollziehen: Der iFrame mit dem schönen Text »I am a lame frame« blüht im Fullscreenmodus mit Formen, Bildern und Farben auf.

Derselbe iframe mit unterschiedlichen Stilen
Derselbe iframe mit unterschiedlichen Stilen

Das alles mag wie Spielerei klingen, aber es gibt sogar Möglichkeiten, die Barrierefreiheit einer Webseite damit zu verbessern: Denkbar ist, eine Tabelle, die sich selbst mit cleveren Tricks nur sperrig in unser schickes Responsive Design einpassen lässt, bei Bedarf in den Fullscreenmodus zu schicken und ihr dort ein Zebramuster, einen anderen Font und eine größere Schriftgröße zu verpassen. Denkt beispielsweise an Stundenpläne, komplexe Datentabellen und so weiter.

Nicht nur das: Mit dem Pseudo-Selektor full-screen-ancestor könnt ihr darüber hinaus das Elternelement des Elementes ansprechen, das ihr in den Fullscreenmodus schickt. Dieses dann in der Art einer Lightbox einzufärben ist ein Leichtes. Und voilá, da habt ihr eine Zweizeiler-Lightbox.

Natürlich geht das alles erstmal wieder nur in den künftigen Webkit- und Mozilla-Browsern, aber was soll’s? Eine klassische Lightbox als Fallback einbinden ist auch keine große Sache. Oder ihr bietet keinen Fallback an und zeigt den Usern des IE einfach gar keine Fullscreen-Ansicht. Das hängt vom jeweilige Projekt ab. Wichtig ist nur zu wissen: es geht schon! Und andere tun es auch! Eine Implementierung des Fullscreenmodus findet ihr z. B. im Mediaplayer MediaElements.js.

CSS4 Selektoren

Im Bereich Selektoren wird sich auch einiges bewegen, z.B. werden wir endlich einen Parent-Selektor bekommen, yay! Wir werden künftig nth-columns aus Datentabellen ansprechen können, wir werden local-links stylen können und :link und :visited zu any-link zusammenfassen. Der bereits in Mozilla und Webkit implementierte Selektor :any wird seinen Einzug als :matches feiern und sicherlich bald auch mit einem Polyfill nutzbar sein, es gibt erste Überlegungen zu border-clip und vieles mehr … aber das ist ein neues Thema. Hier und heute habe ich mich auf Neuerungen beschränkt, die ihr jetzt schon einsetzen könnt.

Welche Ideen habt ihr zu den drei vorgestellten Techniken? Oder habt ihr sogar schon die eine oder andere Technik eingesetzt? Ich freue mich auf eure Kommentare!

Kommentare

Webstandard-Blo...
am 22.12.2011 - 09:19

Da hatten wir wohl beide die selbe Idee bzw. Planung Sandra ;o) Denn im Webstandard-Blog wird heute auch das Thema CSS - Die Zukunft des Webdesigns aufgegriffen. Wenn man sich mit den bisherigen Entwürfen beschäftigt, steigt wirklich die Vorfreude auf das was uns mal mit dieser "Version" erwartet.

Permanenter Link

Ingo
am 22.12.2011 - 10:37

Wow Sandra... was für ein toller Artikel! Vielen Dank dafür und bitte mehr davon :-)

Permanenter Link
Sandra Kallmeyer

Sandra Kallmeyer (Autor)
am 22.12.2011 - 18:23

Danke für das Lob, Ingo. :-)
Heiko, ich finde, unsere Artikel ergänzen sich super. Ich habe die Hands-on Sachen abgedeckt und du die Zukunftsvision. Bestens! :-)

Permanenter Link
Sandra Kallmeyer

Sandra Kallmeyer (Autor)
am 22.12.2011 - 18:28

Ich möchte noch ergänzen, dass ihr den matches-Selektor in Form von -moz-any bzw. -webkit-any bereits jetzt einsetzen könnt. Da ihr aber a) noch kein Polyfill für IE und Opera habt und ihr b) dadurch den Code eher aufbläht als verschlankt, habe ich das noch nicht ausgeführt. Falls jemand aber ein Beispiel findet, wo der Einsatz jetzt schon zweckmäßig ist, bitte kommentieren! Ich bin daran echt interessiert! :-)

Permanenter Link
Sandra Kallmeyer

Sandra Kallmeyer (Autor)
am 22.12.2011 - 19:01

Update: SVG Filter Effects werden wohl auch ihren Eingang in CSS4 finden. Eine erste Implementierung in Chrome Canary ist jedenfalls da. Spannende Zeiten! :-) http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit

Permanenter Link

Webstandard-Blo...
am 23.12.2011 - 10:18

@Sandra: Das sehe ich auch so ;o) Wenn man sich die Möglichkeiten von und mit CSS4 ansieht, kommt man fast in Versuchung CSS3 hinter sich lassen zu wollen und auf diese Eigenschaften stürzen und sie einsetzen ;o) Leider ist der Browsersupport noch sehr dünn, aber mal sehen was sich diesbezüglich nächstes Jahr tun wird!

Frohes Fest im übrigen an alle!!

Permanenter Link

Robine
am 09.01.2012 - 11:01

Einfach großartig, was noch alles auf uns zu kommt!

Permanenter Link

Ralf
am 10.01.2012 - 11:31

Super Ausblick Sandra, gibt es den schon einen Termin für die Einführung der neuen "Version" ?

Permanenter Link

Die Kommentare sind geschlossen.