Referenz zu CSS-Funktionen

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

In dieser umfassenden Referenz zu den Funktionen der Chrome-Entwicklertools werden neue Workflows vorgestellt. und Ändern von CSS.

Die Grundlagen finden Sie unter CSS aufrufen und ändern.

Element auswählen

Im Steuerfeld Elemente der Entwicklertools können Sie den CSS-Code eines Elements nach dem anderen anzeigen oder ändern.

Im Screenshot ist das Element h1, das in der DOM-Baumstruktur blau hervorgehoben ist, das ausgewählte Element. Auf der rechten Seite werden die Stile des Unterelements auf dem Tab Stile angezeigt. Links ist das Element im Darstellungsbereich markiert ist, aber nur weil der Mauszeiger darüber im DOM bewegt wird. Baum.

Eine Anleitung finden Sie unter CSS eines Elements ansehen.

Es gibt viele Möglichkeiten, ein Element auszuwählen:

• Klicken Sie in Ihrem Darstellungsbereich mit der rechten Maustaste auf das Element und wählen Sie Untersuchen aus.
• Klicken Sie in den Entwicklertools auf Element auswählen. oder drücken Sie Befehlstaste + Umschalttaste + C (Mac) oder Strg + Umschalttaste + C (Windows, Linux) und dann auf das Element in Darstellungsbereich.
• Klicken Sie in den Entwicklertools auf das Element in der DOM-Struktur.
• Führe in den Entwicklertools eine Abfrage wie document.querySelector('p') in der Console aus, klicke mit der rechten Maustaste und wähle dann Im Steuerfeld „Elemente“ anzeigen aus.

Preisvergleichsportal ansehen

Elemente verwenden > Styles und Computed, um CSS-Regeln aufzurufen und CSS-Probleme zu diagnostizieren.

Mit Links navigieren

Der Tab Stile enthält Links an verschiedenen Stellen zu verschiedenen anderen Stellen, einschließlich, aber nicht beschränkt auf:

• Neben CSS-Regeln, Style Sheets und CSS-Quellen Über solche Links wird der Bereich Quellen geöffnet. Falls das Style-Sheet minimiert wurde, finden Sie weitere Informationen unter Reduzierte Dateien lesbar machen.
• In den Abschnitten Von ... übernommen für übergeordnete Elemente
• In var()-Aufrufen, bei Deklarationen benutzerdefinierter Eigenschaften.
• In animation-Kürzeleigenschaften, in @keyframes.
• Links zu Weitere Informationen in den Kurzinfos der Dokumentation.
• Und vieles mehr.

Hier sind einige davon hervorgehoben:

Links können anders gestaltet werden. Wenn du nicht sicher bist, ob es sich um einen Link handelt, kannst du darauf klicken, um dies herauszufinden.

Kurzinfos mit CSS-Dokumentation, Spezifität und benutzerdefinierten Attributwerten ansehen

Elemente > Stile: Zeigt Kurzinfos mit nützlichen Informationen an, wenn Sie den Mauszeiger auf bestimmte Elemente bewegen.

CSS-Dokumentation ansehen

Um eine Kurzinfo mit einer kurzen CSS-Beschreibung anzuzeigen, bewegen Sie den Mauszeiger auf dem Tab Styles auf den Namen der Eigenschaft.

Hinweis:Die Beschreibungen der Kurzinfos werden in den Entwicklertools aus benutzerdefinierten VS Code-Daten abgerufen.

Klicken Sie auf Weitere Informationen, um eine MDN-CSS-Referenz für diese Property aufzurufen.

Wenn Sie die Kurzinfos deaktivieren möchten, setzen Sie ein Häkchen bei Nicht anzeigen.

Um sie wieder zu aktivieren, gehen Sie zu Einstellungen > Einstellungen > Elemente > Kurzinfo zur CSS-Dokumentation anzeigen.

Spezifität der Auswahl aufrufen

Bewegen Sie den Mauszeiger auf einen Selektor, um eine Kurzinfo mit der Spezifitätsgewichtung aufzurufen.

Werte benutzerdefinierter Eigenschaften ansehen

Bewegen Sie den Mauszeiger auf ein --custom-property, um den Wert in einer Kurzinfo zu sehen.

Ungültiges, überschriebenes, inaktives und anderes Preisvergleichsportal ansehen

