Im Webdesign und in der Entwicklung sind die Feinheiten von CSS oft der Schlüssel zu einer außergewöhnlichen Nutzererfahrung.

In diesem Blog-Beitrag zeige ich Dir unsere Top 10 der CSS-Tricks, die nicht nur Zeit und Mühe sparen, sondern auch die Performance und das visuelle Erlebnis Deiner Website drastisch verbessern können.

Tauche mit uns in die Welt der CSS-Geheimnisse ein und entdecke, wie wir Deine Webprojekte gemeinsam auf die nächste Stufe heben können.

Scroll Snapping ohne JavaScript!

CSS Scroll Snap ist eine Technik in CSS, die es ermöglicht, den Inhalt einer Webseite beim Scrollen in bestimmten Positionen "einzurasten".

Stell Dir vor, wir scrollen durch ein Online-Fotoalbum.
Ohne Scroll Snap könnte es passieren, dass wir zwischen zwei Fotos stehenbleiben, ohne dass eines davon vollständig sichtbar ist.
Mit Scroll Snap lässt sich das Scrollen auf einem Container so eingestellen, dass automatisch das nächstgelegene Foto vollständig angezeigt wird.

Und das beste: hierfür brauchen wir keine einzige Zeile JavaScript!

Hier ein paar Beispiele:

Für die Container verwenden wir folgenden CSS-Code:

.snap-example {
    overflow: auto;
    display: flex;
    max-width: 600px;
    scroll-snap-type: x mandatory;
}
            Code kopieren

CSS Code für scroll-snap-start

.snap-element {
    scroll-snap-align: start;
}
            Code kopieren

CSS Code für scroll-snap-center

.snap-element {
    scroll-snap-align: center;
}
            Code kopieren

CSS Code für scroll-snap-end

.snap-element {
    scroll-snap-align: end;
}
            Code kopieren

aka. Parent-Selector

Seit 2023 ist es endlich möglich, den Parent bzw. das übergeordnete Element eines anderen Elements ohne JavaScript anzusprechen.

Besonders praktisch ist dies bei Formularen..
Angenommen, ein Eingabefeld hat eine falsche Eingabe bekommen und wir wollen diesen Fehler im Formular mit einem Hinweis, der weiter oben steht, anzeigen.

Unsere HTML-Struktur könnte z. B. so aussehen:

<form id="contact-form">
    <p class="error-hint">Achtung falsche Eingabe!</p>

    <div class="form-element">
        <div class="form-outline">
            <input class="form-control"
                           type="text"
                           pattern="^[a-zA-Z]*$"
                           value="">
            <label class="control-label form-label">Name:</label>
           
        </div>
    </div>

</form>
            Code kopieren

Standardmäßig soll dieser Hinweis verborgen sein und erst sichtbar werden, wenn eine falsche Eingabe erfolgt ist.

Mit dem neuen Parent-Selektor sähe unser CSS dann so aus:

#contact-form .error-hint {
	display: none;
} 

#contact-form:has(input:invalid) .error-hint {
	display: inline;
}
            Code kopieren

Hier das Beispiel gerendert und funktional:

Das Ganze erspart uns also eine ganze Menge Aufwand, den wir sonst mit einem extra JavaScript hätten.

Für dieses Beispiel hätten wir mit JavaScript einen MutationObserver gebraucht, welcher schaut, ob sich innerhalb der Kind-Elemente etwas geändert hat und dementsprechend den Hinweis anzeigt oder ausblendet.

Ein Muss für responsive Websites!

Mit dieser Funktion können wir Wertebereiche für Schriftgrößen, Abstände etc. festlegen, welche sich dynamisch an die Größe des Bildschirms anpassen. Das bedeutet, dass die Website auf kleinen Bildschirmen genauso gut wie auf großen Bildschirmen aussieht.

Entwickler sparen hiermit Zeit und schaffen einen kompakteren Quellcode, da Media-Queries nicht mehr so oft gebraucht werden.

Die Syntax ist wie folgt: clamp(Minimum, <Wert>, Maximum);
Der <Wert> ist hierbei eine dynamische Größe wie bspw. die vw (View width = Bildschirmbreite). Minimum und Maximum können alle anderen möglichen CSS-Einheiten sein.

Wenn wir nun eine dynamische Schriftgröße haben wollen, können wir Folgendes schreiben: font-size: clamp(20px, 5vw, 40px);
Damit wird unsere Schriftgröße abhängig von der Bildschirmbreite (5 % in diesem Fall). Insgesamt darf die Schriftgröße aber maximal 40px groß werden und nicht kleiner als 20px sein.

