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!
Hier ein paar Beispiele:
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!
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
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.