Auf dem Tab Styles werden viele Arten von CSS-Problemen erkannt und unterschiedlich hervorgehoben.

Weitere Informationen finden Sie unter CSS auf dem Tab „Stile“.

Nur den CSS-Code anzeigen, der tatsächlich auf ein Element angewendet wird

Auf dem Tab Stile werden alle Regeln angezeigt, die für ein Element gelten, einschließlich Deklarationen, die wurden überschrieben. Wenn Sie kein Interesse an überschriebenen Deklarationen haben, verwenden Sie die Methode Computed Tab, um nur den CSS-Code anzuzeigen, der tatsächlich auf ein Element angewendet wird.

1. Wählen Sie ein Element aus.
2. Gehen Sie im Bereich Elemente zum Tab Computed.

Klicken Sie das Kästchen Alle anzeigen an, um alle Unterkünfte zu sehen.

Siehe CSS auf dem Tab „Berechnet“ verstehen.

Preisvergleichsportal-Eigenschaften in alphabetischer Reihenfolge ansehen

Verwenden Sie den Tab Berechnet. Weitere Informationen finden Sie unter Nur CSS anzeigen, die tatsächlich auf ein Element angewendet wird.

Übernommene CSS-Eigenschaften ansehen

Klicken Sie auf dem Tab Computed das Kästchen Alle anzeigen an. Siehe Nur CSS-Code anzeigen, der tatsächlich auf ein Element angewendet werden.

Alternativ können Sie auch auf dem Tab Stile nach Abschnitten mit dem Namen Inherited from <element_name> suchen.

CSS-At-Regeln ansehen

At-Regeln sind CSS-Anweisungen, mit denen Sie das CSS-Verhalten steuern können. Elemente > Unter Stile werden die folgenden At-Regeln in speziellen Abschnitten angezeigt:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

@property At-Regeln ansehen

Mit der CSS-At-Regel @property können Sie benutzerdefinierte CSS-Eigenschaften explizit definieren und in einem Stylesheet registrieren, ohne JavaScript auszuführen.

Bewegen Sie den Mauszeiger auf dem Tab Stile über den Namen des entsprechenden Attributs, um eine Kurzinfo mit dem Wert, den Beschreibungen und einem Link zur Registrierung im minimierbaren Bereich @property unten auf dem Tab Stile zu sehen.

Um eine @property-Regel zu bearbeiten, doppelklicken Sie auf ihren Namen oder Wert.

@supports At-Regeln ansehen

Auf dem Tab Styles werden die CSS-At-Regeln von @supports angezeigt, wenn sie auf ein Element angewendet werden. Sehen Sie sich beispielsweise das folgende Element an:

Wenn Ihr Browser die Funktion lab() unterstützt, ist das Element grün, ansonsten lila.

Hinweis: Zum Zeitpunkt der Erstellung dieses Dokuments unterstützt nur Safari den CIELAB-Farbraum.

@scope At-Regeln ansehen

Auf dem Tab Styles werden CSS-@scope-at-rules angezeigt, sofern diese auf ein Element angewendet werden.

Die neuen @scope-At-Regeln sind Teil der CSS-Spezifikation für Cascading and Inheritance Level 6. Mit diesen Regeln können Sie CSS-Stile festlegen, d. h. Stile explizit auf bestimmte Elemente anwenden.

Hinweis: Die At-Regel-Funktion von @scope ist experimentell. Aktivieren Sie zum Testen das Flag Experimental Web Platform features (Experimentelle Webplattform-Funktionen) in chrome://flags/#enable-experimental-web-platform-features. Andernfalls funktioniert die nächste Vorschau nicht.

Sehen Sie sich die Regel @scope in der folgenden Vorschau an:

1. Prüfen Sie den Text auf der Karte in der Vorschau.
2. Suchen Sie auf dem Tab Stile nach der Regel @scope.

In diesem Beispiel überschreibt die Regel @scope die globale CSS-Deklaration background-color für alle <p>-Elemente innerhalb von Elementen mit einer card-Klasse.

Doppelklicken Sie auf die Regel @scope, um sie zu bearbeiten.

@font-palette-values At-Regeln ansehen

Mit der CSS-At-Regel @font-palette-values können Sie die Standardwerte der font-palette-Eigenschaft anpassen. Elemente > Unter Stile wird diese @-Regel in einem eigenen Bereich angezeigt.

Sehen Sie sich in der nächsten Vorschau den Abschnitt @font-palette-values an:

