CSS aktuell: Warten auf animation-timeline: scroll()

Popover – Popup-Fenster ohne Javascript

Das HTML dialog-Tag gibt es schon seit geraumer Zeit für kleine Nachrichten, Warnungen und Hinweise. dialog platziert bei einem Klick ein Fenster über die Seite, das wie ein absolut positioniertes Fenster wirkt.

Aber für das Popup-Fenster braucht das dialog-Element immer noch Javascript – es sei denn, wir nutzen das neue popover-Attribut.

<button popovertarget="my-popover">popup!</button>

<dialog id="my-popover" popover>
  <p>Danke für's Mitmachen!</p>
  <p>ESC oder außerhalb dieses Fensters klicken, um es zu schließen</p>
</dialog>

Ohne weitere Einstellungen oder CSS legt sich das Popover-Fenster über die vertikale und horizontale Mitte des Fensters. Der nachfolgende Inhalt bleibt an seinem Platz und verdrängt nachfolgenden Inhalte nicht. Unter dem Popup-Fenster kann der Benutzer die Seite scrollen, aber interaktive Elemente sind außer Kraft gesetzt.

Anstelle des dialog-Elements kann der Hinweis genauso gut in einfache div-Tags eingeschlossen werden. Was zählt, ist das popover-Attribut.

Pseudoklasse :popover-open

Das popover-Attribut bringt eine eigene CSS-Pseudoklasse mit:
:popover-open spricht das geöffnete Popover-Fenster an und bringt dem Popup-Fenster das sanfte Rauf- und Runterrutschen bei.

/** »Normaler« Anfangszustand **/
[popover]:popover-open {
	translate: 0 0;
}

[popover] {
	transition: translate 0.7s;
	translate: 0 -22rem;
}

@starting-style {
	[popover]:popover-open {
		translate: 0 -22rem;
	}
}

@starting-style muss immer als letzte Regel aufgeführt werden, damit sie nicht von »normalen« Regeln überschrieben wird.

@starting-style

Normalerweise starten CSS-Transitionen von den aktuellen (gerenderten) Stilen des Elements. Ohne @starting-style müsste man den Startwert als from in einer Animation setzen.

@starting-style setzt einen Anfangszustand, aber beeinflußt den normalen Stil des Elements nicht.

.fade-in {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

@starting-style {
    .fade-in {
        opacity: 0;
    }
}

animation-timeline: scroll()

CSS-Animationen starten per se, wenn die Seite geladen wird. Bis jetzt musste Javascript nachhelfen, um eine Animation auszulösen, wenn sie in den sichtbaren Ausschnitt des Browserfensters kommt.

Dieser Browser unterstützt animation-timeline: scroll() noch nicht.

Der Ausgangspunkt ist eine ganz normale CSS-Keyframes-Animation. Mit animation-timeline: scroll() synchronisiert der Browser die Animation mit dem Scrollen.

@keyframes grow-progress {
	from { transform: scale(0.3,0.3)}
	to {transform: scale(1.5,1.5)}
}

#beatle {
	height: 320px;
	max-width: 98%;
	background: url('kaefer.webp') no-repeat;
	background-size: cover;
	animation: grow-progress linear forwards;
	animation-timeline: scroll();
	transform-origin: center center;
}

Eine Zeile macht den Unterschied: animation-timeline: scroll() und die Dauer der Animation (duration) entfällt.

text-wrap: balance

text-wrap: balancesoll für ein ausgewogenes Schriftbild von Texten sorgen. Dafür versucht der Browser, die Zeilen möglichst gleich lang zu halten und vermeidet, dass in der letzten Zeile ein einzelnes Wort steht.

CSS-Console: Testen, untersuchen und Informationen

text-wrap aus

Gut für Überschriften über mehrere Zeilen, in denen ein einsames Wort in einer Zeile keinen guten Eindruck macht.

text-wrap ist mit CSS Text Module Level 4 May 2024 gelandet und bringt auch Updates bei den font-variant-Eigenschaften, die feinere Steuerungsmöglichkeiten für Ligaturen, Zahlenformate und andere typografische Details bieten.

initial-letter – Drop Cap oder Initiale

Es gibt zwar das Pseudo-Element ::first-letter, mit dem Drop-Caps gestylt werden können, aber die Positionierung der Initiale mit float ist alles andere als intuitiv. Stattdessen wird es in Zukunft die Eigenschaft initial-letter geben. Chrome ist bereits dabei, Safari auch (allerdings mit -webkit-Präfix), nur Firefox fehlt noch.

`@scope`

Lokale CSS-Regeln ohne BEM (Block, Element, Modifier) oder IDs, die nur innerhalb eines Bereichs gelten.

@scope (.card) {
  h2 {
    color: blue;
  }
}

CSS Nesting

Nesting – das Verschachteln von CSS-Regeln – ist noch einmal ein großes Ding und bringt das native CSS näher an CSS-Preprozessoren.