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

Una Kravets

Die Webplattform ist von Innovationen geprägt, wobei CSS und Web-UI-Funktionen an vorderster Front dieser aufregenden Weiterentwicklung stehen. Wir befinden uns in einer Blütezeit für Web-UIs. 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.

Neuartige interaktive Erlebnisse

Eine Nutzererfahrung im Web ist im Wesentlichen ein Aufruf und eine Reaktion zwischen Ihnen und Ihren Nutzern. Daher ist es so wichtig, in qualitativ hochwertige Nutzerinteraktionen zu investieren. Wir haben an einigen großen Verbesserungen gearbeitet, die neue Funktionen im Web für die Navigation innerhalb von Webseiten und die Navigation zwischen den Nutzern zur Verfügung stellen.

Scroll-Animationen

Unterstützte Browser

• 115
• 115
• 
• x

Quelle

Wie der Name schon sagt, können Sie mit der Scroll-gesteuerten Animations-API dynamische, scrollbare Animationen ohne Scroll-Beobachter oder andere aufwendige Skripts erstellen.

Scroll-gesteuerte 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 ganzen Seite oder einem Teil davon erstellen, die in den Darstellungsbereich hinein und innerhalb dieses Bereichs animiert werden. Dieser Effekt wird auch als Scrollytelling bezeichnet und sorgt für eine dynamische visuelle Wirkung.

Mit Scroll-Animationen können Sie wichtige Inhalte hervorheben, Nutzer durch eine Story führen oder Ihren Webseiten einfach eine dynamische Note verleihen.

Scroll-animiertes visuelles Element

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-gesteuerte Animationen können ganzseitige Scrollytelling-Erlebnisse bedeuten, aber sie können auch subtilere Animationen bedeuten, z. B. eine Headerleiste, die beim Scrollen durch eine Web-App einen Schatten minimiert und zeigt.

Bildlaufgesteuerte Animation

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 Überschrift, den Text, die Navigationsleiste und den Hintergrund – und dann wird die jeweilige scrollgesteuerte 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 scrollbarer 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 bewusst, dass diese Effekte das Web weiterhin zu einem interaktiven Ort machen werden, und wir denken bereits darüber nach, was wir als Nächstes tun könnten. 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 auf 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 User Experience. Es ist eine tolle Videoreihe.

Übergänge ansehen

Wir haben gerade eine leistungsstarke neue Funktion für Animationen innerhalb von Webseiten kennengelernt. Es gibt aber auch eine leistungsstarke neue Funktion namens Ansichtsübergänge, mit der zwischen Seitenaufrufen eine nahtlose User Experience ermöglicht. Mit den Übergängen vom Typ „Ansicht“ wird das Web flüssiger: nahtlose Übergänge zwischen verschiedenen Ansichten auf einer einzelnen Seite oder sogar über verschiedene Seiten hinweg.

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.

Die ganzseitigen Effekte sind zwar ansprechend und nahtlos, du kannst aber auch Mikrointeraktionen erstellen, wie in diesem Beispiel, bei dem die Listenansicht auf Grundlage der Nutzerinteraktion aktualisiert wird. Dieser Effekt lässt sich ganz einfach mit Ansichtsübergängen erzielen.

Sie können in Ihrer Single-Page-Anwendung schnell Übergänge für Ansichten aktivieren. Dazu müssen Sie einfach eine Interaktion mit document.startViewTransition zusammenfassen und sicherstellen, dass jedes Element, das übergeht, ein view-transition-name, inline oder dynamisch mit JavaScript hat, wenn Sie DOM-Knoten erstellen.

Demografik

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 Elementen 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
• 

Ü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

