Referenz zu CSS-Funktionen

In dieser umfassenden Referenz zu Chrome-Entwicklertools-Funktionen zum Ansehen und Ändern von CSS finden Sie neue Workflows.

Grundlegende Informationen finden Sie unter CSS ansehen und ändern.

Element auswählen

Im Bereich Elemente der Entwicklertools können Sie das CSS eines Elements einzeln ansehen oder ändern.

Auf dem Screenshot ist das im DOM-Baum blau hervorgehobene h1-Element das ausgewählte Element. Rechts werden die Stile des Elements auf dem Tab Stile angezeigt. Links wird das Element im Viewport hervorgehoben, aber nur, weil sich der Mauszeiger im DOM-Baum darauf befindet.

Eine Anleitung finden Sie unter CSS eines Elements ansehen.

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

• Klicken Sie im Ansichtsfenster 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 klicken Sie dann auf das Element im Darstellungsbereich.
• Klicken Sie in den Entwicklertools auf das Element im DOM-Baum.
• Führen Sie in den Entwicklertools eine Abfrage wie document.querySelector('p') in der Konsole aus, rechtsklicken Sie auf das Ergebnis und wählen Sie Im Bereich „Elemente“ anzeigen aus.

Preisvergleichsportal ansehen

Auf den Tabs Elemente > Stile und Berechnet können Sie CSS-Regeln aufrufen und CSS-Probleme diagnostizieren.

Mit Links navigieren

Auf dem Tab Stile werden Links an verschiedenen Stellen zu verschiedenen anderen Stellen angezeigt, unter anderem:

• Neben CSS-Regeln, zu Stylesheets und CSS-Quellen. Über solche Links wird der Bereich Quellen geöffnet. Wenn das Stylesheet minimiert ist, lesen Sie den Abschnitt Minimierte Datei lesbar machen.
• In den Abschnitten Übernommen von… zu übergeordneten Elementen.
• In var()-Aufrufen zu Deklarationen benutzerdefinierter Eigenschaften.
• In animation-Kurzschreibweisen auf @keyframes.
• Weitere Informationen-Links in Kurzinfos der Dokumentation.
• Und mehr

Hier sind einige davon:

Links können unterschiedlich formatiert sein. Wenn Sie sich nicht sicher sind, ob es sich bei einem Element um einen Link handelt, klicken Sie darauf, um es herauszufinden.

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

Unter Elemente > Stile werden Tooltips mit nützlichen Informationen angezeigt, wenn Sie den Mauszeiger auf bestimmte Elemente bewegen.

CSS-Dokumentation ansehen

Wenn Sie eine Kurzinfo mit einer kurzen CSS-Beschreibung sehen möchten, bewegen Sie den Mauszeiger auf dem Tab Stile auf den Attributnamen.

Klicken Sie auf Weitere Informationen, um die MDN-CSS-Referenz für dieses Attribut aufzurufen.

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

Wenn Sie sie wieder aktivieren möchten, rufen Sie die Einstellungen > Einstellungen > Elemente > Kurzinfo zur CSS-Dokumentation anzeigen auf.

Spezifität des Selektors ansehen

Bewegen Sie den Mauszeiger auf dem Tab Styles auf einen Selektor, um eine Kurzinfo mit seinem Spezifitätsgewicht aufzurufen und übereinstimmende Elemente im Viewport hervorzuheben. Das gilt auch für übergeordnete Selektoren in geschachtelten CSS-Regeln, übernommene geschachtelte Regeln und @nested-declarations-Regeln.

Werte benutzerdefinierter Eigenschaften ansehen

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

Ungültige, überschriebene, inaktive und andere CSS-Regeln ansehen

Auf dem Tab Stile werden viele Arten von CSS-Problemen erkannt und auf unterschiedliche Weise hervorgehoben.

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

Nur das CSS ansehen, das tatsächlich auf ein Element angewendet wird

