CSS Scroll-Snap-Points, Variables, Shapes & Co.

Die Top 5 der kommenden CSS-Features
Kommentare

Schon lange kommen Webdesigner nicht mehr ohne aus: CSS. Über die Jahre hat die Sprache eine beachtliche Entwicklung durchlebt und wird mit immer neuen Features und Spezifikationen versorgt. Das Problem an der Sache ist jedoch: nicht alle der Neuerungen werden bereits weitläufig von allen Browsern unterstützt.

Natürlich heißt das, dass einige der neuen Features noch nicht in Produktion eingesetzt werden können oder sollten, doch ein wenig experimentieren ist natürlich erlaubt. Darum stellen wir euch insgesamt fünf der spannendsten neuen CSS-Features – unter anderem CSS Scroll-Snap-Points und CSS Variables – hier einmal genauer vor.

5 neue CSS-Features, auf die sich Webdesigner freuen dürfen

Immer mehr neue Spezifikationen und CSS-Features finden ihren Weg auf die Empfehlungsliste des W3C – und immer mehr dieser neuen Features werden auch von den Browser-Herstellern in ihren Produkten unterstützt. Doch während zwar fleißig an der Implementierung gearbeitet wird, gibt es so einige Spezifikationen, die Webdesignern und -entwicklern die Arbeit deutlich vereinfachen können, die bisher nur wenig Browser-Support erfahren. Dazu zählen zum Beispiel die folgenden fünf Features:

1.

CSS Scroll-Snap-Points


Beim Erstellen von Bildergalerien, die zum Beispiel horizontal gescrollt werden können, kommt meist JavaScript zum Einsatz. Tatsächlich lassen sich solche Galerien aber auch mit reinem CSS erstellen – und zwar mithilfe von CSS Scroll-Snap-Points. Gerade auf Devices, die über Touch-Gesten bedient werden, bietet diese neue Spezifikation einige Vorteile gegenüber der Nutzung von JavaScript oder einer Library zum Definieren des Scroll-Verhaltens.

CSS Scroll-Snap Points bieten dem User eine flüssige und vor allem präzise Scrolling-Experience auf Touch- und Input-Devices. Mit ihnen lässt sich das Scroll-Verhalten eines Scroll-Containers durch die Definition von sogenannten Snap-Points auf der x- und y-Achse kontrollieren. So springt der Container automatisch zum nächsten Content-Punkt, wenn der User horizontal oder vertikal scrollt. Im Klartext heißt das also laut Guil Hernandez:

We’ll be able to view each photo in the gallery with a sideways swipe that snaps between the next/previous image.

In einem Tutorial erklärt Hernandez die Nutzung von CSS Scroll-Snap-Points noch einmal ausführlicher und mit einigen Code-Beispielen und Demo-Galerien.

2.

CSS Scoped Style


Viele Webentwickler und -designer haben sich bei der Nutzung von CSS mehr Kontrolle gewünscht. Dieser Wunsch soll ihnen zum Beispiel mit CSS Scoped Styles erfüllt werden. Dabei handelt es sich um das Element-Attribut scoped, das zum Beispiel dem Style-Element hinzugefügt werden kann, um etwa nur Styles zu einem Parent-Element und davon abstammende Child-Elemente hinzuzufügen.

Ursprünglich wurde die Spezifikation für das Attribut schon in 2011 eingereicht, doch seither hat sich nur wenig getan. Das wird besonders im Browser-Support auffällig, denn derzeit unterstützt nur Firefox Scoped CSS. Zwar kann man mit Polyfills einen Workaround erstellen, doch weil dabei unnötig viel inline CSS geschrieben werden muss, ist das für viele Entwickler eben doch wieder ein Schritt zurück anstatt voran.

Mehr Informationen zu dem Attribut findet sich zum Beispiel im Mozilla Developer Network, und auch David Walsh hat Scoped CSS – inklusive einer Demo für Firefox – etwas näher vorgestellt.