Angenommen, die Startseite soll auf eine andere Art und Weise zu einer Blog-Seite animiert werden, als wenn die Blog-Seite zurück zur Startseite animiert wird. 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. Vorher war das chaotisch. Sie konnten Klassen zum DOM hinzufügen, um Stile anzuwenden, und mussten die Klassen danach 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 im selben Dokument besteht darin, dass Sie den Übergang nicht in document.startViewTransition() einschließ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 stärkeren benutzerdefinierten Effekt können Sie die JavaScript-Elemente mithilfe der neuen Ereignis-Listener pageswap oder pagereveal einbinden, die Zugriff auf das Objekt vom Typ „View Transit“ bieten.

Mit pageswap können Sie kurz vor dem Erstellen der alten Snapshots einige kurzfristige Änderungen auf der ausgehenden Seite vornehmen und mit pagereveal die neue Seite anpassen, bevor sie nach der Initialisierung des Renderings begonnen hat.

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

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

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

Zukünftig möchten wir weitere Änderungen bei der Wiedergabe von Videos vornehmen, darunter:

• Begrenzte Übergänge: Sie können einen Übergang auf einen DOM-Unterbaum beschränken, damit 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 Ziehen oder Wischen 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).

Ein großes Problem für Entwickler ist eine scheinbar einfache Anforderung: die Möglichkeit, Dropdown-Menüs (das Auswahlelement) zu gestalten. Auf den ersten Blick scheint es einfach zu sein, ist aber ein komplexes Problem, das so viele Teile der Plattform betrifft: vom Layout und Rendering über Scrollen und Interaktion bis hin zum User-Agent-Stil und CSS-Eigenschaften und sogar Änderungen am HTML-Code 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/Verlassen der Interaktion)
• Zum Schließen wegklicken
• Aktive Pop-over-Verwaltung (andere Pop-over beim Öffnen schließen)
• 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

Zunächst haben wir ein globales Attribut namens popover veröffentlicht, das vor einigen Wochen den neuen Status von Baseline erreicht hat.

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 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 der Aufrufer,

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:

• Förderung in die oberste Ebene: 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: Durch das Öffnen des Pop-overs wird der nächste Tab innerhalb des Pop-overs gestoppt.
• Integrierte Tastaturbelegungen: Wenn Sie die Taste esc drücken oder das Pop-over zweimal antippen, wird es geschlossen und der Fokus wechselt zurück.
• Standardkomponentenbindungen: : Der Browser verbindet ein Pop-up semantisch mit seinem Trigger.

Wichtig :Das Popover-Attribut enthält keine semantische Bedeutung. Sie müssen daher den richtigen HTML- oder ARIA-Code verwenden, um dem Popover-Element mehr kontextuelle Bedeutung zu verleihen. 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 du diese Art von Erfahrung nutzen möchtest, 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-over auf seiner Startseite im Menü „Neu“ und in der Übersicht über die Überprüfung von Pull-Anfragen implementiert. Diese Funktion wurde mit der Popover-Polyfill von Oddbird weiter verbessert, die mit Unterstützung von Keith Cirkel von GitHub entwickelt wurde, um ältere Browser zu unterstützen.

„Durch die Migration zum Popover haben wir es geschafft, buchstäblich Tausende Codezeilen abzuschaffen. Pop-ups helfen uns, weil wir nicht mehr mit magischen Z-Index-Zahlen kämpfen müssen. Durch die korrekte Beziehung des Baums für die Barrierefreiheit, die mit deklarativem Schaltflächenverhalten und integrierten Fokusverhalten festgelegt wird, ist es für unser Designsystem wesentlich einfacher, Muster richtig zu implementieren.–Keith Cirkel, Software Engineer, GitHub“

Ein- und Ausstiegseffekte animieren

Wenn Sie Pop-ups verwenden, sollten Sie ihnen Interaktionen hinzufügen. Im letzten Jahr wurden vier neue Interaktionsfunktionen eingeführt, die das Animieren 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 im obersten Layer animieren, sei es ein Popover oder ein Dialogfeld. Zusammengenommen sieht ein Dialogfeld mit Hintergrund so aus:

Demografik

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. Dies geschieht sowohl für das Dialogfeld 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 mithilfe des Schlüsselworts allow-discrete, um den Animationsmodus zu aktivieren, in dem diskrete Eigenschaften übergangen werden können.

Ankerpositionierung

Popover war nur der Anfang der Geschichte. 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.

Demografik

Livedemo

Richten Sie eine ankernde Beziehung 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. Im folgenden Code wird die Oberkante der Kurzinfo am unteren Rand der Schaltfläche positioniert.

.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 schließlich das neue Keyword anchor-center für die Eigenschaften justify und align, um das positionierte Element am 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 Tabulator drücken.

Demografik

Livedemo

In diesem Beispiel wird die Ankerfunktion verwendet, um die Ankerposition mithilfe der physischen Eigenschaften von left, right und bottom einzurichten. 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. Um diesen Layoutmechanismus leichter zu visualisieren und anzuwenden, sehen Sie sich dieses Tool in Chrome 125+ an:

Da diese Elemente verankert sind, wird das positionierte Element dynamisch auf der Seite verschoben, während sich der Anker bewegt. In diesem Fall haben wir Kartenelemente im Containerabfragestil, deren Größe basierend auf ihrer eigentlichen Größe angepasst wird, was bei Medienabfragen nicht möglich ist. Das verankerte Menü ändert sich mit dem neuen Layout, wenn sich die Benutzeroberfläche der Karte ä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. Die erste besteht darin, eigene Positionierungsregeln 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 ist auch mit einem schönen Übergang möglich.

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 du das Umblättern vereinfachen möchtest, kannst du 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. Für Vorschauen im Wikipedia-Stil, ein Muster, das überall im Web zu sehen ist, muss es möglich sein, mit ihnen zu interagieren und ein Pop-over über einen Link und den Nutzer, der Interesse zeigt, ohne Klicken darauf auszulösen (z. B. durch Bewegen des Mauszeigers oder Tabfokus).

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 einige Anwendungsfälle gibt, die von dieser API noch nicht abgedeckt werden. Sie können beispielsweise den Pfeil, der ein verankertes Element mit seinem Anker verbindet, stilisieren, 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.

Stilauswahl

Mit popover und anchor hat das Team Fortschritte gemacht, um endlich ein anpassbares Drop-down-Menü für die Auswahl zu ermöglichen. Die gute Nachricht ist, dass es große Fortschritte gegeben hat. Die schlechte Nachricht ist, dass sich diese API zum jetzigen Zeitpunkt noch in der Testphase befindet. Ich freue mich jedoch, Ihnen einige Live-Demos und Updates zu unseren Fortschritten vorstellen zu können und würde dazu hoffentlich einiges Feedback dazu erhalten. Erstens: Es gibt Fortschritte bei der Aktivierung der neuen, anpassbaren Auswahlfunktion für Nutzer. Derzeit ist es möglich, dies mithilfe einer CSS-Eigenschaft für die Darstellung zu tun, die auf appearance: base-select festgelegt ist. Nachdem du die Darstellung festgelegt hast, aktivierst du eine neue, anpassbare Auswahlmöglichkeit.

select {
  appearance: base-select;
}

Hinweis: Da es sich um eine experimentelle API in dieser Phase handelt, wird sich die Syntax wahrscheinlich ändern.

Neben appearance: base-select gibt es einige neue HTML-Updates. Sie haben unter anderem die Möglichkeit, Ihre Optionen zur Anpassung in ein datalist zu verpacken. Außerdem haben Sie die Möglichkeit, den Optionen beliebige nicht interaktive Inhalte wie Bilder hinzuzufügen. 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>

Im folgenden Code sehen Sie, wie <selectedoption> in der Gmail-Benutzeroberfläche angepasst werden kann. Ein visuelles Symbol repräsentiert den Antworttyp, der aus Platzgründen ausgewählt wurde. 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.