Auf dem Tab Stile sehen Sie alle Regeln, die für ein Element gelten, einschließlich überschriebener Deklarationen. Wenn Sie nicht an überschriebenen Deklarationen interessiert sind, können Sie auf dem Tab Berechnet nur das CSS aufrufen, das tatsächlich auf ein Element angewendet wird.

1. Wählen Sie ein Element aus.
2. Rufen Sie im Bereich Elemente den Tab Berechnet auf.

Klicken Sie auf das Kästchen Alle anzeigen, um alle Eigenschaften zu sehen.

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

CSS-Eigenschaften in alphabetischer Reihenfolge ansehen

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

Übernommene CSS-Eigenschaften ansehen

Setzen Sie auf dem Tab Berechnet ein Häkchen bei Alle anzeigen. Weitere Informationen finden Sie unter Nur das CSS ansehen, das tatsächlich auf ein Element angewendet wird.

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

CSS-At-Regeln ansehen

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

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

@property @-Regeln ansehen

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

Bewegen Sie den Mauszeiger auf den Namen einer solchen Property auf dem Tab Stile, um eine Kurzinfo mit dem Wert der Property, Deskriptoren und einem Link zu ihrer Registrierung im minimierbaren Abschnitt @property unten auf dem Tab Stile zu sehen.

Wenn Sie eine @property-Regel bearbeiten möchten, doppelklicken Sie auf ihren Namen oder Wert.

@supports @-Regeln ansehen

Auf dem Tab Stile werden die @supports-CSS-At-Regeln 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, andernfalls lila.

@scope At-Regeln ansehen

Auf dem Tab Stile werden CSS-@scope-At-Regeln angezeigt, wenn sie auf ein Element angewendet werden.

Die neuen @scope-At-Regeln sind Teil der Spezifikation „CSS Cascading and Inheritance Level 6“. Mit diesen Regeln können Sie CSS-Stile auf bestimmte Elemente beschränken, also explizit auf bestimmte Elemente anwenden.

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 der Klasse card.

Wenn Sie die Regel „@scope“ bearbeiten möchten, doppelklicken Sie darauf.

@font-palette-values At-Regeln ansehen

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

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

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

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

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

@position-try-Regeln ansehen

Mit der CSS-Regel @position-try und der Property position-try-options können Sie alternative Ankerpositionen für Elemente definieren. Weitere Informationen

Elemente > Stile löst die folgenden Probleme und verknüpft sie:

• position-try-options-Eigenschaftswerte in einem separaten @position-try --name-Abschnitt.
• position-anchor-Attributwerte und anchor()-Argumente den entsprechenden Elementen mit popovertarget-Attributen zu.

Prüfen Sie die position-try-options-Werte und die @position-try-Abschnitte in der nächsten Vorschau:

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

Wenn Sie Werte bearbeiten möchten, doppelklicken Sie darauf.

Boxmodell eines Elements ansehen

Wenn Sie sich das Box-Modell eines Elements ansehen möchten, rufen Sie den Tab Stile auf und klicken Sie in der Aktionsleiste auf die Schaltfläche Seitenleiste einblenden.

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

CSS eines Elements suchen und filtern

Verwenden Sie das Feld Filter auf den Tabs Stile und Berechnet, um nach bestimmten CSS-Selektoren (einschließlich übergeordneter Selektoren in verschachtelten Regeln), Attributen oder Werten zu suchen.

Wenn Sie auch nach übernommenen Attributen auf dem Tab Berechnet suchen möchten, setzen Sie ein Häkchen bei Alle anzeigen.

Wenn Sie den Tab Berechnet aufrufen möchten, gruppieren Sie die gefilterten Attribute in minimierbaren Kategorien, indem Sie das Häkchen bei Gruppe setzen.

Fokussierte Seite emulieren

Wenn Sie den Fokus von der Seite auf die Entwicklertools verlagern, werden einige Overlay-Elemente, die durch den Fokus ausgelöst werden, automatisch ausgeblendet. Dazu gehören beispielsweise Drop-down-Listen, Menüs oder Datumsauswahlen. Mit der Option check_box Fokussierte Seite emulieren können Sie ein solches Element so debuggen, als wäre es fokussiert.

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

