Pure-CSS | No JavaScript Webdesign

CSS-only - wenn möglich nur CSS

Schnellere Websites, weniger Aufwand, weniger Probleme

Heutige Websites sind oft mit zahlreichem JavaScript überladen. Oft werden ganze JS Libraries geladen, aus welcher nur Teile oder sogar gar keine Funktionen verwendet werden. Dies führt zu langen Ladezeiten, mehr Aufwand für Updates und leider auch oft zu vielen Browser Fehlermeldungen.

Dabei könnte bei vielen gängigen Funktionalitäten auf JavaScript verzichtet werden. Meine Webagentur setzt CSS vermehrt auch für Anwendungen ein, welche früher nur mit JavaScript möglich waren.

Vorteile von CSS gegenüber JavaScript

Schnellere Ladezeiten
Reduktion der Komplexität
Keine Browser Fehlermeldungen
Keine JavaScript Updates
Darstellungssicherheit

Nachteile von CSS gegenüber JavaScript

Begrenzter Funktionsumfang

Die 5 besten pure-CSS Beispiele aus unserer Webagentur

Nachfolgend zeige ich 5 bewährte CSS-only Beispiele für gängige Webdesign-Funktionalitäten, welche bereits in meiner Webagentur im Einsatz sind. Dabei handelt es sich um Carousel / Slider, horizontale Scroll-Navigation, Accordion, Hamburger Menu und Lightbox.

CSS-only Carousel / Slider für Mobile

Extrem einfach und praktisch

Das CSS Carousel ist eine extrem einfache und praktische Darstellungsform auf mobilen Geräten. Es wird in meiner Webagentur besonders oft eingesetzt. Die Umsetzung mit reinem CSS ist im Gengensatz zu JavaScript mit nur wenigen Zeilen Code möglich.

Dabei werden die Inhalte, welche auf breiten Screens nebeneinander Platz haben, einfach innerhalb eines DIV’s horizontal scrollbar gemacht. Der Scrollbalken wird dabei entfernt. Mit der CSS property scroll-snap-type können die Bereiche magnetisch einrastbar gemacht werden. Durch eine prozentuale Breite wird sichergestellt, dass der Bereich immer angeschnitten ist. Dadurch wird für die User sofort klar, dass nach rechts geswipt werden kann.

Nachfolgend ein einfaches Beispiel mit Source Code:

See the Pen Mobile CSS Carousel (Slider) by Webgarten GmbH (@webgarten) on CodePen.

Nachteile dieses pure-CSS Carousel

Es funktioniert nur für die Mobile Version. Da auf Desktop horizontales Scrollen nicht immer möglich ist. Ansonsten müssten auf Desktop Navigationsbuttons oder ein Scrollbalken eingebaut werden. Dazu wäre wiederum JavaScript notwendig.

Pure-CSS Horizontale Scroll-Navigation

Vom App Design zum Webdesign

Dieser Navigations-Typ sieht man immer öfter. Unter anderem wird sie oft bei Apps von Google verwendet. Das Prinzip ist einfach. Es handelt sich um eine simple, horizontale Navigation. Aber wenn das Fenster schmaler wird und der Platz fehlt, kann diese horizontal gescrollt werden. Damit dies für den User besser ersichtlich wird, habe ich zusätzlich einen überlagernden Auslauf am rechten und linken Rand eingefügt.

Nachfolgend ein einfaches Beispiel mit Source Code:

See the Pen CSS Horizontale Scroll Navigation by Webgarten GmbH (@webgarten) on CodePen.

Nachteile dieser CSS-only Navigation

Nach dem Seitenwechsel befindet sich die Scrollposition immer am Anfang. Um die letzte Scrollposition oder die aktive Seite mittig anzuzeigen, wird JavaScript benötigt. Zudem funktioniert auch diese Lösung nur für die Mobile Version. Da auf Desktop horizontales Scrollen nicht immer möglich ist.

Native HTML5 Aufklapp Bereich (Accordion)

Ich wünschte, ich hätte das schon früher gewusst!

Immer wieder benötigt man ein Accordion oder ein simpler Aufklappbarer Inhalt. Meist wird dies mittels JavaScript umgesetzt. Dabei ist weder JavaScript, ja noch nicht mal CSS notwendig. Das Detail Disclosure Element macht es möglich und wird von allen gängigen Browsern unterstützt.

Hier ein simples Beispiel mit Source Code:

See the Pen Native HTML5 Aufklapp-Bereich (Accordion) by Webgarten GmbH (@webgarten) on CodePen.

Nachteile Accordion ohne JavaScript

Aufgeklappte Bereiche schliessen sich nicht automatisch beim Aufklappen eines weiteren Bereichs. Dafür wäre JavaScript notwendig. Allerdings ist dies meist auch störend, da sich der Inhalt dadurch verschiebt.

Pure-CSS Hamburger Menu

Ganz ohne JavaScript

Auch das gängige Hamburger Menu lässt sich mittlerweile problemlos als pure-CSS Lösung umsetzen. Dabei kommt die CSS Pseudo Class :target zum Einsatz.

See the Pen Pure-CSS Hamburger Menu by Webgarten GmbH (@webgarten) on CodePen.

Nachteile von CSS-only Hamburger

Für den geöffneten Zustand wird an der URL #name angehängt und beim Schliessen entfernt.

Pure-CSS Lightbox (Modal)

Auch hier Pseudo Class :target

Die Lightbox funktioniert im Prinzip gleich wie das Hamburger Menu. Auch hier kommt die CSS Pseudo Class :target zum Einsatz.

See the Pen Pure-CSS Lightbox by Webgarten GmbH (@webgarten) on CodePen.

Nachteile von CSS-only Lightbox

Für den geöffneten Zustand wird an der URL #name angehängt und beim Schliessen entfernt.

Zusammenfassung

Dies waren einige einfache Beispiele für simple Funktionen, welche man besonders oft im Webdesign Alltag brauchen kann. Natürlich gehen die Möglichkeiten noch viel weiter. Besonders im Bereich Animation und Effekt ist mit CSS noch viel möglich.

Die Vorteile durch den Verzicht auf JavaScript und Libraries sind gross. Jedoch kommt man meist doch nicht ganz ohne JavaScript aus. Dieses kann durch eine gewisse Kompromissbereitschaft aber massgeblich reduziert werden.

FAQ

Was ist pure-CSS?

Als Pure-CSS werden Webdesign Funktionalitäten bezeichnet, welche mit reinem CSS und ohne JavaScript umgesetzt werden. Oft wird dafür auch die Bezeichnung CSS-only verwendet. Daneben gibt es eine CSS Framework mit dem Namen pure-CSS. Dieses hat aber nichts mit der erwähnten pure-CSS Philosophie zu tun.

Wo liegen die Vorteile von pure-CSS?

Durch den Verzicht auf JavaScript und entsprechende Libs weisen pure-CSS Websites wesentlich schnellere Ladezeiten auf. Zudem fällt der Aufwand für Updates weg und es können keine JS Fehler entstehen. Insgesamt wird durch CSS-only die gesamte Komplexität eines Webdesign Projekts reduziert.

Wo liegen die Nachteile von pure-CSS?

Viele Webdesign-Funktionalitäten sind nur mit JavaScript realisierbar. Daher ist eine konsequente pure-CSS Umsetzung bei grösseren Projekten meist nicht möglich.

Was spricht gegen JavaScript?

Viel JavaScript erhöht die Komplexität und den Wartungsaufwand von Internetprojekten. Zudem erhöht es die Fehleranfälligkeit und Ladezeit. Oft werden gesamte Libraries geladen, obwohl nur Teile daraus benötigt werden.

Wird CSS JavaScript ersetzen?

Nein, definitiv nicht. Bei CSS liegt der Fokus auf dem Aussehen von Webdesign (Styles). Es handelt sich um eine Seitenbeschreibungssprache, während JavaScript eine Programmiersprache ist.

Welches CSS-Framework verwendet Ihre Webagentur?

Um im Google Lighthouse Test die Wertung 100 in allen Disziplinen zu erreichen hat Webgarten ein eigenes SASS/CSS Framework entwickelt, das Warp Speed Framework.

Was ist CSS und wofür steht es?

CSS steht für Cascading Style Sheets und beschreibt das Aussehen von Webdesign, nicht aber die Funktionalität. Dabei handelt es sich um eine Seitenbeschreibungssprache.

Darf der hier gezeigte Code verwendet werden?

Ja, der Code darf frei verwendet werden. Im Gegenzug würde ich mich über eine positive Bewertung auf Google freuen.

Nichts nervt die Nutzer mehr

Besser gefunden werden, mehr Transaktionen, geringere Abbruchrate und zufriedenere Nutzer? Dann reduzieren Sie den Cumulative Layout Shift CLS – und so geht es:

CLS Optimierung