Hier unser Beispiel

Die Box lässt sich per Maus größer und kleiner machen und der Text passt sich per clamp() an die Container-Breite an.

Text, der sich dem Container anpasst

Der Code dafür:

(Hier mit cqw anstatt vw für einfachere Veranschaulichung)

<div id="clamp-example">
    <p>Text der größer und kleiner werden kann</p>
</div>
            Code kopieren

#clamp-example p {
     font-size: clamp(10px, 5cqw, 40px);
}
            Code kopieren

Abstände, Größen etc. einfach selber berechnen lassen!

Manchmal kommt es vor, dass wir die Größe eines Elements gar nicht genau bestimmen können.
Angenommen wir möchten ein untergeordnetes Element (Child) links und rechts stets 20 Pixel schmaler haben als das Übergeordnete (Parent).
Als erstes denkt man da an padding: 20px; auf dem Parent. Das sorgt aber dafür, dass sich die Größe des Parents ändert.

width: 80% auf dem Child funktioniert auch nur dann, wenn der Parent genau 100px breit ist.

Sicherlich gibt es noch andere Methoden, aber die einfachste ist folgende:

Wir lassen es dynamisch berechnen mit diesem Befehl: width: calc(100% - 20px).
So rechnet der Browser mit 100 % des Parents und zieht davon immer 20px ab.

In der calc-Funktion können wir mit allen CSS-Einheiten sowie mit den üblichen Rechenarten wie Addition, Subtraktion, Multiplikation oder Divsion rechnen.

Außerdem können wir hier auch CSS-Variablen verwenden.
Beispiel für einen vergrößerten, aber immer noch einheitlichen Abstand mit einer CSS-Variable:
margin: clac(--baseMargin * 5).

Hier ein Beispiel mit der Container-Breite:

Breite: 100% vom Container - 40px

Der Code dafür:

<div id="calc-example">
    <p>Immer 20px kleiner als der Parent</p>
</div>
            Code kopieren

#calc-example p {
     width: calc(100% - 40px);
}
            Code kopieren

CSS [attribute^="value"], [attribute~="value"], [attribute$="value"]

Diese Selektoren helfen uns dabei gezielt Elemente anzusprechen ohne jedes einzelne manuell per ID oder Klasse anzusprechen.
Hiermit können auch alle Attribute abgefragt werden, in den Beispielen verwenden wir allerdings nur ID- oder Klassen-Attribute.

Starts With - Selektor

Mit diesem Selektor können HTML-Elemente ausgewählt werden, deren Attribute mit einem bestimmten Text beginnen.

Angenommen wir haben folgende HTML-Struktur:

<img id="custom-image-1-uid" src="..."/>
<img id="custom-image-2-special-uid" src="..."/>
<img id="custom-image-3-another-uid" src="..."/>
            Code kopieren

