Neues zu Preisvergleichsportalen und der Web-UI: Zusammenfassung der I/O 2024

Una Kravets

Die Webplattform ist voller Innovationen, wobei CSS- und Web-UI-Funktionen an der Spitze dieser spannenden Entwicklung stehen. Wir befinden uns in einer Blütezeit für die Web-UI. Neue CSS-Funktionen werden in Browsern in einem bisher nie dagewesenen Tempo eingeführt. Das eröffnet eine Vielzahl von Möglichkeiten, ansprechende und ansprechende Web-Anwendungen zu erstellen. In diesem Blogpost gehen wir ausführlich auf den aktuellen Stand von CSS ein und stellen einige der wichtigsten neuen Funktionen vor, die die Art und Weise, wie wir Webanwendungen erstellen, neu definieren. Diese Funktionen wurden live auf der Google I/O 2024 vorgestellt.

Innovative interaktive Erlebnisse

Die Nutzung des Internets ist im Grunde ein Aufruf und eine Antwort zwischen Ihnen und Ihren Nutzern. Deshalb ist es so wichtig, in hochwertige Nutzerinteraktionen zu investieren. Wir haben an einigen wirklich großen Verbesserungen gearbeitet, die bisher nicht im Web verfügbar waren. Sie ermöglichen es, auf Webseiten und zwischen ihnen zu navigieren.

Scroll-Animationen

Unterstützte Browser

• 115
• 115
• 
• x

Quelle

Wie der Name schon sagt, können Sie mit der Scroll-driven Animations API dynamische scrollbasierte Animationen erstellen, ohne Scroll-Beobachter oder andere umfangreiche Scripts verwenden zu müssen.

Scroll-basierte Animationen erstellen

Ähnlich wie bei zeitbasierten Animationen auf der Plattform können Sie jetzt den Scrollvorgang eines Scrollers verwenden, um eine Animation zu starten, anzuhalten und rückwärts abzuspielen. Wenn Sie also vorwärts scrollen, sehen Sie, wie die Animation fortschreitet. Wenn Sie rückwärts scrollen, läuft sie rückwärts ab. So können Sie visuelle Elemente auf einer Teil- oder Vollseite erstellen, die in den Darstellungsbereich ein- und darin animiert werden. Dieser Effekt wird auch als Scrollytelling bezeichnet und sorgt für eine dynamische visuelle Wirkung.

Mit scrollbasierten Animationen können Sie wichtige Inhalte hervorheben, Nutzer durch eine Story führen oder Ihren Webseiten einfach einen dynamischen Touch verleihen.

Scroll-driven animation visual

Livedemo

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Der vorherige Code definiert eine einfache Animation, die im Viewport angezeigt wird, indem die Deckkraft und der Maßstab eines Bildes geändert werden. Die Animation wird durch die Scrollposition gesteuert. Um diesen Effekt zu erzielen, richten Sie zuerst die CSS-Animation ein und legen Sie dann die animation-timeline fest. In diesem Fall verfolgt die Funktion view() mit ihren Standardwerten das Bild relativ zum Scrollport, der in diesem Fall auch der Viewport ist.

Es ist wichtig, die Browserunterstützung und die Nutzereinstellungen zu berücksichtigen, insbesondere im Hinblick auf die Barrierefreiheit. Verwenden Sie daher die Regel @supports, um zu prüfen, ob der Browser scrollbasierte Animationen unterstützt, und fügen Sie Ihre scrollbasierte Animation in eine Abfrage der Nutzereinstellungen wie @media (prefers-reduced-motion: no-preference) ein, um die Bewegungseinstellungen der Nutzer zu respektieren. Nachdem Sie diese Prüfungen durchgeführt haben, wissen Sie, dass Ihre Stile funktionieren und die Animation für die Nutzer nicht problematisch ist.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Scroll-basierte Animationen können sich auf eine ganze Seite beziehen, aber auch auf subtilere Animationen wie eine Kopfzeile, die minimiert wird und einen Schatten wirft, wenn Sie in einer Webanwendung scrollen.

Scroll-animiertes visuelles Element

Livedemo

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

In dieser Demo werden einige verschiedene Keyframe-Animationen verwendet – für die Kopfzeile, den Text, die Navigationsleiste und den Hintergrund – und dann wird die jeweilige scrollbasierte Animation auf alle angewendet. Sie haben zwar jeweils einen anderen Animationsstil, aber alle haben dieselbe Animationsabfolge, den nächstgelegenen Scroller und denselben Animationsbereich – von oben auf der Seite bis zu 150 Pixel.

Leistungsvorteile von scrollbasierten Animationen

Diese integrierte API reduziert den Code, den Sie verwalten müssen, unabhängig davon, ob es sich um ein benutzerdefiniertes Script oder die Einbeziehung einer zusätzlichen Drittanbieterabhängigkeit handelt. Außerdem müssen keine verschiedenen Scroll-Beobachter mehr gesendet werden, was zu erheblichen Leistungsvorteilen führt. Das liegt daran, dass scrollbasierte Animationen den Hauptthread verwenden, wenn Eigenschaften animiert werden, die im Renderer animiert werden können, z. B. Transformationen und Deckkraft. Dabei spielt es keine Rolle, ob Sie die neue API direkt in CSS oder die JavaScript-Hooks verwenden.

Tokopedia hat vor Kurzem scrollbasierte Animationen verwendet, damit die Produktnavigationsleiste beim Scrollen angezeigt wird. Die Verwendung dieser API hat einige erhebliche Vorteile, sowohl für die Codeverwaltung als auch für die Leistung.

Bei Tokopedia werden beim Scrollen nach unten scrollabhängige Animationen in der Produktnavigationsleiste verwendet.

„Wir konnten die Anzahl der Codezeilen im Vergleich zur Verwendung herkömmlicher JS-Scrollereignisse um bis zu 80% reduzieren. Außerdem haben wir festgestellt, dass sich die durchschnittliche CPU-Auslastung beim Scrollen von 50% auf 2% verringert hat. – Andy Wihalim, Senior Software Engineer, Tokopedia“