1. Fokus auf das Eingabeelement legen. Darunter wird ein weiteres Element angezeigt.
2. Öffnen Sie die Entwicklertools. Das Entwicklertools-Fenster ist jetzt im Fokus und nicht mehr die Seite. Das Element verschwindet daher wieder.
3. Klicken Sie unter Elemente > Stile auf :hov, setzen Sie ein Häkchen bei check_box Fokussierte Seite emulieren und achten Sie darauf, dass das Eingabeelement ausgewählt ist. Sie können jetzt das Element darunter prüfen.

Dieselbe Option finden Sie auch im Bereich Rendering.

Weitere Möglichkeiten zum Einfrieren eines Elements finden Sie unter Bildschirm einfrieren und verschwindende Elemente untersuchen.

Pseudoklasse aktivieren/deaktivieren

So aktivieren oder deaktivieren Sie eine Pseudoklasse:

1. Wählen Sie ein Element aus.
2. Rufen Sie im Bereich Elemente den Tab Stile auf.
3. Klicken Sie auf :hov.
4. Klicken Sie auf die Pseudoklasse, die Sie aktivieren möchten.

In diesem Beispiel sehen Sie, dass die DevTools die Deklaration background-color auf das Element anwenden, obwohl der Mauszeiger nicht auf dem Element platziert ist.

Auf dem Tab Stile werden die folgenden Pseudoklassen für alle Elemente angezeigt:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Außerdem können einige Elemente eigene Pseudoklassen haben. Wenn Sie ein solches Element auswählen, wird auf dem Tab Stile der Bereich Bestimmten Elementstatus erzwingen angezeigt, den Sie maximieren und elementspezifische Pseudoklassen aktivieren können.

Eine interaktive Anleitung finden Sie unter Pseudostatus zu einer Klasse hinzufügen.

Übernommene Pseudo-Elemente für die Hervorhebung ansehen

Mit Pseudoelementen können Sie bestimmte Teile von Elementen gestalten. Hervorhebungs-Pseudoelemente sind Dokumentteile mit dem Status „Ausgewählt“. Sie werden als „Hervorgehoben“ formatiert, um diesen Status für den Nutzer 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 der Gewinnerstil durch die Kaskade bestimmt.

Um die Vererbung und Priorität der Regeln besser zu verstehen, können Sie sich die übernommenen Pseudoelemente für die Hervorhebung ansehen:

1. Prüfen Sie den Text unten.

   Ich habe den Stil des Highlight-Pseudoelements meines übergeordneten Elements übernommen. Wähle mich aus!

2. Wählen Sie einen Textabschnitt oben aus.

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

Kaskadenebenen ansehen

Kaskadenebenen ermöglichen eine explizitere Steuerung Ihrer CSS-Dateien, um Konflikte bei der Stilspezifität zu vermeiden. Das ist nützlich für große Codebasen, Designsysteme und die Verwaltung von Stilen von Drittanbietern in Anwendungen.

Wenn Sie Kaskadenebenen ansehen möchten, prüfen Sie das nächste Element und öffnen Sie Elemente > Stile.

Auf dem Tab Stile sehen Sie die drei Kaskadenebenen und ihre Stile: page, component und base.

Wenn Sie die Reihenfolge der Ebenen sehen möchten, klicken Sie auf den Namen der Ebene 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.

Seite im Druckmodus ansehen

So rufen Sie eine Seite im Druckmodus auf:

1. Öffnen Sie das Befehlsmenü.
2. Gib Rendering ein und wähle Show Rendering aus.
3. Wählen Sie im Drop-down-Menü CSS-Media emulieren die Option print aus.

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

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

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

2. Geben Sie coverage ein.

   

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

   

4. Klicken Sie auf Aktualisieren. Die Seite wird neu geladen und auf dem Tab Abdeckung wird angezeigt, wie viel CSS (und JavaScript) aus jeder vom Browser geladenen Datei verwendet wird.

   

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

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

   

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