Jetzt können wir mittels CSS: [id^='custom-image''] alle Bildelemente auswählen, deren IDs mit dem Text 'custom-image' beginnen.

Das ganze geht natürlich auch für Klassen: [class^='custom-image']

Ends With - Selektor

Dieser funktioniert genauso wie der "Starts With"-Selektor, bloß werden hiermit Elemente ausgewählt die mit dem angegebenen Text aufhören.
Syntax: [id$='uid']

Contains - Selektor

Dieser funktioniert genauso wie die anderen beiden Selektoren, allerdings wird hier nicht nach Attributen gesucht die mit dem Text beginnen, sondern den Text beinhalten.
Die Syntax sieht so aus: [id~='image']. Damit werden also alle IDs ausgewählt die das Wort 'image' beinhalten.

Performance Boost für aufwendige Animationen!

Wenn wir mit CSS komplexere Animationen durchführen und dabei z. B. die Transform-eigenschaft beeinflussen, kann das zu Performance-Problemen führen.
Insbesondere Mobilgeräte sind davon betroffen, weil diese viel weniger Rechenleistung haben.

Als Beispiel für eine etwas komplexere Animation, die noch zusätzlich über JavaScript gesteuert wird, haben wir hier eine unserer Team-Karten.
Auch zu sehen auf unserer Team-Seite.

Firn

Super toll animierte Karte!

Diese orientieren sich, in der Desktop-Version, an der Position des Mauszeigers und drehen sich dementsprechend etwas in dessen Richtung.
Wenn wir von solchen Animationen nun noch mehrere auf einer Seite haben, ist diese für manche Geräte nur sehr eingeschränkt nutzbar.

Der Trick: will-change: <Eigenschaft>; auf das Element setzen, welches animiert wird. In unserem Falle wäre die Eigenschaft das CSS transform.

Jetzt weiß der Browser, dass dieses Element sich später verändern wird und kann mehr Ressourcen dafür aufwenden.
Mehr müssen wir auch gar nicht machen, um einen deutlichen Performance boost zu kriegen.

Üblicherweise gibt es auf einem Element maximal einen box-shadow oder einen drop-shadow.
Davon können wir aber tatsächlich beliebig viele aneinander hängen und z. B. folgende Effekte erzeugen:

Text

Für Box-Shadows

Im ersten Beispiel habe ich ein einfaches Quadrat genommen und dort mehrere Box-Shadows hinzugefügt.

Hier muss beachtet werden, dass die box-shadows per Komma getrennt sind.

Der Code dazu sieht so aus:

 
        background-color: var(--colorPrimary0);
        box-shadow:
            10px 10px var(--blur) var(--colorPrimary1),
            20px 20px var(--blur) var(--colorPrimary2),
            30px 30px var(--blur) var(--colorPrimary3),
            40px 40px var(--blur) var(--colorPrimary4),
            50px 50px var(--blur) var(--colorPrimary5),
            60px 60px var(--blur) var(--colorPrimary6),
            70px 70px var(--blur) var(--colorPrimary7);
            Code kopieren

Für Drop-Shadows

Im zweiten Beispiel benutze ich drop-shadows. Hier ist es wichtig, dass die drop-shadows nicht mit Komma getrennt sind.

Ausserdem muss man beachten, dass jeder Drop-Shadow auf den vorherigen aufbaut. Das heißt, dass die Position der Drop-Shadows immer gleich bleiben muss, um einen gleichmäßigen Versatz zu kriegen.

Der Code dazu sieht so aus:


        filter:
            drop-shadow(10px 10px var(--blur) var(--colorPrimary))
            drop-shadow(10px 10px var(--blur) var(--colorPrimary1))
            drop-shadow(10px 10px var(--blur) var(--colorPrimary2))
            drop-shadow(10px 10px var(--blur) var(--colorPrimary3))
            drop-shadow(10px 10px var(--blur) var(--colorPrimary4))
            drop-shadow(10px 10px var(--blur) var(--colorPrimary5))
            drop-shadow(10px 10px var(--blur) var(--colorPrimary6));
            Code kopieren

Sogar für Text-Shadows

Im letzten Beispiel benutze ich text-shadows. Diese funktionieren von der Syntax her genauso wie box-shadows.

Der Code dazu sieht so aus:

        text-shadow:
            2px 2px var(--blur) var(--colorPrimary),
            4px 4px var(--blur) var(--colorPrimary1),
            6px 6px var(--blur) var(--colorPrimary2),
            8px 8px var(--blur) var(--colorPrimary3),
            10px 10px var(--blur) var(--colorPrimary4),
            12px 12px var(--blur) var(--colorPrimary5),
            14px 14px var(--blur) var(--colorPrimary6);
            Code kopieren

Eine bessere alternative für overflow: hidden;

Mit dem CSS-Befehl overflow: hidden; können wir jeglichen Content, der über die Grenzen eines Containers hinausgeht, ausblenden. Der überschüssige Content wird sozusagen abgeschnitten und verborgen.

Oft wird overflow-x: hidden; auf den Body-Tag gesetzt, damit eine Website nur vertikal scrollbar ist. Das ist dann super hilfreich, wenn Elemente an den Seiten über den Body hinausragen.
Es kann z. B. ein Bild sein, das aus designtechnischen Gründen über den Bildschirmrand schauen soll oder ein Menü, das per Klick von rechts reinrutscht.

Allerdings kann dies zu unerwarteten Problemen führen:

position: sticky; funktioniert nicht mehr, wenn ein übergeordnetes Element overflow: hidden; benutzt. Das liegt daran, dass overflow: hidden den "Kontext" für das Sticky-Verhalten des Elements entfernt, indem es den sichtbaren Bereich des Containers beschränkt.
Es tauchen möglicherweise unterwartete Scrollbars auf, obwohl für die jeweiligen x- oder y-Achsen das Scrollverhalten mit hidden oder visible festgelegt wurde.

Die Lösung: overflow: clip;

Auf den ersten Blick funktioniert dieser Befehl genauso wie overflow: hidden.
Der Vorteil ist aber, dass das Problem mit position: sticky nicht auftritt und wir gleichzeitig eine Achse verbergen können, ohne damit für die andere eine Scrollbar zu erstellen.

Hier sind ein paar Beispiele zur Veranschaulichung: