
Puppenspiel
Puppeteer ist eine JavaScript-Bibliothek, die eine API auf höherer Ebene zur Automatisierung von Chrome und Firefox über das Chrome DevTools-Protokoll und WebDriver BiDi bietet.
Mit diesem Tool können Sie alles im Browser automatisieren, von Screenshots und PDF-Generierung bis hin zum Navigieren und Testen komplexer Benutzeroberflächen und zur Analyse der Leistung.
Konzepte
Seiteninteraktionen
Netzwerkabfang
Screenshots erstellen
Ausführungsmodi
Blogposts
Einführung der CSS-Funktion „@function“ von Chrome 136 auf Chrome 139 verschieben
Das Chrome-Team reagiert auf Bedenken der Community.
Leitfaden für die Vollbildmigration in Chrome für Android
Vollständige Webseiten erstellen
Auf die Vollbildanzeige von Chrome auf Android vorbereiten
Ab Chrome 135 wird Chrome auf Android-Geräten randlos angezeigt.
So erweckt NRK Geschichten mit scrollbasierten Animationen zum Leben
Scroll-basierte und scroll-ausgelöste Animationen für Artikel mit Storytelling
CSS-Attribut „attr()“ wird verbessert
Sie können attr() jetzt mit jeder CSS-Property verwenden, einschließlich benutzerdefinierter Properties. Außerdem können Werte in andere Datentypen als Strings geparst werden.
CSS Wrapped 2024
Begleiten Sie das Chrome DevRel-Team und einen skatenden Chrome-Dino auf eine Reise durch die neuesten CSS-Funktionen, die 2024 für Chrome und die Webplattform eingeführt wurden.
Neu in Chrome 131
Chrome 131 wird jetzt eingeführt. Es gibt mehr CSS-Stile für das Details-Element, ein einfacheres Drucklayout mit Seitenrandfeldern und vieles mehr.
Weitere Optionen für den Stil <details>
Mit dem neuen Pseudo-Element ::details-content können Sie jetzt den Darstellungstyp festlegen und den Container für den Teil, der maximiert und minimiert wird, stylen.
Neu in Chrome 130
Chrome 130 wird jetzt eingeführt. Mit dem Dokument „Bild im Bild“ haben Sie mehr Kontrolle über „Bild im Bild“-Fenster. Verschachtelte CSS-Deklarationen lösen einige knifflige Grenzfälle und Sie können das Verhalten von Dekorationen bei Elementen, die über mehrere Zeilen verteilt sind, festlegen. Pete LePage hat alle Details zu den Neuigkeiten für Entwickler in Chrome 130.
Übergänge bei der Ansicht desselben Dokuments für Single-Page-Anwendungen
Beginnen Sie mit den Ansichtsübergängen für dasselbe Dokument, die Sie in Ihrer Single-Page-Anwendung verwenden können.
Animieren zu Höhe: auto; (und andere unveränderliche Keywords zur Größenanpassung) in CSS
Mit „interpolate-size“ und „calc-size()“ von und zu Keywords für die benutzerdefinierte Größe animieren
Scroll-Snap-Ereignisse
Es gibt zwei neue JavaScript-Ereignisse: scrollSnapChange und scrollSnapChange.
Missverständnisse bezüglich Aufrufübergängen
Da immer mehr Leute sich mit der View Transition API beschäftigen, ist es an der Zeit, einige Missverständnisse aufzuräumen.
Neues zu Preisvergleichsportalen und der Web-UI: Zusammenfassung der I/O 2024
Hier findest du alle Ankündigungen zu Preisvergleichsportalen und der Web-UI von der Google I/O 2024.
Was ist neu bei Ansichtsübergängen? (Update zur Google I/O 2024)
Neu: dokumentübergreifende Ansichtsübergänge für MPA, selektive Ansichtsübergänge mit aktiven Typen und Animationsstile mit der Ansichtsübergangsklasse.
Warum sind CSS- und UI-Funktionen für Ihre E-Commerce-Website wichtig?
Hier erfahren Sie, wie E-Commerce-Websites von der Implementierung der neuesten CSS- und UI-Funktionen wie Übergänge, Scroll-Animationen, Popover API und mehr profitieren.
Fallstudien zu scrollbaren Animationen
Entdecken Sie die Vorteile scrollbarer Animationen mit Policybazaar, redBus und Tokopedia.
Jetzt neu: „Entfessle die leistungsstarken Funktionen von scrollgesteuerten Animationen“
In diesem 10-teiligen Videokurs erfährst du alles über scrollbare Animationen
Ein alternativer Vorschlag für preiswertes Mauerwerk
Ein Vorschlag zur Definition von Mauerwerk und Rastern in verschiedenen Spezifikationen.
Dokumentübergreifende Ansichtsübergänge für mehrseitige Anwendungen
Beginnen Sie mit den dokumentenübergreifenden Ansichtsübergängen für die Verwendung in Ihrer mehrseitigen Anwendung (MPA).
Reibungslose Übergänge mit der View Transition API
Mit der View Transition API können Sie Übergänge zwischen Ansichten einer Website hinzufügen.
Änderungen an der CSS-::backdrop-Übernahme
Ab Chrome 122 übernimmt das „::backdrop“-Element die Eigenschaften des ursprünglichen Elements.
Bildlaufleistenstil
Verwenden Sie die Eigenschaften „scrollbar-width“ und „scrollbar-color“, um Bildlaufleisten zu gestalten.
Exklusives Akkordeon
Erstelle ein exklusives Akkordeon mit mehreren "name"-Elementen, die denselben "name" haben.
CSS-Wrapping: 2023!
2023 war ein erfolgreiches Jahr für Preisvergleichsportale! Erfahren Sie, was dieses Jahr in Chrome und auf der gesamten Webplattform eingeführt wurde.
Begrenzen Sie die Reichweite Ihrer Selectors mit der CSS-„@scope at-rule“
Hier erfahren Sie, wie Sie mit @scope Elemente nur innerhalb einer begrenzten Unterstruktur Ihres DOMs auswählen.
Erstellen Sie in CSS mit der Easing-Funktion linear() komplexe Animationskurven.
Wir stellen vor: linear(), eine Easing-Funktion in CSS, die linear zwischen ihren Punkten interpoliert. Damit lassen sich Bounce- und Federeffekte nachbilden.
Neu in CSS und der Benutzeroberfläche: I/O 2023 Edition
Die 20 wichtigsten CSS- und UI-Funktionen, die bei der Google I/O 2023 vorgestellt wurden und die Sie nicht verpassen sollten
Elemente beim Scrollen mit Scroll-Animationen animieren
Hier erfahren Sie, wie Sie mit Scroll-Zeitachsen und Ansichts-Zeitachsen deklarative Scroll-Animationen erstellen können.
CSS-Verschachtelung
Eine unserer beliebtesten CSS-Präprozessorfunktionen ist jetzt in die Sprache integriert: das Verschachteln von Stilregeln.
Hilfe beim Auswählen der Syntax für CSS-Verschachtelung
Die Arbeitsgruppe für Preisvergleichsportale führt die Debatte darüber, wie sich „Verschachtelung“ in CSS am besten definieren lässt. Wenn Sie CSS-Code schreiben, bitten wir Sie um Ihre Hilfe.
Auf Änderungen bei der Größe des Darstellungsbereichs in Chrome unter Android vorbereiten
Welche Änderungen kommen in Chrome 108 an die Größenanpassung des Darstellungsbereichs, warum diese Änderung in Chrome vorgenommen wird und was Sie tun können, um sich darauf vorzubereiten?
Neu in Chrome 106
Chrome 106 wird jetzt eingeführt. Es gibt neue internationale APIs, die Ihnen mehr Kontrolle bei der Formatierung von Zahlen ermöglichen. Für die neue Pop-up API gibt es einen Ursprungstest, mit dem dem Nutzer auf einfache Weise wichtige Inhalte angezeigt werden können. Es gibt eine Reihe von CSS-Verbesserungen. Und das ist noch längst nicht alles.
Modernes Web-Debugging in den Chrome-Entwicklertools
Sehen Sie sich einige der jüngsten Änderungen an den Chrome-Entwicklertools an, die die Fehlerbehebung und Profilerstellung bei der Arbeit mit Bundlern, Frameworks und Drittanbietercode verbessern.
Fallstudie: Besseres Angular-Debugging mit Entwicklertools
Die Chrome-Entwicklertools und Angular-Teams haben Angular als Testpilot verwendet, um Ihnen eine bessere Fehlerbehebung zu ermöglichen. Andere Frameworks können ähnliche Änderungen liefern.
In Ihrem Browser kommen Kaskadierungsebenen
"Cascade-Ebenen sind eine neue CSS-API, mit der Sie die Kaskaden-Priorität Ihres Codes verwalten können. Bald wird sie in allen modernen Browsern verfügbar sein."
Neu in Chrome 89
Chrome 89 wird jetzt eingeführt. WebHID, WebNFC und Web Serial haben ihre Ursprungstests abgeschlossen und sind jetzt stabil verfügbar. Wir schließen eine Lücke, die einige Entwickler bei der Prüfung der Installierbarkeit von PWAs umgangen haben. Web Share und Web Share Target sind jetzt auch für den Computer verfügbar. Und das ist noch längst nicht alles!
Specify how multiple animation effects should composite with animation-composition
When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?
More control over :nth-child() selections with the of S syntax
Pre-filter a set of child elements before applying An+B logic on it.