Demografik

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 Zeilen ignorieren, die sie nicht verstehen, wie die benutzerdefinierte Schaltfläche, die Datenliste, die ausgewählte Option und Bilder in den Optionen, ähnelt das Fallback der aktuellen Standardbenutzeroberflä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. Mit der stilisierten Auswahl können Sie dies und noch viel mehr tun, was sie zu einer dringend benötigten Ergänzung zur Webplattform macht.

Demografik

Livedemo

Exklusives Akkordeon

Das Chrome-Team hat sich nicht nur auf die Lösung ausgewählter Stile und alle Komponenten der Benutzeroberfläche konzentriert. 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 festzustellen, ob mit einem Formularwert interagiert wurde oder „schmutzig“ geworden ist. Dies kann sehr nützlich sein, um Nutzerfeedback zu geben, und reduziert den Umfang der Skripts, die hierfür in der Vergangenheit erforderlich waren.

Unterstützte Browser

• 119
• 119
• 88
• 16,5

Quelle

Screencast-Demo

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 der Nutzer*-Formularvalidierung

field-sizing: content

Ein weiteres praktisches Komponentenupdate ist field-sizing: content, das auf Formularsteuerelemente wie Eingaben und Textbereiche angewendet werden kann. 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 sollten, 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 iterieren ständig 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 Zustände 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 auf sinnvolle Weise direkt neben dem restlichen Code 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 durch Ziehen des Schiebereglers vergleichen. Versuche, 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 die Schriftabstände zwischen Satzzeichen angepasst werden, um die Lesbarkeit chinesischer, japanischer und koreanischer Typografie 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 für die Farben die auf Oklch basierenden Designs 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 Properties 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. Versuche, 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

Zusammen mit der light-dark()-Funktion sind die Themen wesentlich dynamischer und einfacher geworden.

Unterstützte Browser

• 123
• 123
• 120
• 17.5

Quelle

Die Funktion light-dark() ist eine ergonomische Verbesserung, die die Farbthemenoptionen 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 (Ihr Standarddesign und eine Abfrage mit den Nutzereinstellungen), um Designoptionen einzurichten. Jetzt können Sie diese Stiloptionen für helle und dunkle Designs mit der Funktion light-dark() 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

Außerdem möchte ich gerne auf die moderne Benutzeroberfläche eingehen, ohne eines der wirkungsvollsten Interoperabilität-Highlights des vergangenen Jahres zu erwähnen, nämlich den :has()-Selektor, der im Dezember letzten Jahres in verschiedenen Browsern erschienen ist. Diese API ist ein entscheidender Faktor beim Schreiben 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 der Verwendung von has() zum Gestalten von Vergleichsblöcken auf Tokopedia.

: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 :has()-Selektor konnten wir die JavaScript-basierte Validierung der Nutzerauswahl eliminieren und durch eine CSS-Lösung ersetzen, die reibungslos funktioniert und die gleiche Erfahrung bietet. – Aman Soni, Tech Lead, PolicyBazaar.“

Containerabfragen

Eine weitere wichtige Neuerung im Web, die inzwischen verfügbar ist und immer häufiger verwendet wird, sind Containerabfragen, die es ermöglichen, die unveränderliche Größe eines übergeordneten Elements abzufragen, um Stile anzuwenden. Dies ist ein viel feinerer Zahn 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

Angular-Abfrage für den Container der Kopfkarten 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 früher nie möglich und bietet inzwischen so viel Tiefe für die Sprache von CSS.

Unterstützte Browser

• 85
• 85
• 128
• 16.4

Quelle

Screencast-Demo

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 lösen Verbesserungen der Lebensqualität in Architektur, Layout, Typografie und responsivem Design nicht nur die kleinen großen Dinge, sondern bieten Entwicklern auch die Tools, die sie zum Erstellen komplexer Benutzeroberflächen benötigen, die auf verschiedenen Geräten, Formfaktoren und Anforderungen von Nutzenden 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 Spannung. Funktionen, die wir benötigt haben, aber in der Vergangenheit 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 hören Ihnen zu und helfen Ihnen gerne weiter.