Druckvorschaumodus erzwingen

Weitere Informationen finden Sie unter Entwicklertools in den Druckvorschaumodus versetzen.

CSS kopieren

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

Außerdem können Sie CSS-Eigenschaften in JavaScript-Syntax kopieren. Diese Option ist nützlich, wenn Sie CSS-in-JS-Bibliotheken verwenden.

So kopieren Sie CSS:

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

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

   • Erklärung kopieren. Kopiert die Property und ihren Wert in CSS-Syntax: css property: value;
   • Property kopieren Kopiert nur den Namen von 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 das Attribut und seinen Wert in JavaScript-Syntax: js propertyInCamelCase: 'value'
   • Alle Deklarationen kopieren. Kopiert alle Attribute und ihre Werte in der CSS-Regel: css property: value; property: value; ...

   • Alle Deklarationen als JS kopieren. Kopiert alle Attribute und ihre Werte in JavaScript-Syntax: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Alle CSS-Änderungen kopieren Kopiert die Änderungen, die Sie auf dem Tab Stile vornehmen, in alle Deklarationen.

   • Berechneten Wert ansehen Sie werden zum Tab „Berechnet“ weitergeleitet.

Preisvergleichsportal ändern

In diesem Abschnitt werden alle Möglichkeiten zum Ändern von CSS unter Elemente > Stile aufgeführt.

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

• CSS-Überschreibungen beim Seitenaufbau beibehalten
• Geänderte CSS-Dateien in einem Arbeitsbereich in Ihren lokalen Quellen speichern

CSS mit Codevervollständigung ändern

Wenn Sie mit komplexeren Kombinationen von CSS-Eigenschaften wie Farbverläufen oder Box-Schatten experimentieren möchten, ohne sich die genaue Syntax merken zu müssen, oder wenn Sie schnell Grid- und Flex-Layouts erstellen möchten, die auf mehreren verwandten Eigenschaften basieren, können Sie mit der Eingabe einer CSS-Eigenschaft beginnen und die Codevervollständigung verwenden.

CSS-Deklaration zu einem Element hinzufügen

Da die Reihenfolge der Deklarationen die Formatierung eines Elements beeinflusst, können Sie Deklarationen auf verschiedene Arten hinzufügen:

• Inline-Deklaration hinzufügen Entspricht dem Hinzufügen eines style-Attributs zum HTML-Code des Elements.
• Einer Stilregel eine Deklaration hinzufügen

Welchen Workflow sollten Sie verwenden? In den meisten Szenarien sollten Sie den Workflow für die Inline-Deklaration verwenden. Inline-Deklarationen haben eine höhere Spezifität als externe Deklarationen. Daher wird durch den Inline-Workflow sichergestellt, dass die Änderungen wie erwartet im Element wirksam werden. Weitere Informationen zur Spezifität finden Sie unter Selektortypen.

Wenn Sie die Formatierungen eines Elements debuggen und speziell testen möchten, was passiert, wenn eine Deklaration an verschiedenen Stellen definiert wird, 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 die Klammern im Abschnitt element.style. Der Cursor wird fokussiert, 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 das Attribut ein und drücken Sie die Eingabetaste. In der DOM-Baum sehen Sie, dass dem Element ein style-Attribut hinzugefügt wurde.

   

   Im Screenshot wurden die Attribute margin-top und background-color auf das ausgewählte Element angewendet. Im DOM-Baum sehen Sie die Deklarationen, die im style-Attribut des Elements enthalten sind.

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 die geschweiften Klammern der Stilregel, der Sie die Deklaration hinzufügen möchten. Der Cursor wird fokussiert, 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 dieses Attribut ein und drücken Sie die Eingabetaste.

Auf dem 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. Unter Aufzählbare Werte mit Tastenkombinationen ändern finden Sie Tastenkombinationen, mit denen Sie einen Wert schnell um 0,1, 1, 10 oder 100 Einheiten erhöhen oder verringern können.