Die Zukunft von Scroll-Effekten

Wir sind uns sicher, dass diese Effekte das Web noch ansprechender machen werden. Wir überlegen uns schon jetzt, was als Nächstes kommt. Dazu gehört die Möglichkeit, nicht nur neue Zeitleisten für Animationen zu verwenden, sondern auch einen Scrollpunkt, um den Start einer Animation auszulösen. Diese werden als scroll-triggered animations bezeichnet.

In Zukunft werden noch weitere Scrollfunktionen für Browser eingeführt. Die folgende Demo zeigt eine Kombination dieser zukünftigen Funktionen. Dabei wird CSS scroll-start-target verwendet, um das Startdatum und die Startzeit in den Auswahlen festzulegen, und das JavaScript-Ereignis scrollsnapchange, um das Datum in der Kopfzeile zu aktualisieren. So lassen sich die Daten ganz einfach mit dem angeklickten Ereignis synchronisieren.

Live-Demo in Codepen ansehen

Sie können dies auch nutzen, um eine Auswahl in Echtzeit mit dem JavaScript-Ereignis scrollsnapchanging zu aktualisieren.

Diese Funktionen sind derzeit nur in Canary verfügbar und müssen erst aktiviert werden. Sie ermöglichen jedoch Funktionen, die bisher auf der Plattform nicht oder nur sehr schwer implementiert werden konnten. Außerdem zeigen sie die Zukunft scrollbarer Interaktionen.

Weitere Informationen zum Einstieg in scrollbasierte Animationen finden Sie in der neuen Videoreihe unseres Teams auf dem YouTube-Kanal „Chrome for Developers“. Hier lernen Sie die Grundlagen von scrollbasierten Animationen von Bramus Van Damme kennen, einschließlich der Funktionsweise der Funktion, der Terminologie, verschiedener Möglichkeiten zum Erstellen von Effekten und zum Kombinieren von Effekten für eine ansprechende Benutzeroberfläche. Es ist eine tolle Videoreihe.

Übergänge ansehen

Wir haben gerade eine leistungsstarke neue Funktion zur Animation von Webseiten vorgestellt. Es gibt aber auch eine leistungsstarke neue Funktion namens Ansichtsübergänge, mit der sich Übergänge zwischen Seitenaufrufen animieren lassen, um eine nahtlose Nutzererfahrung zu schaffen. Mit Ansichtsübergängen können Sie die Nutzerfreundlichkeit von Websites weiter verbessern. So lassen sich nahtlose Übergänge zwischen verschiedenen Ansichten auf einer einzelnen Seite oder sogar zwischen verschiedenen Seiten erstellen.

Unterstützte Browser

• 111
• 111
• x
• 18

Quelle

Airbnb ist eines der Unternehmen, das bereits damit experimentiert, Ansichtsübergänge in die Benutzeroberfläche zu integrieren, um die Navigation im Web reibungslos und nahtlos zu gestalten. Dazu gehören die Seitenleiste des Eintragseditors, die Bearbeitung von Fotos und das Hinzufügen von Ausstattungsmerkmalen – alles in einem flüssigen Nutzerfluss.

Übergang zwischen Ansichten desselben Dokuments wie bei Airbnb.

Das Portfolio von Maxwell Barvian mit Ansichtsübergängen zwischen den Ansichten.

Diese Full-Page-Effekte sind zwar schön und nahtlos, Sie können aber auch Mikrointeraktionen erstellen, wie in diesem Beispiel, in dem die Listenansicht bei einer Nutzerinteraktion aktualisiert wird. Dieser Effekt lässt sich ganz einfach mit Ansichtsübergängen erzielen.

Wenn Sie in Ihrer Single-Page-Anwendung schnell Ansichtsübergänge aktivieren möchten, müssen Sie lediglich eine Interaktion mit document.startViewTransition umschließen und dafür sorgen, dass jedes Element, das sich ändert, ein view-transition-name hat, und zwar inline oder dynamisch mit JavaScript, wenn Sie DOM-Knoten erstellen.

Demobild

Livedemo

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Übergangsklassen ansehen

Mithilfe von Namen für Ansichtsübergänge können Sie benutzerdefinierte Animationen auf die Ansichtsübergänge anwenden. Bei vielen Elementübergängen kann das jedoch mühsam werden. Das erste neue Update für Ansichtsübergänge in diesem Jahr vereinfacht dieses Problem und ermöglicht das Erstellen von Ansichtsübergangsklassen, die auf benutzerdefinierte Animationen angewendet werden können.

Unterstützte Browser

• 125
• 125
• x
• 18.2

Übergangstypen ansehen

Eine weitere große Verbesserung bei Ansichtsübergängen ist die Unterstützung von Übergangstypen. Ansichtsübergangstypen sind nützlich, wenn Sie beim Animieren von Seitenaufrufen zu und von einer Seite eine andere Art von visuellem Ansichtsübergang wünschen.

Unterstützte Browser

• 125
• 125
• x
• 18

So können Sie beispielsweise festlegen, dass die Startseite auf eine andere Weise zu einer Blogseite animiert wird als umgekehrt. Oder Sie möchten, dass Seiten auf unterschiedliche Weise ein- und ausgeblendet werden, z. B. von links nach rechts und umgekehrt, wie in diesem Beispiel. Früher war das etwas umständlich. Sie konnten dem DOM Klassen hinzufügen, um Stile anzuwenden, und mussten die Klassen dann wieder entfernen. Mithilfe von Ansichtsübergangstypen kann der Browser alte Übergänge bereinigen, anstatt dass Sie dies manuell tun müssen, bevor Sie neue starten.

Aufzeichnung der Demo zur Paginierung. Anhand der Typen wird festgelegt, welche Animation verwendet werden soll. Die Stile werden im Stylesheet dank aktiver Übergangstypen voneinander getrennt.

Sie können Typen in Ihrer document.startViewTransition-Funktion einrichten, die jetzt ein Objekt akzeptiert. update ist die Callback-Funktion, die das DOM aktualisiert, und types ist ein Array mit den Typen.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Übergänge zwischen Seitenansichten

