Vorname
Nachname
Catch Phrase
Seite wird geladen
UNSERE BESTEN CSS-TRICKS FÜR DICH!
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.
CSS SCROLL-SNAP
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!
SCROLL SNAP START
CSS Code für scroll-snap-start
.snap-element {
scroll-snap-align: start;
}
Code kopieren
SCROLL SNAP CENTER
CSS Code für scroll-snap-center
.snap-element {
scroll-snap-align: center;
}
Code kopieren
SCROLL SNAP END
CSS Code für scroll-snap-end
.snap-element {
scroll-snap-align: end;
}
Code kopieren
:HAS() - SELEKTOR
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.
DIE CSS CLAMP() - FUNTKION
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
DIE CSS CALC() - FUNKTION
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 STARTS WITH-, CONTAINS- UND ENDS WITH - SELEKTOREN
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.
CSS WILL-CHANGE EIGENSCHAFT
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.
Biography
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