Aufzählbare Werte mit Tastenkombinationen ändern

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

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

Das Dekrementieren funktioniert ebenfalls. Ersetzen Sie einfach jede Instanz von Up durch Down.

Längenwerte ändern

Sie können den Mauszeiger verwenden, um Eigenschaften mit Längenangaben wie Breite, Höhe, Innenabstand, Rand oder Rahmen zu ändern.

So änderst du 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 dem Drop-down-Menü auszuwählen.

So ändern Sie den Längenwert:

1. Bewegen Sie den Mauszeiger auf den Einheitenwert. 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.

Einem Element eine Klasse hinzufügen

So fügen Sie einem Element eine Klasse hinzu:

1. Wählen Sie das Element im DOM-Baum aus.
2. Klicken Sie auf .cls.
3. Geben Sie den Namen der Klasse in das Feld Neue Klasse hinzufügen ein.
4. Drücken Sie die Eingabetaste.

Einstellungen für helles und dunkles Design emulieren und automatischen dunklen Modus aktivieren

So aktivieren Sie den automatischen dunklen Modus oder emulieren die Nutzereinstellung für helle oder dunkle Designs:

1. Klicken Sie auf dem Tab Elemente > Stile auf Gängige Rendering-Emulationen ein-/ausschalten.

2. Wählen Sie in der Drop-down-Liste eine der folgenden Optionen 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 dunkler Modus: Ihre Seite wird im dunklen Modus angezeigt, auch wenn Sie ihn nicht implementiert haben. Außerdem wird prefers-color-scheme automatisch auf dark gesetzt.

Dieses Drop-down-Menü ist eine Verknüpfung zu den Optionen CSS-Medienfunktion prefers-color-scheme emulieren und Automatischen dunklen Modus aktivieren auf dem Tab Rendering.

Klasse ein- oder ausblenden

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

1. Wählen Sie das Element im DOM-Baum aus.
2. Öffnen Sie den Bereich Elementklassen. Weitere Informationen finden Sie unter Element eine Klasse hinzufügen. Unter dem Feld Neue Klasse hinzufügen werden alle Klassen aufgeführt, die auf dieses Element angewendet werden.
3. Klicken Sie das Kästchen neben der Klasse an, die 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 . Die Entwicklertools fügen unter der Regel element.style eine neue Regel ein.

Im Screenshot fügt DevTools die Stilregel h1.devsite-page-title hinzu, nachdem auf New Style Rule (Neue Stilregel) geklickt wurde.

Wählen Sie das Stylesheet aus, dem Sie eine Regel hinzufügen möchten.

Wenn Sie eine neue Stilregel hinzufügen, klicken Sie auf Neue Stilregel und halten Sie die Maustaste gedrückt, um das Stylesheet auszuwählen, dem die Stilregel hinzugefügt werden soll.

Erklärung umschalten

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 auf die Regel, die die Deklaration definiert. Neben jeder Erklärung werden Kästchen angezeigt.
3. Setzen oder entfernen Sie das Häkchen neben der Erklärung. Wenn Sie eine Deklaration löschen, wird sie in den DevTools durchgestrichen, um anzuzeigen, dass sie nicht mehr aktiv ist.

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

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

Weitere Informationen finden Sie im entsprechenden Abschnitt unter Animationen.

Weitere Informationen finden Sie unter Smooth and simple transitions with the View Transitions API.

Rasterelemente und deren Inhalte mit dem Rastereditor ausrichten

Siehe den entsprechenden Abschnitt unter CSS-Raster prüfen.

Farben mit der Farbauswahl ändern

Weitere Informationen finden Sie unter HD- und Nicht-HD-Farben mit der Farbauswahl untersuchen und debuggen.

Winkelwert mit der Winkel-Uhr ändern

Die Winkeluhr bietet eine GUI zum Ändern von <angle>s in CSS-Attributwerten.

So öffnen Sie die Uhr:

1. Wählen Sie ein Element mit einer Winkeldeklaration aus.

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

   

   Die kleinen Uhren links neben -5deg und 0.25turn sind die Winkelvorschauen.

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, um den Winkelwert um 1 zu erhöhen oder zu verringern.

5. Es gibt weitere Tastenkombinationen, mit denen Sie den Winkelwert ändern können. Weitere Informationen finden Sie unter Tastenkombinationen im Bereich „Stile“.

Box- und Textschatten mit dem Schatten-Editor ändern

Der Shadow Editor bietet eine 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. Suchen Sie auf dem Tab Stile neben der Deklaration text-shadow oder box-shadow nach dem Schattensymbol .

   

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

   

4. Schattenattribute ändern:

   • Typ (nur für box-shadow): Wählen Sie Outset oder Inset aus.
   • X- und Y-Offsets: Ziehen Sie den blauen Punkt oder geben Sie Werte an.
   • Unkenntlich machen 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. Beachten Sie die Änderungen, die am Element vorgenommen wurden.

Animations- und Übergangszeiten mit dem Easing-Editor bearbeiten

Der Easing-Editor bietet eine GUI 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 Timing-Funktion aus, z. B. das Element <body> auf dieser Seite.
2. Suchen Sie auf dem Tab Stile nach dem lila Symbol  neben den Deklarationen transition-timing-function, animation-timing-function oder der Kurzschreibweise transition.
3. Klicken Sie auf das Symbol, um den Easing-Editor zu öffnen:

Mit Voreinstellungen die Zeitabläufe anpassen

Wenn Sie das Timing mit einem Klick anpassen möchten, verwenden Sie die Voreinstellungen im Easing-Editor:

1. Klicken Sie im Easing-Editor auf eine der Auswahlbuttons, um einen Schlüsselwortwert festzulegen:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

2. Klicken Sie im Voreinstellungsauswahl auf die Schaltflächen oder , um eine der folgenden Voreinstellungen auszuwählen:

   • Lineare Voreinstellungen: elastic, bounce oder emphasized.
   • Voreinstellungen für kubische Bézierkurven:

Keyword für den Zeitpunkt	Voreinstellung	Kubische Bézierkurve
Ease-In-Out	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Start & Ende, quadratisch	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Ein- und Ausblenden, kubisch	cubic-bezier(0.65, 0.05, 0.36, 1)
	Schnell raus, langsam rein	cubic-bezier(0.4, 0, 0.2, 1)
	Rein, raus, zurück	cubic-bezier(0.68, -0.55, 0.27, 1.55)
Ease-In	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	Ein, quadratisch	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	Kubikzoll	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Zurück	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Schnell raus, linear rein	cubic-bezier(0.4, 0, 1, 1)
Ease-Out	Aus, Sinus	cubic-bezier(0.39, 0.58, 0.57, 1)
	Ende, quadratisch	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Ausblenden, kubisch	cubic-bezier(0.22, 0.61, 0.36, 1)
	Linear Out, Slow In	cubic-bezier(0, 0, 0.2, 1)
	Raus, zurück	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Benutzerdefinierte Zeitangaben konfigurieren

Wenn Sie benutzerdefinierte Werte für Timing-Funktionen festlegen möchten, verwenden Sie die Kontrollpunkte auf den Linien:

• Bei linearen Funktionen können Sie auf eine beliebige Stelle auf der Linie klicken, um einen Kontrollpunkt hinzuzufügen und zu ziehen. Doppelklicken Sie, um den Punkt zu entfernen.

  

• Ziehen Sie bei kubischen Bézierkurven einen der Kontrollpunkte.

  

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

(Experimentell) CSS-Änderungen kopieren

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

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

Wenn Sie alle CSS-Änderungen für alle Deklarationen auf einmal kopieren möchten, rechtsklicken Sie auf eine beliebige Deklaration und wählen Sie Alle CSS-Änderungen kopieren aus.

Außerdem können Sie auf dem Tab Änderungen Änderungen nachverfolgen, die Sie vornehmen.