Das Web ist so leistungsstark, weil es so umfangreich ist. Viele Anwendungen bestehen nicht nur aus einer Seite, sondern aus einem robusten Web aus mehreren Seiten. Deshalb freuen wir uns, Ihnen mitteilen zu können, dass wir in Chromium 126 die Unterstützung für dokumentübergreifende Ansichtsübergänge für mehrseitige Anwendungen eingeführt haben.

Unterstützte Browser

• 126
• 126
• x
• 

Diese neue funktionsübergreifende Dokumentensammlung umfasst Web-Anwendungen, die sich im selben Ursprung befinden, z. B. die Navigation von web.dev zu web.dev/blog. Dies schließt jedoch keine plattformübergreifende Navigation ein, z. B. die Navigation von web.dev zu blog.web.dev oder zu einer anderen Domain wie google.com.

Einer der Hauptunterschiede zu Übergängen zwischen Ansichten desselben Dokuments besteht darin, dass Sie den Übergang nicht mit document.startViewTransition() umschließen müssen. Aktivieren Sie stattdessen beide Seiten, die an der Ansichtsübertragung beteiligt sind, mithilfe des CSS-At-Rules @view-transition.

@view-transition {
  navigation: auto;
}

Für einen individuelleren Effekt kannst du JavaScript mit den neuen pageswap- oder pagereveal-Ereignis-Listenern verknüpfen. So erhältst du Zugriff auf das Objekt „Blickwechsel“.

Mit pageswap können Sie kurz vor dem Erstellen der alten Snapshots noch Änderungen an der ausgehenden Seite vornehmen. Mit pagereveal können Sie die neue Seite anpassen, bevor sie nach der Initialisierung gerendert wird.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

Darstellung von Ansichtsübergängen in einer mehrseitigen App. Demolink

Wir planen, die Ansichtsübergänge in Zukunft zu erweitern. Dazu gehören:

• Begrenzte Übergänge: Sie können einen Übergang auf einen DOM-Unterbaum beschränken, sodass der Rest der Seite weiterhin interaktiv bleibt. Außerdem werden mehrere Ansichtsübergänge unterstützt, die gleichzeitig ausgeführt werden.
• Bewegungsgesteuerte Ansichtsübergänge: Mit Zieh- oder Wischbewegungen können Sie einen dokumentübergreifenden Ansichtsübergang auslösen, um eine nativere Webnutzung zu ermöglichen.
• Navigationsabgleich in CSS: Sie können den dokumentübergreifenden Ansichtsübergang direkt in Ihrem CSS anpassen, anstatt die Ereignisse pageswap und pagereveal in JavaScript zu verwenden. Weitere Informationen zu Ansichtsübergängen für mehrseitige Anwendungen, einschließlich der leistungsstärksten Einrichtung mit Pre-Rendering, finden Sie in der folgenden Präsentation von Bramus Van Damme:

Engine-fähige UI-Komponenten: Komplexe Interaktionen vereinfachen

Das Erstellen komplexer Webanwendungen ist keine leichte Aufgabe, aber CSS und HTML entwickeln sich weiter, um diesen Prozess viel einfacher zu gestalten. Neue Funktionen und Verbesserungen vereinfachen die Erstellung von UI-Komponenten, sodass Sie sich auf die Entwicklung einer hervorragenden User Experience konzentrieren können. Dies geschieht in Zusammenarbeit mit mehreren wichtigen Standardsorganisationen und Communitygruppen, darunter die CSS Working Group, die Open UI Community Group und die WHATWG (Web Hypertext Application Technology Working Group).

Eine große Herausforderung für Entwickler ist eine scheinbar einfache Anforderung: die Möglichkeit, Drop-down-Menüs (das Auswahlelement) zu formatieren. Das Problem ist zwar auf den ersten Blick einfach, aber es ist komplex, da es viele Teile der Plattform betrifft: Layout und Rendering, Scrollen und Interaktion, User-Agent-Styling und CSS-Eigenschaften sowie sogar Änderungen an HTML selbst.

Elemente einer Auswahl zerlegen

Ein Drop-down-Menü besteht aus vielen Elementen und umfasst viele Status, die berücksichtigt werden müssen, z. B.:

• Tastaturbelegungen (zum Starten und Beenden der Interaktion)
• Zum Schließen klicken
• Aktive Pop-up-Verwaltung (andere Pop-ups schließen, wenn eines geöffnet wird)
• Tab-Fokusverwaltung
• Ausgewählten Optionswert visualisieren
• Interaktionsstil „Pfeil“
• Statusverwaltung (Öffnen/Schließen)

Es ist derzeit schwierig, all diesen Status selbst zu verwalten, aber auch die Plattform macht es nicht einfach. Um das zu beheben, haben wir diese Funktionen in mehrere Teile aufgesplittet und einige primitive Funktionen eingeführt, mit denen sich Drop-down-Menüs stylen lassen, aber auch noch viel mehr.

Popover API

Zuerst haben wir ein globales Attribut namens popover eingeführt. Dieses Attribut ist vor wenigen Wochen in den Status „Neu verfügbar“ übergegangen.

Unterstützte Browser

• 114
• 114
• 125
• 17

Quelle

Pop-up-Elemente sind mit display: none ausgeblendet, bis sie über einen Auslöser wie eine Schaltfläche oder mit JavaScript geöffnet werden. Wenn Sie ein einfaches Pop-over erstellen möchten, legen Sie das Pop-over-Attribut für das Element fest und verknüpfen Sie seine ID mit einer Schaltfläche über popovertarget. Die Schaltfläche ist jetzt der Auslöser.

Demobild

Livedemo

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Da das Popover-Attribut jetzt aktiviert ist, verarbeitet der Browser viele wichtige Verhaltensweisen ohne zusätzliches Scripting, darunter:

• Beförderung in die oberste Schicht: Eine separate Ebene über dem Rest der Seite, damit du nicht mit z-index herumspielen musst.
• Funktion zum Ausschalten des Lichts: Wenn Sie außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und der Fokus zurückgesetzt.
• Standardmäßige Tab-Fokusverwaltung: Wenn Sie das Pop-up öffnen, wird der nächste Markierungsstopp im Pop-up angezeigt.
• Integrierte Tastaturbelegungen: Wenn Sie die Taste esc drücken oder das Pop-up zweimal antippen, wird es geschlossen und der Fokus wechselt zurück.
• Standardbindungen für Komponenten : Der Browser verbindet ein Pop-up semantisch mit seinem Trigger.

Wichtig :Das Popovermenü-Attribut hat keine semantische Bedeutung. Sie müssen also weiterhin die richtige HTML- oder ARIA-Syntax verwenden, um dem Popover-Element einen Kontext zu geben. Außerdem macht das Pop-over den Rest der Seite nicht inaktiv, um sie nicht interaktiv zu machen, oder fängt den Fokus nicht ab. Wenn Sie diese Funktion benötigen, ist ein <dialog>-Element wahrscheinlich besser geeignet.

Menü auf der GitHub-Startseite

Möglicherweise verwenden Sie diese Popover API bereits, ohne es zu wissen. GitHub hat ein Pop-up-Fenster im Menü „Neu“ auf der Startseite und in der Übersicht der Pull-Anfrageprüfung implementiert. Diese Funktion wurde mit der Popover-Polyfill von Oddbird, die mit Unterstützung von Keith Cirkel von GitHub entwickelt wurde, kontinuierlich verbessert, um ältere Browser zu unterstützen.

„Durch die Migration zu Pop-ups konnten wir buchstäblich Tausende von Codezeilen entfernen. Pop-ups helfen uns, weil wir nicht mehr mit magischen Z-Index-Zahlen kämpfen müssen. Die richtige Beziehung zwischen dem Baum für die Barrierefreiheit, dem deklarativen Verhalten der Schaltflächen und den integrierten Fokusverhalten macht es für unser Designsystem wesentlich einfacher, Muster richtig zu implementieren.–Keith Cirkel, Software Engineer, GitHub“

Ein- und Ausblendeffekte animieren

Wenn Sie Pop-ups verwenden, sollten Sie ihnen Interaktionen hinzufügen. Im letzten Jahr wurden vier neue Interaktionsfunktionen eingeführt, die die Animation von Pop-ups unterstützen. Dazu gehören:

Möglichkeit, display und content-visibility auf einer Keyframe-Zeitachse zu animieren

Die Property transition-behavior mit dem Keyword allow-discrete, um Übergänge zwischen diskreten Properties wie display zu ermöglichen.

Unterstützte Browser

• 117
• 117
• 129
• 17.4

Quelle

Die @starting-style-Regel zum Animieren von Eintrittseffekten von display: none in die oberste Ebene.

Unterstützte Browser

• 117
• 117
• 129
• 17.5

Quelle

Mit der Overlay-Eigenschaft wird das Verhalten der obersten Ebene während einer Animation gesteuert.

Unterstützte Browser

• 117
• 117
• x
• x

Quelle

Diese Eigenschaften funktionieren für jedes Element, das Sie in die oberste Ebene animieren, z. B. ein Pop-up oder ein Dialogfeld. Zusammengenommen sieht ein Dialogfeld mit Hintergrund so aus:

Demobild

Livedemo

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Richten Sie zuerst die @starting-style ein, damit der Browser weiß, mit welchen Stilen dieses Element im DOM animiert werden soll. Das gilt sowohl für den Dialog als auch für den Hintergrund. Legen Sie dann den Stil für den geöffneten Zustand sowohl für den Dialog als auch für den Hintergrund fest. Für ein Dialogfeld wird das Attribut open und für ein Pop-up das Pseudoelement ::popover-open verwendet. Animieren Sie abschließend opacity, display und overlay mit dem Keyword allow-discrete, um den Animationsmodus zu aktivieren, in dem diskrete Eigenschaften übergehen können.

Ankerpositionierung

Das Pop-up war erst der Anfang. In Chrome 125 ist jetzt die Positionierung von Ankern verfügbar.

Unterstützte Browser

• 125
• 125
• x
• x

Quelle

Mit der Ankerpositionierung kann der Browser mit nur wenigen Codezeilen die Logik verarbeiten, um ein positioniertes Element an ein oder mehrere Ankerelemente zu binden. Im folgenden Beispiel ist an jede Schaltfläche eine einfache Kurzinfo angedockt, die sich unten in der Mitte befindet.

Demobild

Livedemo

Richten Sie eine ankernde Positionierung in CSS ein, indem Sie die Eigenschaft anchor-name für das ankernde Element (in diesem Fall die Schaltfläche) und die Eigenschaft position-anchor für das positionierte Element (in diesem Fall die Kurzinfo) verwenden. Wenden Sie dann mit der Funktion anchor() eine absolute oder feste Positionierung relativ zum Anker an. Mit dem folgenden Code wird die Oberkante der Kurzinfo am unteren Rand der Schaltfläche platziert.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Alternativ können Sie den Ankernamen direkt in der Ankerfunktion verwenden und die position-anchor-Eigenschaft überspringen. Das kann nützlich sein, wenn Sie an mehreren Elementen verankern möchten.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Verwenden Sie abschließend das neue Keyword anchor-center für die Properties justify und align, um das positionierte Element auf dem Anker zu zentrieren.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Die Ankerpositionierung mit Pop-up ist zwar sehr praktisch, aber ein Pop-up ist für die Verwendung der Ankerpositionierung nicht erforderlich. Die Anlegeposition kann mit zwei oder mehr Elementen verwendet werden, um eine visuelle Beziehung herzustellen. In der folgenden Demo, die von einem Artikel von Roman Komarov inspiriert wurde, wird ein Unterstreichungsstil gezeigt, der an Listenelemente angedockt ist, wenn Sie den Mauszeiger darauf bewegen oder den Tabulatortaste verwenden.

Demobild

Livedemo

In diesem Beispiel wird die Ankerposition mithilfe der physischen Eigenschaften von left, right und bottom mit der Ankerfunktion eingerichtet. Wenn Sie den Mauszeiger auf einen der Links bewegen, ändert sich der Zielanker und der Browser verschiebt das Ziel, um die Positionierung anzuwenden. Gleichzeitig wird die Farbe animiert, um einen schönen Effekt zu erzielen.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area Positionierung

