Zusammenfassung

In dieser Lektion haben wir die Seite des Tierheims auf ihre Besucher reagieren lassen und herausgefunden, dass:

• eine Variante ein Präfix vor einer Klasse ist, gefolgt von einem Doppelpunkt. Eine Klasse mit einer Variante gilt nur in ihrem Zustand: hover:bg-orange-600 nur, solange der Mauszeiger über dem Element steht. Das Element behält außerdem seine gewöhnlichen Klassen.
• jede Klasse, die nur in einem Zustand gelten soll, ihre eigene Variante braucht, etwa focus-visible:outline-2 focus-visible:outline-orange-500.
• sich Varianten verketten lassen: enabled:hover:bg-orange-600 gilt nur, wenn beide Bedingungen erfüllt sind.
• transition-colors, transition-shadow oder transition zusammen mit duration-* Änderungen sanft machen. Sie stehen ohne Variante am Element, damit die Änderung in beide Richtungen sanft ist.
• cursor-pointer über einem Button die Hand zeigt, cursor-not-allowed einen durchgestrichenen Kreis.
• Preflight Rahmen und Hintergrund von Formularfeldern entfernt, du sie also selbst gestaltest. Das Attribut placeholder zeigt in einem leeren Feld ein Beispiel, und die Variante placeholder: stellt seine Farbe ein.
• ein Element mit Fokus für Leute, die die Tastatur benutzen, einen sichtbaren Umriss braucht, du ihn also nie ohne Ersatz entfernen solltest: focus: für Felder, focus-visible: für Buttons, mit outline-2, outline-offset-2 und einer outline-*-Farbe.
• das Attribut disabled einen Button ausschaltet und die Variante disabled: ihm ein Aussehen gibt, das das zeigt.
• group an einem Vorfahren und group-hover: an einem Element darin das Element gestalten, wenn der Mauszeiger über dem Vorfahren steht.
• first:, last:, odd: und even: ein Element nach seiner Position unter seinen Geschwistern gestalten. Sie kommen an jedes der Geschwister.

In der nächsten Lektion, Responsives Design, lernst du Varianten kennen, die nicht davon abhängen, was der Besucher tut, sondern davon, wie breit der Bildschirm ist.

Zum Üben: Hier ist ein neuer Teil der Website des Tierheims, ein Kasten mit einer Bitte um Spenden. Sein Button „Spenden“ ist gestaltet, reagiert aber noch auf nichts. Nutze, was du in dieser Lektion gelernt hast.