1. Prüfen Sie die zweite Textzeile in der Vorschau.
2. Suchen Sie unter Stile den Abschnitt @font-palette-values.

In diesem Beispiel werden die Standardwerte der farbigen Schriftart durch die Werte der --New-Schriftpalette überschrieben.

Wenn Sie Ihre benutzerdefinierten Werte bearbeiten möchten, klicken Sie doppelt darauf.

@position-try At-Regeln ansehen

Mit der CSS-Regel @position-try und der Eigenschaft position-try-options können Sie alternative Ankerpositionen für Elemente definieren. Weitere Informationen finden Sie unter Einführung in die CSS Anchor Positioning API.

Elemente > Mit Stile wird Folgendes aufgelöst und verknüpft:

• position-try-options-Property-Werten einem eigenen @position-try --name-Abschnitt hinzufügen.
• position-anchor-Eigenschaftswerte und anchor()-Argumente zu den entsprechenden Elementen mit popovertarget-Attributen.

Sehen Sie sich in der nächsten Vorschau die Werte für position-try-options und den Abschnitt @position-try an:

<ph type="x-smartling-placeholder">

</ph>

Demo zur Verwendung von Anker mit popover

1. Öffnen Sie in der Vorschau das Untermenü und klicken Sie auf IHR KONTO und dann auf STORE-FRONT.
2. Untersuchen Sie das Element in der Vorschau mit id="submenu".
3. Suchen Sie unter Stile nach der Eigenschaft position-try-options und klicken Sie auf ihren Wert --bottom. Über den Tab Stile gelangen Sie zum entsprechenden Bereich @position-try.
4. Klicken Sie auf den Wertlink position-anchor oder auf dieselben anchor()-Argumente. Im Steuerfeld Elemente wird das Element mit dem entsprechenden popovertarget-Attribut ausgewählt. Auf dem Tab Stile wird der CSS-Code des Elements angezeigt.

Wenn Sie Werte bearbeiten möchten, klicken Sie doppelt darauf.

Boxmodell eines Elements ansehen

Um das Feldmodell eines Elements zu sehen, gehen Sie zum Tab Stile und klicken Sie in der Aktionsleiste auf die Schaltfläche Seitenleiste anzeigen.

Wenn Sie einen Wert ändern möchten, doppelklicken Sie darauf.

CSS eines Elements suchen und filtern

Verwenden Sie das Feld Filter auf den Tabs Styles und Computed, um nach bestimmten CSS zu suchen. Eigenschaften oder Werte.

Um auch übernommene Eigenschaften auf dem Tab Computed zu suchen, klicken Sie das Kästchen Alle anzeigen an.

Gruppieren Sie die gefilterten Eigenschaften in minimierbaren Kategorien, um zum Tab Berechnet zu gelangen. Klicken Sie dazu das Kästchen Gruppieren an.

Fokussierte Seite emulieren

Wenn Sie den Fokus von der Seite auf die Entwicklertools verlegen, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. z. B. Drop-down-Listen, Menüs oder Datumsauswahl. Mit der Option check_box Eine Seite im Fokus emulieren können Sie Fehler an einem solchen Element beheben, als wäre es im Fokus.

Achtung :Wenn diese Option aktiviert ist, wird document.visibilityState auf visible gesetzt und das Ereignis visibilitychange nicht ausgelöst. Weitere Informationen finden Sie unter Page Visibility API.

Versuchen Sie, eine fokussierte Seite auf dieser Demoseite zu emulieren:

1. Fokussieren Sie das Eingabeelement. Ein weiteres Element erscheint darunter.
2. Öffnen Sie die Entwicklertools. Das Entwicklertools-Fenster ist jetzt im Fokus und nicht mehr die Seite, sodass das Element wieder verschwindet.
3. Gehen Sie unter Elemente > Stile, klicken Sie auf :hov, klicken Sie auf check_box Eine Seite im Fokus emulieren und prüfen Sie, ob das Eingabeelement ausgewählt ist. Sie können jetzt das darunter befindliche Element überprüfen.

Sie finden dieselbe Option auch im Bereich Rendering.

Pseudoklasse ein-/ausblenden

So wechseln Sie zwischen einer Pseudoklasse wie :active, :focus, :focus-within, :target, :hover, :visited oder focus-visible:

1. Wählen Sie ein Element aus.
2. Gehen Sie im Bereich Elemente zum Tab Stile.
3. Klicken Sie auf :hov.
4. Klicken Sie das Kästchen der Pseudoklasse an, die Sie aktivieren möchten.

Im Darstellungsbereich können Sie sehen, dass die Entwicklertools die background-color-Deklaration auf das Element anwenden, auch wenn der Mauszeiger nicht darauf bewegt wird.

Unter Pseudozustände zu Klassen hinzufügen finden Sie eine interaktive Anleitung.

Übernommene Pseudoelemente zum Hervorheben ansehen

Mit Pseudoelementen können Sie bestimmte Teile von Elementen gestalten. Hervorhebungs-Pseudoelemente sind Dokumentabschnitte mit einem und als „hervorgehoben“ gekennzeichnet. um dem Nutzer diesen Status anzuzeigen. Beispiele für solche Pseudoelemente sind ::selection, ::spelling-error, ::grammar-error und ::highlight.

Wie in der Spezifikation erwähnt, wird bei Konflikten zwischen mehreren Stilen anhand der Kaskade der erfolgreiche Stil bestimmt.

Hinweis:Wenn Sie diese Funktion aktivieren möchten, führen Sie Chrome mit dem Flag --enable-blink-features=HighlightInheritance aus.

Um die Übernahme und Priorität von Regeln besser zu verstehen, können Sie sich die übernommenen Hervorhebungs-Pseudoelemente ansehen:

1. Prüfen Sie den Text unten.

   Ich habe den Stil des Highlights-Pseudoelements meiner übergeordneten Ressource übernommen. Mich auswählen!

2. Wählen Sie einen Teil des Textes oben aus.

3. Scrollen Sie auf dem Tab Stile nach unten bis zum Abschnitt Inherited from ::selection pseudo of....

Kaskadenebenen ansehen

Kaskadenebenen ermöglichen eine gezieltere Steuerung Ihrer CSS-Dateien, um Konflikte mit Stilspezifitäten zu vermeiden. Dies ist nützlich bei großen Codebasen, Designsystemen und bei der Verwaltung von Drittanbieterstilen in Anwendungen.

Um Kaskadenebenen anzusehen, prüfen Sie das nächste Element und öffnen Sie Elemente > Stile:

Sehen Sie sich auf dem Tab Stile die drei Kaskadenebenen und ihre Stile an: page, component und base.

Um die Reihenfolge der Ebenen anzuzeigen, klicken Sie auf den Ebenennamen oder auf die Schaltfläche CSS-Ebenenansicht ein-/ausblenden.

Die Ebene page hat die höchste Spezifität, daher ist der Hintergrund des Elements grün.

Seiten im Druckmodus ansehen

So zeigen Sie eine Seite im Druckmodus an:

1. Öffnen Sie das Befehlsmenü.
2. Beginnen Sie mit der Eingabe von Rendering und wählen Sie Show Rendering aus.
3. Wählen Sie im Drop-down-Menü CSS Media emulieren die Option print aus.

Verwendetes und nicht verwendetes Preisvergleichsportal auf dem Tab „Abdeckung“ ansehen

Auf dem Tab „Abdeckung“ sehen Sie, welches Preisvergleichsportal auf einer Seite tatsächlich verwendet wird.

1. Drücken Sie die Tastenkombination Befehlstaste + Umschalt + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS), während die Entwicklertools um das Befehlsmenü zu öffnen.

2. Beginnen Sie mit der Eingabe von coverage.

   

3. Wählen Sie Abdeckung einblenden aus. Der Tab „Abdeckung“ wird angezeigt.

   

4. Klicken Sie auf Aktualisieren. Die Seite wird neu geladen und auf dem Tab Abdeckung erhalten Sie einen Überblick darüber, wie viel CSS und JavaScript erforderlich sind. Daten verwendet werden, die der Browser lädt.

   

   Grün steht für verwendete CSS. Rot steht für nicht verwendete CSS.

5. Klicken Sie auf eine CSS-Datei, um eine zeilenweise Aufschlüsselung des verwendeten CSS-Codes in der Vorschau oben zu sehen.

   

   Im Screenshot werden die Zeilen 55 bis 57 und 65 bis 67 von devsite-google-blue.css nicht verwendet, während die Zeilen 59 bis 63 verwendet werden.

Druckvorschaumodus erzwingen

Weitere Informationen finden Sie unter Erzwingen Sie die Entwicklertools in den Druckvorschaumodus.

CSS kopieren

Sie können über ein einzelnes Drop-down-Menü auf dem Tab Stile separate CSS-Regeln, Deklarationen, Eigenschaften und Werte kopieren.

Darüber hinaus können Sie CSS-Eigenschaften in der JavaScript-Syntax kopieren. Diese Option ist praktisch, wenn Sie CSS-in-JS-Bibliotheken verwenden.

So kopieren Sie CSS:

1. Wählen Sie ein Element aus.
2. Wählen Sie unter Elemente > Klicken Sie auf dem Tab Styles mit der rechten Maustaste auf eine CSS-Eigenschaft.

3. Wählen Sie im Drop-down-Menü eine der folgenden Optionen aus:

   • Deklaration kopieren: Kopiert die Eigenschaft und ihren Wert in der CSS-Syntax: css property: value;
   • Property kopieren: Kopiert nur den Namen property.
   • Wert kopieren: Kopiert nur die value.
   • Regel kopieren: Kopiert die gesamte CSS-Regel: css selector[, selector] { property: value; property: value; ... }
   • Deklaration als JS kopieren: Kopiert die Eigenschaft und ihren Wert in der JavaScript-Syntax: js propertyInCamelCase: 'value'
   • Kopieren Sie alle Deklarationen. Kopiert alle Eigenschaften und ihre Werte in die CSS-Regel: css property: value; property: value; ...

   • Kopieren Sie alle Deklarationen als JS. Kopiert alle Eigenschaften und ihre Werte in der JavaScript-Syntax: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Alle CSS-Änderungen kopieren: Auf dem Tab Stile vorgenommene Änderungen werden für alle Deklarationen kopiert.

   • Berechneten Wert ansehen Sie gelangen zum Tab Computed.

CSS ändern

In diesem Abschnitt sind alle Möglichkeiten aufgeführt, wie Sie CSS unter Elemente > Stile:

Sie können auch regelmäßiger Leser eines Blogs oder einer URL

• CSS beim Seitenaufbau überschreiben:
• Speichern Sie geänderten CSS-Code in Ihren lokalen Quellen in einem Arbeitsbereich.

Einem Element eine CSS-Deklaration hinzufügen

Da sich die Reihenfolge der Deklarationen auf den Stil eines Elements auswirkt, können Sie Deklarationen hinzufügen in verschiedene Möglichkeiten:

• Fügen Sie eine Inline-Deklaration hinzu. Entspricht dem Hinzufügen eines style-Attributs zum HTML-Code des Elements.
• Fügen Sie einer Stilregel eine Deklaration hinzu.

Welchen Workflow sollten Sie verwenden? In den meisten Fällen empfiehlt es sich, das Inline- Deklarationen. Inline-Deklarationen sind spezifischer als externe Deklarationen. wird sichergestellt, dass die Änderungen wie erwartet im Element wirksam werden. Siehe Selektor Typen.

Wenn Sie ein Debugging für die Stile eines Elements durchführen und genau testen möchten, was passiert, wenn ein Deklaration an unterschiedlichen Stellen definiert ist, verwenden Sie den anderen Workflow.

Inline-Deklaration hinzufügen

So fügen Sie eine Inline-Deklaration hinzu:

1. Wählen Sie ein Element aus.
2. Klicken Sie auf dem Tab Stile zwischen den Klammern des Abschnitts element.style. Der Cursor sodass Sie Text eingeben können.
3. Geben Sie einen Attributnamen ein und drücken Sie die Eingabetaste.

4. Geben Sie einen gültigen Wert für diese Eigenschaft ein und drücken Sie die Eingabetaste. Im DOM-Baum können Sie Folgendes tun: sehen Sie, dass dem Element ein style-Attribut hinzugefügt wurde.

   

   Im Screenshot wurden die Eigenschaften margin-top und background-color auf das ausgewählte Element angewendet. In der DOM-Baumstruktur sehen Sie die Deklarationen im Attribut style des Elements.

Deklaration zu einer Stilregel hinzufügen

So fügen Sie einer vorhandenen Stilregel eine Deklaration hinzu:

1. Wählen Sie ein Element aus.
2. Klicken Sie auf dem Tab Stile zwischen den Klammern der Stilregel, der Sie sie hinzufügen möchten. in der Deklaration. Der Cursor wird hervorgehoben, sodass Sie Text eingeben können.
3. Geben Sie einen Attributnamen ein und drücken Sie die Eingabetaste.
4. Geben Sie einen gültigen Wert für diese Eigenschaft ein und drücken Sie die Eingabetaste.

Im Screenshot erhält eine Stilregel die neue border-bottom-style:groove-Deklaration.

Name oder Wert einer Deklaration ändern

Doppelklicken Sie auf den Namen oder Wert einer Deklaration, um sie zu ändern. Weitere Informationen finden Sie unter Auflistbare Werte ändern mit Tastenkombinationen zum schnellen Erhöhen oder Verringern eines Werts um 0,1, 1, 10 oder 100 Einheiten.

Auflistbare Werte mit Tastenkombinationen ändern

Wenn Sie einen aufzählbaren Wert einer Deklaration bearbeiten, z. B. font-size, können Sie den Wert mithilfe der folgenden Tastenkombinationen um einen festen Betrag erhöhen:

• Wahltaste + Nach-oben-Taste (Mac) oder Alt + Nach-oben-Taste (Windows, Linux) um 0,1 erhöhen.
• Nach oben, um den Wert um 1 zu ändern, oder um 0,1, wenn der aktuelle Wert zwischen -1 und 1 liegt.
• Mit Umschalttaste + Aufwärtspfeil wird der Wert um 10 erhöht.
• Umschalttaste + Befehlstaste + Aufwärtspfeil (Mac) oder Strg + Umschalttaste + Bild-auf-Taste (Windows, Linux), um den Wert um 100 zu erhöhen.

Das Verringern funktioniert auch. Ersetzen Sie einfach alle oben erwähnten Ups durch Nach unten:

Längenwerte ändern

Verworfen :Diese Funktion wurde in Chrome 123 eingestellt. Wenn Sie ihn vorübergehend wieder aktivieren möchten, löschen Sie die Einstellungen Einstellungen > Tests > check_box CSS <length> verwerfen Authoring-Tool auf dem Tab „Stile“. Du kannst uns gerne unter crbug/1522657 Feedback geben.

Mit dem Zeiger können Sie beliebige Eigenschaften mit Länge ändern, z. B. Breite, Höhe, Abstand, Rand oder Rahmen.

So ändern Sie die Längeneinheit:

1. Bewegen Sie den Mauszeiger auf den Namen der Einheit. Er wird unterstrichen.

2. Klicken Sie auf den Namen der Einheit, um eine Einheit aus der Dropdown-Liste auszuwählen.

So ändern Sie den Wert für die Länge:

1. Bewegen Sie den Mauszeiger auf den Wert der Einheit. Der Mauszeiger ändert sich in einen horizontalen Doppelpfeil.

2. Ziehen Sie horizontal, um den Wert zu erhöhen oder zu verringern.

Wenn Sie den Wert um 10 anpassen möchten, halten Sie beim Ziehen die Umschalttaste gedrückt.

Klasse zu einem Element hinzufügen

So fügen Sie einem Element eine Klasse hinzu:

1. Wählen Sie das Element in der DOM-Baumstruktur aus.
2. Klicken Sie auf .cls.
3. Geben Sie den Namen des Kurses in das Feld Neuen Kurs hinzufügen ein.
4. Drücken Sie die Eingabetaste.

Emuliere die Einstellungen für das helle und dunkle Design und aktiviere den automatischen dunklen Modus

So schalten Sie den automatischen dunklen Modus ein oder emulieren die Einstellungen des Nutzers für ein helles oder dunkles Design:

1. Unter Elemente > Klicken Sie auf dem Tab Stile auf Allgemeine Rendering-Emulationen ein-/ausblenden.

2. Wählen Sie eine der folgenden Optionen aus der Drop-down-Liste aus:

   • prefers-color-scheme: light Gibt an, dass der Nutzer das helle Design bevorzugt.
   • prefers-color-scheme: dark Gibt an, dass der Nutzer das dunkle Design bevorzugt.
   • Automatischer dunklen Modus Zeigt Ihre Seite im dunklen Modus an, auch wenn Sie diese nicht implementiert haben. Außerdem wird prefers-color-scheme automatisch auf dark gesetzt.

Dieses Drop-down-Menü ist ein Kurzbefehl für die Optionen CSS-Medienfunktion prefers-color-scheme emulieren und Automatischen dunklen Modus aktivieren auf dem Tab Rendering.

Kurse ein-/ausblenden

So aktivieren oder deaktivieren Sie eine Klasse für ein Element:

1. Wählen Sie das Element in der DOM-Baumstruktur aus.
2. Öffnen Sie den Bereich Elementklassen. Weitere Informationen finden Sie unter Klasse zu einem Element hinzufügen. unterhalb des Felds Add New Klasse sind alle Klassen, die auf dieses Element angewendet werden.
3. Klicken Sie auf das Kästchen neben dem Kurs, den Sie aktivieren oder deaktivieren möchten.

Stilregel hinzufügen

So fügen Sie eine neue Stilregel hinzu:

1. Wählen Sie ein Element aus.
2. Klicken Sie auf Neue Stilregel. in den Entwicklertools ein element.style-Element, das eine neue Regel enthält.

Im Screenshot fügt die Entwicklertools die Stilregel h1.devsite-page-title hinzu, nachdem sie auf Neue Stilregel geklickt hat.

Wählen Sie aus, welchem Stylesheet eine Regel hinzugefügt werden soll

Klicken Sie beim Hinzufügen einer neuen Stilregel auf Neue Stilregel und halten Sie die Maustaste gedrückt. , um das Stylesheet auszuwählen der Stilregel hinzugefügt werden soll.

Erklärung ein-/ausblenden

So aktivieren oder deaktivieren Sie eine einzelne Erklärung:

1. Wählen Sie ein Element aus.
2. Bewegen Sie den Mauszeiger auf dem Tab Stile über die Regel, die die Deklaration definiert. Daraufhin werden Kontrollkästchen angezeigt. zu jeder Deklaration hinzu.
3. Setzen oder entfernen Sie das Häkchen neben der Erklärung. Wenn Sie eine Deklaration löschen, durchgestrichen, um anzuzeigen, dass sie nicht mehr aktiv ist.

Im Screenshot ist die Eigenschaft color für das aktuell ausgewählte Element deaktiviert.

Pseudoelemente ::view-transition während einer Animation bearbeiten

Weitere Informationen finden Sie im entsprechenden Abschnitt unter Animationen.

Weitere Informationen finden Sie unter Reibungslose und einfache Übergänge mit der View Transitions API.

Rasterelemente und deren Inhalt mit dem Rastereditor ausrichten

Weitere Informationen finden Sie im entsprechenden Abschnitt unter „CSS-Raster überprüfen“.

Farben mit der Farbauswahl ändern

Weitere Informationen finden Sie unter HD- und Nicht-HD-Farben mit der Farbauswahl prüfen und debuggen.

Winkelwert mit der Winkeluhr ändern

Die Winkeluhr bietet eine Benutzeroberfläche zum Ändern von <angle>s in CSS-Eigenschaftswerten.

So öffnen Sie die Winkeluhr:

1. Wählen Sie ein Element mit Winkelangabe aus.

2. Suchen Sie auf dem Tab Stile nach der Deklaration transform oder background, die Sie ändern möchten. Klicken Sie neben dem Winkelwert auf das Kästchen Winkelvorschau.

   

   Die kleinen Uhren links von -5deg und 0.25turn sind die schräge Vorschau.

3. Klicken Sie auf die Vorschau, um die Winkeluhr zu öffnen.

   

4. Ändern Sie den Winkelwert, indem Sie auf den Kreis Winkeluhr klicken oder mit der Maus scrollen auf Winkelwert um 1 erhöhen / verringern.

5. Es gibt weitere Tastenkombinationen, um den Winkelwert zu ändern. Weitere Informationen finden Sie im Bereich Stile Tastenkombinationen.

Mit dem Schatten-Editor Feld- und Textschatten ändern

Der Shadow Editor bietet ein GUI zum Ändern der CSS-Deklarationen text-shadow und box-shadow.

So ändern Sie Schatten mit dem Schatten-Editor:

1. Wählen Sie ein Element mit einer Schattendeklaration aus. Wählen Sie beispielsweise das nächste Element aus.

2. Auf dem Tab Stile finden Sie neben der Deklaration text-shadow oder box-shadow ein Schattensymbol .

   

3. Klicken Sie auf das Schattensymbol, um den Schatteneditor zu öffnen.

   

4. Ändern Sie die Schatteneigenschaften:

   • Typ (nur für box-shadow). Wählen Sie Outset oder Inset aus.
   • X- und Y-Offset: Ziehen Sie den blauen Punkt oder geben Sie Werte an.
   • Weichzeichnen: Ziehen Sie den Schieberegler oder geben Sie einen Wert an.
   • Streuung (nur für box-shadow). Ziehen Sie den Schieberegler oder geben Sie einen Wert an.

5. Sehen Sie sich die Änderungen an, die auf das Element angewendet wurden.

Timing von Animationen und Übergängen mit dem Easing-Editor bearbeiten

Der Easing-Editor bietet eine Benutzeroberfläche zum Ändern der Werte von transition-timing-function und animation-timing-function.

So öffnen Sie den Easing-Editor:

1. Wählen Sie ein Element mit einer Deklaration der Zeitfunktion aus, z. B. das Element <body> auf dieser Seite.
2. Suchen Sie auf dem Tab Stile nach dem lilafarbenen -Symbol neben den Deklarationen transition-timing-function, animation-timing-function oder der Kurzschrifteigenschaft transition.
3. Klicken Sie auf das Symbol, um den Easing-Editor zu öffnen:

Mit Voreinstellungen das Timing anpassen

Verwende die Voreinstellungen im Easing-Editor, um das Timing mit einem Klick anzupassen:

1. Klicken Sie im Easing-Editor auf eine der Auswahlschaltflächen, um einen Keyword-Wert festzulegen:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

2. Klicken Sie im Voreinstellungen-Wechsler auf die Schaltfläche oder , um eine der folgenden Voreinstellungen auszuwählen:

   • Lineare Voreinstellungen: elastic, bounce oder emphasized.
   • Kubische Bézier-Voreinstellungen:

Timing-Keyword	Voreinstellung	Kubische Bézierkurve
Ease-In-Out	Ein-/ausgehen, Sinus	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Hinaus, quadratisch	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Hinaus, Kubik	cubic-bezier(0.65, 0.05, 0.36, 1)
	Fast Out, Verlangsamen	cubic-bezier(0.4, 0, 0.2, 1)
	Hinaus, hinten	cubic-bezier(0.68, -0.55, 0.27, 1.55)
Ease-In	Ein, Sinus	cubic-bezier(0.47, 0, 0.75, 0.72)
	Ein, Quadratisch	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Kubik	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Hinein, hinten	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Fast Out, Linear Eingang	cubic-bezier(0.4, 0, 1, 1)
Ease-Out	Aus, Sinus	cubic-bezier(0.39, 0.58, 0.57, 1)
	Aus, quadratisch	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Aus, Kubik	cubic-bezier(0.22, 0.61, 0.36, 1)
	Lineare Ausgabe, Verlangsamung	cubic-bezier(0, 0, 0.2, 1)
	Aus, hinten	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Benutzerdefinierte Timings konfigurieren

Verwenden Sie die Kontrollpunkte auf den Linien, um benutzerdefinierte Werte für Timing-Funktionen festzulegen:

• Bei linearen Funktionen können Sie an einer beliebigen Stelle auf die Linie klicken, um einen Kontrollpunkt hinzuzufügen, und diesen ziehen. Doppelklicken Sie, um den Punkt zu entfernen.

  

• Bei kubischen Bézier-Funktionen ziehen Sie einen der Kontrollpunkte.

  

Jede Änderung löst in der Vorschau oben im Editor eine Ballanimation aus.

CSS-Änderungen kopieren (experimentell)

Hinweis: Wenn Sie diese experimentelle Funktion aktivieren möchten, klicken Sie unter Einstellungen > auf das Kästchen neben CSS-Änderungen synchronisieren auf dem Tab „Stile“. Experimentiere und lade die Entwicklertools neu.

Wenn dieser Test aktiviert ist, werden Ihre CSS-Änderungen auf dem Tab Stile grün hervorgehoben.

Wenn Sie eine einzelne Änderung der CSS-Deklaration kopieren möchten, bewegen Sie den Mauszeiger auf die hervorgehobene Deklaration und klicken Sie auf die Schaltfläche Kopieren.

Wenn Sie alle CSS-Änderungen in allen Deklarationen kopieren möchten, klicken Sie mit der rechten Maustaste auf eine Deklaration und wählen Sie Alle CSS-Änderungen kopieren aus.

Außerdem können Sie über den Tab Änderungen Änderungen nachverfolgen.