Zusätzlich zur Standard-absoluten Ausrichtung, die Sie wahrscheinlich schon einmal verwendet haben, gibt es einen neuen Layoutmechanismus, der als Teil der API für die Ankerpositionierung hinzugefügt wurde und als „Einzugsbereich“ bezeichnet wird. Mit dem Einfügebereich können Sie positionierte Elemente ganz einfach relativ zu ihren jeweiligen Ankern platzieren. Er basiert auf einem 9-Zellen-Raster mit dem Ankerelement in der Mitte. Mit inset-area: top wird das positionierte Element beispielsweise oben und mit inset-area: bottom unten platziert.

Eine vereinfachte Version der ersten Demo für Anker sieht mit inset-area so aus:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Sie können diese Positionswerte mit Schlüsselwörtern für die Spannweite kombinieren, um sie in der Mitte zu beginnen und entweder nach links, nach rechts oder über alle Spalten oder Zeilen zu spannen. Sie können auch logische Properties verwenden. In Chrome 125 und höher können Sie dieses Tool verwenden, um sich den Layoutmechanismus besser vorstellen zu können:

Da diese Elemente verankert sind, bewegt sich das positionierte Element dynamisch auf der Seite, wenn sich sein Anker bewegt. In diesem Fall haben wir Kartenelemente im Stil von Containerabfragen, deren Größe sich anhand ihrer ursprünglichen Größe ändert (was mit Mediaabfragen nicht möglich ist). Das angedockte Menü verschiebt sich mit dem neuen Layout, wenn sich die Karten-UI ändert.

Demobild

Livedemo

Dynamische Ankerpositionen mit position-try-options

Menüs und Untermenüs lassen sich mit einer Kombination aus Pop-over- und Ankerpositionierung viel einfacher erstellen. Wenn das angedockte Element den Rand des Darstellungsbereichs erreicht, kann der Browser die Positionierung auch für Sie übernehmen. Dazu gibt es mehrere Möglichkeiten. Der erste Schritt besteht darin, eigene Platzierungsregeln zu erstellen. In diesem Fall wird das Untermenü zuerst rechts neben der Schaltfläche „Shop“ angezeigt. Wenn rechts neben dem Menü nicht genügend Platz vorhanden ist, können Sie einen @position-try-Block erstellen und ihm die benutzerdefinierte ID --bottom zuweisen. Verbinden Sie diesen @position-try-Block dann mit dem Anker über position-try-options.

Jetzt wechselt der Browser zwischen diesen angedockten Status, wobei zuerst die rechte Position versucht und dann nach unten gewechselt wird. Und das kann mit einem schönen Übergang erfolgen.

Demobild

Livedemo

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Neben der expliziten Positionierungslogik gibt es einige Keywords, die der Browser für grundlegende Interaktionen bereitstellt, z. B. zum Umkehren des Ankers in Block- oder Inline-Richtung.

position-try-options: flip-block, flip-inline;

Wenn Sie das Umblättern vereinfachen möchten, können Sie diese Flip-Keyword-Werte verwenden und ganz auf die Definition einer position-try verzichten. So können Sie jetzt mit nur wenigen Zeilen CSS ein voll funktionsfähiges, standortabhängiges Ankerelement positionieren.

Demobild

Livedemo

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Weitere Informationen zur Ankerpositionierung

Die Zukunft der mehrschichtigen Benutzeroberfläche

Wir sehen überall Tethering-Erlebnisse und die in diesem Beitrag gezeigten Funktionen sind ein hervorragender Ausgangspunkt, um Ihrer Kreativität freien Lauf zu lassen und die Kontrolle über verankerte Elemente und mehrschichtige Benutzeroberflächen zu verbessern. Aber das ist erst der Anfang. Derzeit funktioniert popover beispielsweise nur mit Schaltflächen als auslösendes Element oder mit JavaScript. Bei Vorschauen im Wikipedia-Stil, einem Muster, das auf der gesamten Webplattform zu sehen ist, muss es möglich sein, mit ihnen zu interagieren und ein Popover über einen Link und über das Interesse des Nutzers auszulösen, ohne dass er unbedingt darauf klicken muss, z. B. durch Bewegen des Mauszeigers oder Fokussieren des Tabs.

Als nächsten Schritt für die Popover API arbeiten wir an interesttarget, um diese Anforderungen zu erfüllen und die Erstellung dieser Funktionen mit den entsprechenden integrierten Optionen für Barrierefreiheit zu vereinfachen. Dies ist ein anspruchsvolles Problem in Bezug auf Barrierefreiheit, bei dem viele Fragen zum idealen Verhalten offen sind. Wenn diese Funktion jedoch auf Plattformebene gelöst und normalisiert wird, sollte sich die Nutzerfreundlichkeit für alle verbessern.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Außerdem steht dank der Arbeit von zwei Drittanbietern, Keith Cirkel und Luke Warlow, ein weiterer zukunftsorientierter allgemeiner Aufrufer (invoketarget) zum Testen in Canary zur Verfügung. invoketarget unterstützt die deklarative Entwicklererfahrung, die popovertarget mit Pop-ups bietet, die für alle interaktiven Elemente normalisiert sind, einschließlich <dialog>, <details>, <video> und <input type="file">.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Uns ist bewusst, dass es Anwendungsfälle gibt, die von dieser API noch nicht abgedeckt werden. Sie können beispielsweise den Pfeil stylen, der ein verankertes Element mit seinem Anker verbindet, insbesondere wenn sich die Position des verankerten Elements ändert. Außerdem können Sie ein Element so einstellen, dass es „gleiten“ und im Darstellungsbereich bleiben kann, anstatt an eine andere Position zu snappen, wenn es seinen Begrenzungsrahmen erreicht. Wir freuen uns, diese leistungsstarke API anbieten zu können, und werden ihre Funktionen in Zukunft weiter ausbauen.

Stilisierbare Auswahl