3.

CSS Variables


CSS-Präprozessoren wie zum Beispiel Sass erfreuen sich großer Beliebtheit – unter anderem deswegen, weil sie die Nutzung von Variablen im CSS ermöglichen. So lässt sich viel Zeit beim Festlegen der im Design genutzten Farben und Schriftarten sparen, und auch das Maintainen und Durchführen kleinerer Änderungen wird deutlich erleichtert.

CSS-Variablen sollen genau diese Funktionalität auch in natives CSS bringen. Sie bestehen aus den drei Hauptkomponenten Custom Properties, var ()-Funktionen und :root-Pseudo-Klassen und bringen zahlreiche Vorteile mit sich, die wir euch an anderer Stelle schon einmal ausführlich vorgestellt haben. Ähnlich nützlich ist übrigens auch das currentColor-Keyword, das sich ähnlich wie eine Variable verhält. Viele Beispiele für die Nutzung von CSS Variables finden sich etwa im passenden Eintrag im MDN, und auch Sara Soueidans Artikel zur Nutzung von currentColor bietet viele nützliche Tipps und Informationen zu CSS Variables.

4.

CSS Shapes


Das Web kannte bisher prinzipiell nur eine Form – das Rechteck. Um Text wirklich hervorzuheben und in Form zu bringen, gab es lange keine Möglichkeiten, die über abgerundete Ecken oder Animationen hinausgingen. CSS Shapes soll da Abhilfe schaffen. Damit können zum Beispiel Formen wie Kreise, Ellipsen oder Polygone manuell definiert oder aus Bildern angedeutet werden, um einzelne Bereiche des Inhalts hervorzuheben.

CSS Shapes sind damit ein überaus nützliches Feature, um Content mithilfe von Formen aufzuwerten, allerdings muss man auch hier noch auf den weitläufigen Browser-Support verzichten, denn derzeit wird das Feature nur von Chrome, Safari und Opera unterstützt. Ein nützliches Tutorial zur Nutzung von CSS Shapes hat übrigens Razvan Caliman verfasst, das gleichzeitig auch einige Beispiele beinhaltet.

5.

CSS background-blend-mode


Um das Design eines Elements aufzupeppen, kann man zum Beispiel CSS background-blend-mode nutzen. Damit können beispielsweise ein Hintergrundbild mit dessen eigener Hintergrundfarbe, aber auch mit einem anderen Hintergrundbild, das aus dem gleichen Element hinzugefügt wurde, verblendet werden. Zur Verfügung stehen dafür insgesamt 16 verschiedene Blend-Modes, die vielen Nutzern bereits aus Bildbearbeitungsprogrammen wie Photoshop bekannt sein dürften.

Bereits an anderer Stelle haben wir euch gezeigt, wie man mehrere Blend Modes und Hintergrundbilder miteinander verketten kann. Mehr Informationen zu der Spezifikation selbst bieten zum Beispiel die Ressourcen von Adobe, aber auch der – wenngleich bereits etwas ältere – Artikel von Chris Coyier bietet allerhand nützliche Tipps sowie viele Beispiele.

Das leidige Thema: Browser-Support

Wie eingangs bereits erwähnt, ist der Browser-Support der vorgestellten Features eher überschaubar. Am besten schneidet dabei CSS background-blend-mode ab, das immerhin bereits in Firefox, Chrome und Opera unterstützt wird. Um zu überprüfen, welche Features und Spezifikationen von welchen Browsern unterstützt werden, hilft der Blick auf caniuse.com. In jedem Fall aber dürften die genannten Features für eine deutliche Weiterentwicklung von CSS sorgen, sodass ein besserer Browsersupport hoffentlich nicht mehr allzu lange auf sich warten lassen wird.

Aufmacherbild: Top 5 list written on notebook, grey wooden background. von Shutterstock / Urheberrecht: kenary820

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -