Fortgeschritten
Spezifität erklärt, welche Regel gewinnt. Transitions und Transforms bringen Bewegung — ohne JavaScript.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Spezifität
Bei konkurrierenden Regeln gewinnt die höhere Spezifität: IDs zaehlen mehr als Klassen, Klassen mehr als Elemente.
Als Merkform (a, b, c): a zählt IDs, b zählt Klassen, Attribute und Pseudoklassen, c zählt Elemente. #nav .item a ergibt (1, 1, 1).
Bei gleicher Spezifität gewinnt die später definierte Regel. !important übersteuert alles und sollte die Ausnahme bleiben.
Transitions
transition animiert Wertänderungen weich, etwa bei :hover.
Angegeben werden Eigenschaft, Dauer und Timing-Funktion.
.button {
background: #0f766e;
transition: background 0.3s ease;
}
.button:hover {
background: #115e59;
}Transforms und Keyframes
transform verschiebt (translate), skaliert (scale) oder rotiert (rotate) ein Element, ohne das Layout drumherum zu verändern.
@keyframes definiert mehrstufige Animationen, die mit animation abgespielt werden.
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.badge {
animation: pulse 2s infinite;
}Vertiefung
Spezifität und Bewegung bewusst einsetzen
Spezifität entscheidet, welche Regel gewinnt: IDs vor Klassen vor Elementen. Bei Gleichstand gewinnt die spätere Regel. !important sollte die Ausnahme bleiben, weil es die Kaskade schwer nachvollziehbar macht.
Transitions und Transforms machen Zustandswechsel sichtbar, ohne das Layout zu verschieben. Respektiere prefers-reduced-motion und animiere bevorzugt transform und opacity.
.button {
transition: transform 180ms ease, background 180ms ease;
}
.button:hover {
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
}Merksatz: Spezifität niedrig halten, Bewegung sparsam einsetzen und reduzierte Bewegung respektieren.
Übungsaufgabe
Button mit Spezifität und Motion
Style einen Button mit Hover-Transform und Transition. Erkläre im Kommentar, welche Regel bei einem Konflikt gewinnt, und deaktiviere Bewegung für reduzierte Einstellungen.
Das soll dein Programm können
- Klasse .button mit transition
- Hover mit transform
- prefers-reduced-motion beachten
- Kein !important
- Kommentar zur Spezifität
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Eine Klassenregel und eine Klassenregel mit Pseudoklasse haben unterschiedliche Spezifität: .button:hover ist höher als .button.
Lösung anzeigen
.button {
/* .button:hover hat eine Klasse + Pseudoklasse und gewinnt
gegen die reine .button-Regel bei gleicher Reihenfolge. */
background: #0f766e;
color: #ffffff;
transition: transform 180ms ease, background 180ms ease;
}
.button:hover {
background: #115e59;
transform: translateY(-2px);
}
.button:focus-visible {
outline: 3px solid #134e4a;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
}Warum funktioniert das?
Die Hover-Regel ist spezifischer als die Basisregel. transform verschiebt nur optisch und löst kein neues Layout aus; die Media Query respektiert Nutzereinstellungen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.