Mit popover und anchor konnte das Team Fortschritte bei der Implementierung eines anpassbaren Drop-down-Menüs erzielen. Die gute Nachricht ist, dass es große Fortschritte gegeben hat. Die schlechte Nachricht ist, dass diese API derzeit noch in der experimentellen Phase ist. Ich freue mich aber, einige Live-Demos und Updates zu unseren Fortschritten zu teilen und hoffentlich auch Feedback von Ihnen zu erhalten. Erstens: Es gibt Fortschritte bei der Aktivierung der neuen, anpassbaren Auswahlfunktion für Nutzer. Derzeit ist es nur möglich, eine CSS-Eigenschaft für die Darstellung zu verwenden, die auf appearance: base-select festgelegt ist. Nachdem Sie das Erscheinungsbild festgelegt haben, aktivieren Sie eine neue, anpassbare Auswahl.

select {
  appearance: base-select;
}

Hinweis :Diese API befindet sich derzeit in der Entwicklungsphase und die Syntax wird sich wahrscheinlich ändern.

Neben appearance: base-select gibt es einige neue HTML-Updates. Dazu gehört die Möglichkeit, Ihre Optionen in datalist einzufügen, um sie anzupassen, und beliebige nicht interaktive Inhalte wie Bilder in Ihre Optionen aufzunehmen. Außerdem haben Sie Zugriff auf ein neues Element, <selectedoption>, das den Inhalt der Optionen widerspiegelt und das Sie dann nach Ihren eigenen Bedürfnissen anpassen können. Dieses Element ist wirklich praktisch.

Demobild

Livedemo

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Der folgende Code veranschaulicht die Anpassung von <selectedoption> in der Gmail-Benutzeroberfläche. Dabei steht ein visuelles Symbol für die ausgewählte Antwort, um Platz zu sparen. Sie können in selectedoption einfache Darstellungsstile verwenden, um den Stil der Option vom Stil der Vorschau zu unterscheiden. In diesem Fall kann Text, der in der Option angezeigt wird, in selectedoption visuell ausgeblendet werden.

Demobild

Livedemo

selectedoption .text {
  display: none;
}

Einer der größten Vorteile der Wiederverwendung des <select>-Elements für diese API ist die Abwärtskompatibilität. In dieser Länderauswahl wird eine benutzerdefinierte Benutzeroberfläche mit Flaggenbildern in den Optionen angezeigt, damit Nutzer die Inhalte leichter analysieren können. Da nicht unterstützte Browser die nicht erkannten Zeilen ignorieren, z. B. die benutzerdefinierte Schaltfläche, die Datenliste, die ausgewählte Option und die Bilder in den Optionen, ähnelt die Fallback-Benutzeroberfläche der aktuellen Standardoberfläche für die Auswahl.

Darstellung eines unterstützten Browsers links und eines nicht unterstützten Browsers rechts

Mit anpassbaren Auswahlen sind die Möglichkeiten endlos. Ich mag diese Länderauswahl im Airbnb-Stil besonders, weil sie einen cleveren Stil für responsives Design hat. Das und noch viel mehr ist mit dem anstehenden stilisierbaren Auswahlelement möglich, das eine dringend benötigte Ergänzung der Webplattform darstellt.

Demobild

Livedemo

Exklusives Akkordeon

Das Design und alle damit verbundenen Elemente zu optimieren, ist nicht die einzige Benutzeroberflächenkomponente, auf die sich das Chrome-Team konzentriert hat. Die erste zusätzliche Komponente ist die Möglichkeit, exklusive Akkordeons zu erstellen, bei denen jeweils nur eines der Elemente im Akkordeon geöffnet werden kann.

Unterstützte Browser

• 120
• 120
• 130
• 17.2

Dazu müssen Sie denselben Namenswert auf mehrere Detailselemente anwenden, um eine verbundene Gruppe von Details zu erstellen, ähnlich wie eine Gruppe von Optionsfeldern.

Exklusive Akkordeon-Demo

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid und :user-invalid

Eine weitere Verbesserung der UI-Komponenten sind die Pseudoklassen :user-valid und :user-invalid. Die Pseudoklassen :user-valid und :user-invalid sind in letzter Zeit in allen Browsern stabil. Sie verhalten sich ähnlich wie die Pseudoklassen :valid und :invalid, werden aber erst dann mit einem Formularkontrollelement abgeglichen, wenn ein Nutzer signifikant mit der Eingabe interagiert hat. Das bedeutet, dass deutlich weniger Code erforderlich ist, um zu ermitteln, ob mit einem Formularwert interagiert wurde oder er ungültig geworden ist. Das kann sehr nützlich sein, um Nutzerfeedback zu erhalten, und reduziert viel Scripting, das früher dafür erforderlich war.

Unterstützte Browser

• 119
• 119
• 88
• 16.5

Quelle

Demo-Screencast

Live-Demo

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Weitere Informationen zur Verwendung von Pseudoelementen für die Formularvalidierung vom Typ „user-*“

field-sizing: content

Eine weitere praktische Komponentenaktualisierung, die vor Kurzem veröffentlicht wurde, ist field-sizing: content. Diese kann auf Formularsteuerelemente wie Eingabefelder und Textfelder angewendet werden. So kann die Größe der Eingabe je nach Inhalt wachsen oder schrumpfen. field-sizing: content kann besonders praktisch für Textfelder sein, da Sie nicht mehr auf feste Größen beschränkt sind, bei denen Sie in einem zu kleinen Eingabefeld möglicherweise nach oben scrollen müssen, um zu sehen, was Sie in den früheren Teilen des Prompts geschrieben haben.

Unterstützte Browser

• 123
• 123
• x
• x

Quelle

Demo-Screencast

Live-Demo

textarea, select, input {
  field-sizing: content;
}

Weitere Informationen zur Feldgröße

<hr> in <select>

Die Möglichkeit, das Element <hr> (horizontale Linie) in Auswahlelementen zu aktivieren, ist eine weitere kleine, aber nützliche Komponentenfunktion. Dies hat zwar keine große semantische Bedeutung, hilft aber dabei, Inhalte in einer Auswahlliste gut zu trennen, insbesondere Inhalte, die nicht unbedingt mit einer Optionsgruppe gruppiert werden sollen, z. B. ein Platzhalterwert.

Screenshot auswählen

„Live-Demo“ auswählen

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Weitere Informationen zur Verwendung von hr in Auswahl

Verbesserungen der Nutzerfreundlichkeit

Wir arbeiten ständig an Verbesserungen, und das nicht nur bei Interaktionen und Komponenten. Im letzten Jahr haben wir außerdem viele weitere Verbesserungen eingeführt.

Verschachtelung mit Lookahead

Das native CSS-Verschachteln wurde letztes Jahr in allen Browsern eingeführt und wurde seitdem verbessert, um Vorschauen zu unterstützen. Das bedeutet, dass das & vor Elementnamen nicht mehr erforderlich ist. Das macht das Nesting viel ergonomischer und ähnlicher wie ich es in der Vergangenheit gewohnt war.

Unterstützte Browser

• 120
• 120
• 117
• 17.2

Quelle

Eine meiner Lieblingsfunktionen von CSS-Verschachtelungen ist, dass Sie damit Komponenten visuell blockieren und in diesen Komponenten Status und Modifikatoren wie Containerabfragen und Medienabfragen einfügen können. Bisher habe ich alle diese Abfragen aus Gründen der Übersichtlichkeit unten in der Datei gruppiert. Jetzt können Sie sie sinnvoll direkt neben dem Rest Ihres Codes schreiben.

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Inhalte für Blocklayout ausrichten

Eine weitere wirklich schöne Änderung ist die Möglichkeit, im Blocklayout Zentrierungsmechanismen wie align-content zu verwenden. Das bedeutet, dass Sie jetzt z. B. Elemente vertikal innerhalb eines Div-Elements zentrieren können, ohne dass Sie das Flex- oder Grid-Layout anwenden müssen. Außerdem treten keine Nebenwirkungen wie das Verhindern des Zusammenziehens von Rändern auf, die Sie bei diesen Layoutalgorithmen möglicherweise nicht wünschen.

Unterstützte Browser

• 123
• 123
• 125
• 17.4

Screenshot

Live-Demo

div {
  align-content: center;
}

Textumbruch: Ausgeglichen und schön

Apropos Layout: Das Textlayout wurde durch die Ergänzung von text-wrap: balance und pretty deutlich verbessert. text-wrap: balance wird für einen einheitlicheren Textblock verwendet, während text-wrap: pretty darauf abzielt, einzelne Wörter in der letzten Zeile des Textes zu reduzieren.

Demo-Screencast

Live-Demo

In der folgenden Demo können Sie die Auswirkungen von balance und pretty auf eine Überschrift und einen Absatz vergleichen, indem Sie den Schieberegler ziehen. Probieren Sie, die Demo in eine andere Sprache zu übersetzen.

h1 {
  text-wrap: balance;
}

Weitere Informationen zu „text-wrap: balance“

Updates bei der internationalen Typografie

Das typografische Layout für CJK-Textfunktionen wurde im letzten Jahr um viele praktische Funktionen erweitert, z. B. die Funktion word-break: auto-phrase, mit der die Zeile an der natürlichen Wortgrenze umgebrochen wird.

Unterstützte Browser

• 119
• 119
• x
• x

Vergleich von word-break: normal und word-break: auto-phrase

Und text-spacing-trim, mit dem Kerning zwischen Satzzeichen angewendet wird, um die Lesbarkeit der Typografie in Chinesisch, Japanisch und Koreanisch zu verbessern und visuell ansprechendere Ergebnisse zu erzielen.

Unterstützte Browser

• 123
• 123
• x
• x

Quelle

Wenn Satzzeichen in einer Zeile erscheinen, sollte die rechte Hälfte des CJK-Dezimals entfernt werden.

Syntax für relative Farben

Bei der Farbthemengestaltung gab es ein großes Update mit der relativen Farbsyntax.

In diesem Beispiel werden die Farben mit Oklch-basierter Farbgebung verwendet. Wenn Sie den Farbton über den Schieberegler anpassen, ändert sich das gesamte Design. Dies ist mithilfe der relativen Farbsyntax möglich. Für den Hintergrund wird die Primärfarbe basierend auf dem Farbton verwendet und die Helligkeit, der Farbton und die Farbsättigung werden angepasst, um den Wert zu ändern. „–i“ ist der Index des übergeordneten Elements in der Liste für die Abstufung der Werte. Hier sehen Sie, wie Sie Schrittfolgen mit benutzerdefinierten Eigenschaften und relativer Farbsyntax kombinieren können, um Designs zu erstellen.

Demo-Screencast

Live-Demo

In der folgenden Demo können Sie die Auswirkungen von balance und pretty auf eine Überschrift und einen Absatz vergleichen, indem Sie den Schieberegler ziehen. Probieren Sie, die Demo in eine andere Sprache zu übersetzen.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark()-Funktion

Mit der Funktion light-dark() ist die Gestaltung von Designs viel dynamischer und einfacher geworden.

Unterstützte Browser

• 123
• 123
• 120
• 17.5

Quelle

Die Funktion light-dark() ist eine ergonomische Verbesserung, die die Optionen für Farbthemen vereinfacht, sodass Sie Designstilen prägnanter formulieren können, wie in diesem visuellen Diagramm von Adam Argyle gezeigt. Bisher waren zwei verschiedene Codeblöcke erforderlich, um die Themenoptionen einzurichten: das Standardthema und eine Abfrage der Nutzereinstellungen. Mit der Funktion light-dark() können Sie diese Stiloptionen jetzt sowohl für helle als auch für dunkle Themen in derselben CSS-Zeile schreiben.

Visualisierung von light-dark(). Weitere Informationen finden Sie in der Demo.

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Wenn der Nutzer ein helles Design ausgewählt hat, hat die Schaltfläche einen hellblauen Hintergrund. Wenn der Nutzer ein dunkles Design ausgewählt hat, hat die Schaltfläche einen dunkelblauen Hintergrund.

:has()-Auswahl

Und ich wäre nicht ganz ehrlich, wenn ich über moderne Benutzeroberflächen sprechen würde, ohne eines der wichtigsten Highlights der Interoperabilität des letzten Jahres zu erwähnen: die :has()-Auswahl, die im Dezember letzten Jahres in allen Browsern eingeführt wurde. Diese API ist ein Gamechanger für das Erstellen logischer Stile.

Unterstützte Browser

• 105
• 105
• 121
• 15.4

Quelle

Mit der Auswahl :has() können Sie prüfen, ob ein untergeordnetes Element bestimmte untergeordnete Elemente hat oder ob diese untergeordneten Elemente sich in einem bestimmten Zustand befinden. Sie kann auch als übergeordnete Auswahl fungieren.

Demo, in der has() zum Stilisieren von Vergleichsblöcken auf Tokopedia verwendet wird

:has() hat sich bereits für viele Unternehmen als besonders nützlich erwiesen, darunter PolicyBazaar. Dort wird :has() verwendet, um Blöcke basierend auf ihrem Inhalt zu formatieren, z. B. im Vergleichsbereich, wo sich der Stil anpasst, wenn sich im Block ein Plan zum Vergleichen befindet oder er leer ist.

„Mit dem Selektor :has() konnten wir die JavaScript-basierte Validierung der Auswahl des Nutzers eliminieren und durch eine CSS-Lösung ersetzen, die für uns nahtlos funktioniert und die gleiche Benutzerfreundlichkeit bietet wie zuvor.“ – Aman Soni, Tech Lead, PolicyBazaar

Containerabfragen

Containerabfragen sind eine weitere wichtige Neuerung im Web, die jetzt neu verfügbar ist und immer häufiger verwendet wird. Mit ihnen können Sie die intrinsische Größe des übergeordneten Elements abfragen, um Stile anzuwenden. Das ist viel genauer als bei Medienabfragen, bei denen nur die Größe des Darstellungsbereichs abgefragt wird.

Unterstützte Browser

• 105
• 105
• 110
• 16

Quelle

Angular hat vor Kurzem eine schöne neue Dokumentationswebsite auf angular.dev veröffentlicht, in der Containerabfragen verwendet werden, um die Kopfzeilenblöcke basierend auf dem verfügbaren Platz auf der Seite zu formatieren. Selbst wenn sich das Layout ändert und von einem mehrspaltigen Seitenleistenlayout zu einem einspaltigen Layout wechselt, können sich die Kopfzeilenblöcke selbst anpassen.

Angular.dev-Website mit Containerabfragen in den Kopfkarten

Ohne Containerabfragen war dies ziemlich schwierig und leistungsmindernd, da Beobachter für die Größe und Elemente erforderlich waren. Jetzt ist es ganz einfach, ein Element basierend auf der Größe des übergeordneten Elements zu stylen.

Demo-Screencast

Live-Demo

Containerabfrage für die Angular-Headerkarte neu erstellen

@property

Und bald ist es soweit: @property wird in Baseline eingeführt. Dies ist eine wichtige Funktion, um benutzerdefinierten CSS-Eigenschaften (auch als CSS-Variablen bezeichnet) eine semantische Bedeutung zu verleihen und eine Vielzahl neuer Interaktionsfunktionen zu ermöglichen. @property ermöglicht auch kontextbezogene Bedeutung, Typprüfung, Standard- und Fallback-Werte in CSS. Das eröffnet die Tür für noch robustere Funktionen wie Abfragetypen vom Typ „Bereich“. Diese Funktion war bisher nicht möglich und bietet der CSS-Sprache jetzt eine enorme Vielfalt.

Unterstützte Browser

• 85
• 85
• 128
• 16.4

Quelle

Demo-Screencast

Live-Demo

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Fazit

Mit all diesen neuen leistungsstarken UI-Funktionen, die in allen Browsern verfügbar sind, sind die Möglichkeiten endlos. Innovative interaktive Funktionen mit scrollbasierten Animationen und Ansichtsübergängen machen das Web auf bisher nie dagewesene Weise flüssiger und interaktiver. Und mit den neuen UI-Komponenten können Sie noch einfacher robuste, ansprechend angepasste Komponenten erstellen, ohne die gesamte native Benutzeroberfläche zu ersetzen. Und schließlich: Verbesserungen bei Architektur, Layout, Typografie und responsivem Design lösen nicht nur die kleinen großen Probleme, sondern bieten Entwicklern auch die Tools, die sie benötigen, um komplexe Oberflächen zu erstellen, die auf einer Vielzahl von Geräten, Formfaktoren und Nutzeranforderungen funktionieren.

Mit diesen neuen Funktionen sollten Sie in der Lage sein, das Scripting von Drittanbietern für leistungsintensive Funktionen wie Scrollytelling zu entfernen und Elemente mithilfe von Ankerpositionierung miteinander zu verknüpfen, flüssige Seitenübergänge zu erstellen, Drop-down-Menüs zu formatieren und die Gesamtstruktur Ihres Codes nativ zu verbessern.

Für Webentwickler war es noch nie so einfach wie heute. Seit der Ankündigung von CSS3 gab es nicht mehr so viel Energie und Begeisterung. Funktionen, die wir in der Vergangenheit benötigt haben, aber nur träumen konnten, werden endlich Realität und Teil der Plattform. Und dank deiner Stimme können wir diese Funktionen priorisieren und endlich umsetzen. Wir arbeiten daran, die schwierigen und mühsamen Aufgaben nativ zu erledigen, damit Sie mehr Zeit für die wichtigen Dinge haben – wie die Hauptfunktionen und Designdetails, die Ihre Marke von anderen abheben.

Weitere Informationen zu diesen neuen Funktionen finden Sie auf developer.chrome.com und web.dev, wo unser Team die neuesten Nachrichten zu Webtechnologien veröffentlicht. Probieren Sie scrollbasierte Animationen, Ansichtsübergänge, Ankerpositionierung oder die stilisierbare Auswahl aus und lassen Sie uns wissen, was Sie davon halten. Wir sind für Sie da.