Referenz zu CSS-Funktionen

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

Die Grundlagen finden Sie unter CSS aufrufen und ändern.

Element auswählen

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

Auf dem Screenshot ist das Element h1, das im DOM-Baum 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 Viewport hervorgehoben, aber nur, weil die Maus im DOM-Baum darüber schwebt.

Eine Anleitung finden Sie unter CSS eines Elements aufrufen.

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

• Klicken Sie im Viewport 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 in der DOM-Struktur.
• Führen Sie in den Entwicklertools in der Konsole eine Abfrage wie document.querySelector('p') aus, klicken Sie mit der rechten Maustaste auf das Ergebnis und wählen Sie Im Elements-Bereich anzeigen aus.

CSS 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 an verschiedenen Stellen Links zu verschiedenen anderen Stellen angezeigt, darunter:

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

Hier einige davon:

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

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

Unter Elemente > Stile werden Kurzinfos angezeigt, 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 für die Kurzinfos werden aus den benutzerdefinierten Daten von VS Code abgerufen.

Klicken Sie auf Weitere Informationen, um eine MDN-CSS-Referenz zu dieser Eigenschaft aufzurufen.

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

Wenn Sie sie wieder aktivieren möchten, setzen Sie ein Häkchen bei Einstellungen > Einstellungen > Elemente > Tooltip für CSS-Dokumentation anzeigen.

Spezifität des Selektors für die Ansicht

Bewegen Sie den Mauszeiger auf einen Selektor, um eine Kurzinfo mit dem Gewicht der Spezifizität aufzurufen.

Werte für benutzerdefinierte Properties ansehen

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

Ungültiges, überschriebenes, inaktives und anderes CSS 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“ verstehen.

Nur das CSS anzeigen, 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 sich nicht für überschriebene Deklarationen interessieren, können Sie auf dem Tab Berechnet nur das CSS sehen, das tatsächlich auf ein Element angewendet wird.

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

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

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

CSS-Properties in alphabetischer Reihenfolge ansehen

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

Übernommene CSS-Properties ansehen

Klicken Sie auf dem Tab Berechnet auf das Kästchen Alle anzeigen. Weitere Informationen finden Sie unter Nur das CSS anzeigen, das tatsächlich auf ein Element angewendet wird.

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

CSS-At-Rules ansehen

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

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

@property-At-Rules ansehen

Mit der @property-CSS-At-Rule-Regel 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 auf den Namen einer solchen Property, um eine Kurzinfo mit dem Wert, den Beschreibungen und einem Link zur Registrierung im minimierbaren Bereich @property unten auf dem Tab Stile aufzurufen.

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

@supports-At-Rules ansehen

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

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

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

@scope-At-Rules ansehen

Auf dem Tab Stile werden CSS-@scope-At-Rules angezeigt, wenn sie 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 den Geltungsbereich von CSS-Stilen festlegen, d. h. Stile explizit auf bestimmte Elemente anwenden.

Hinweis: Die At-Rule-Funktion @scope befindet sich in der Entwicklungsphase. Wenn Sie sie testen möchten, aktivieren Sie in chrome://flags/#enable-experimental-web-platform-features das Flag Experimentelle Webplattform-Funktionen. Andernfalls funktioniert die nächste Vorschau nicht.

In der folgenden Vorschau sehen Sie die Regel @scope:

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 @scope-Regel die globale CSS-background-color-Deklaration für alle <p>-Elemente in Elementen mit der Klasse card.

Wenn Sie die @scope-Regel bearbeiten möchten, klicken Sie darauf und dann doppelt darauf.

@font-palette-values-At-Rules ansehen

Mit der CSS-At-Rule @font-palette-values können Sie die Standardwerte der Property font-palette anpassen. Unter Elemente > Stile wird diese At-Rule 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 nach dem Abschnitt @font-palette-values.

In diesem Beispiel werden die Standardwerte der farbigen Schriftart durch die Werte der Schriftartenpalette --New ü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 Die CSS-API zur Positionierung von Ankern.

Unter Elemente > Stile werden die folgenden Elemente aufgelöst und verknüpft:

• position-try-options-Werte in einem speziellen @position-try --name-Abschnitt.
• position-anchor-Property-Werte und anchor()-Argumente an die entsprechenden Elemente mit popovertarget-Attributen.

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

Demo mit Anker mit popover

1. Öffnen Sie in der Vorschau das Untermenü, indem Sie auf MEIN KONTO und dann auf SHOP klicken.
2. Prüfen Sie das Element mit id="submenu" in der Vorschau.
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 Abschnitt @position-try.
4. Klicken Sie auf den Link zum position-anchor-Wert oder auf dieselben anchor()-Argumente. Im Bereich Elemente wird das Element mit dem entsprechenden popovertarget-Attribut ausgewählt. Auf dem Tab Stile wird das CSS des Elements angezeigt.

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

Boxmodell eines Elements ansehen

Wenn Sie das Box-Modell eines Elements aufrufen möchten, gehen Sie zum Tab Styles 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-Eigenschaften oder -Werten zu suchen.

Wenn Sie auch nach übernommenen Eigenschaften auf dem Tab Berechnet suchen möchten, klicken Sie auf das Kästchen Alle anzeigen.

Wenn Sie den Tab Berechnet verwenden möchten, gruppieren Sie die gefilterten Eigenschaften in minimierbare Kategorien, indem Sie das Kästchen Gruppen anklicken.

Fokussierte Seite emulieren

Wenn Sie den Fokus von der Seite auf die Entwicklertools legen, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. Dazu gehören z. B. Drop-down-Listen, Menüs oder Datumsauswahlen. Mit der Option check_box Emulate a focused page (Fokussierte Seite emulieren) können Sie ein solches Element so debuggen, als wäre es im Fokus.

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

Auf dieser Demoseite können Sie eine fokussierte Seite emulieren:

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

Sie finden diese Option auch im Bereich Rendering.

Weitere Möglichkeiten zum Einfrieren von Elementen finden Sie unter Bildschirm einfrieren und verschwindende Elemente prüfen.

Pseudoklasse ein-/ausblenden

So wechseln Sie zu einer Pseudoklasse:

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

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

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

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

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

Eine interaktive Anleitung finden Sie unter Einem Class-Objekt einen Pseudostatus hinzufügen.

Übernommene Pseudo-Elemente für Hervorhebungen ansehen

Mit Pseudoelementen können Sie bestimmte Teile von Elementen stylen. Hervorhebungs-Pseudoelemente sind Dokumentteile mit dem Status „ausgewählt“ und haben den Stil „hervorgehoben“, um den Nutzer auf diesen Status aufmerksam zu machen. 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.

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

Um die Vererbung und Priorität der Regeln besser zu verstehen, können Sie sich die vererbten Pseudo-Elemente für Hervorhebungen ansehen:

1. Prüfen Sie den Text unten.

   Ich habe den Stil des Pseudo-Elements „highlight“ meines übergeordneten Elements übernommen. Wähle mich aus!

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

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

Kaskadenebenen ansehen

Mit Kaskadierungsebenen können Sie Ihre CSS-Dateien expliziter steuern, um Konflikte bei der Stilspezifität zu vermeiden. Das ist nützlich für große Codebases, Designsysteme und beim Verwalten 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.

Wenn Sie die Ebenenreihenfolge aufrufen möchten, klicken Sie auf den Namen der Ebene oder auf die Schaltfläche Ansicht der CSS-Ebenen umschalten.

Die page-Ebene 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. Geben Sie Rendering ein 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 Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS), während die Entwicklertools markiert sind, um das Befehlsmenü zu öffnen.

2. Geben Sie coverage ein.

   

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

   

4. Klicken Sie auf  Aktualisieren. Die Seite wird neu geladen und der Tab Abdeckung bietet einen Überblick darüber, wie viel CSS und JavaScript für jede Datei verwendet wird, die im Browser geladen wird.

   

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

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

   

   Auf dem Screenshot sind 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 DevTools in den Druckvorschaumodus zwingen.

CSS kopieren

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

Außerdem können Sie CSS-Eigenschaften in 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. Klicken Sie auf dem Tab Elemente > Stile mit der rechten Maustaste auf eine CSS-Eigenschaft.

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

   • Deklaration kopieren Die Property und ihr Wert werden in CSS-Syntax kopiert: css property: value;
   • Property kopieren Es wird nur der Name der property kopiert.
   • Wert kopieren Kopiert nur die value.
   • Regel kopieren: Die gesamte CSS-Regel wird kopiert: 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 Alle Eigenschaften und ihre Werte in der CSS-Regel werden kopiert: css property: value; property: value; ...

   • Alle Deklarationen als JS-Code kopieren Alle Properties und ihre Werte werden in JavaScript-Syntax kopiert: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Kopieren Sie alle CSS-Änderungen. Übernimmt die Änderungen, die Sie auf dem Tab Styles vornehmen, in alle Deklarationen.

   • Berechneten Wert ansehen Der Tab Berechnet wird geöffnet.

CSS ändern

In diesem Abschnitt werden alle Möglichkeiten aufgeführt, wie Sie CSS unter Elemente > Stile ändern können.

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

• CSS bei jedem Seitenaufbau überschreiben
• Speichern Sie die geänderten CSS-Dateien in Ihren lokalen Quellen in einem Arbeitsbereich.

Elementen eine CSS-Deklaration hinzufügen

Da sich die Reihenfolge der Deklarationen auf den Stil eines Elements auswirkt, können Sie Deklarationen auf unterschiedliche Weise hinzufügen:

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

Welchen Workflow sollten Sie verwenden? Für die meisten Szenarien sollten Sie den Workflow für die Inline-Erklärung verwenden. Inline-Deklarationen sind spezifischer als externe Deklarationen. Mit dem Inline-Workflow wird sichergestellt, dass die Änderungen wie erwartet im Element wirksam werden. Weitere Informationen zur Spezifität finden Sie unter Selektorentypen.

Wenn Sie die Stile eines Elements debuggen und speziell testen möchten, was passiert, wenn eine Deklaration an verschiedenen 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 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. In der DOM-Hierarchie sehen Sie, dass dem Element das Attribut style hinzugefügt wurde.

   

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

Einer Stilregel eine Deklaration 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 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.

Namen oder Wert einer Deklaration ändern

Klicken Sie zum Ändern auf den Namen oder Wert einer Deklaration. Unter Einen Wert mithilfe von Tastenkürzeln ändern finden Sie Tastenkürzel, mit denen Sie einen Wert schnell um 0,1, 1, 10 oder 100 Einheiten erhöhen oder verringern können.

Enumerate-Werte mit Tastenkombinationen ändern

Wenn Sie einen zählbaren Wert einer Deklaration bearbeiten, z. B. font-size, können Sie mit den folgenden Tastenkürzeln den Wert um einen festen Betrag erhöhen:

• Wahltaste + Aufwärts (Mac) oder Alt + Aufwärts (Windows, Linux) für einen Zuwachs von 0,1.
• Hoch: Der Wert wird um 1 erhöht oder um 0,1, wenn der aktuelle Wert zwischen -1 und 1 liegt.
• Umschalttaste + Aufwärts, um den Wert um 10 zu erhöhen.
• Umschalttaste + Befehlstaste + Aufwärts (Mac) oder Strg + Umschalttaste + Bild-auf (Windows, Linux), um den Wert um 100 zu erhöhen.

Auch das Dekrementieren funktioniert. Ersetzen Sie einfach jede zuvor erwähnte Instanz von Hoch durch Runter.

Längenwerte ändern

Eingestellt :Diese Funktion wurde in Chrome 123 eingestellt. Wenn Sie es vorübergehend wieder aktivieren möchten, deaktivieren Sie das Kästchen CSS-Tool „<length>“ auf dem Tab „Styles“ unter Einstellungen Einstellungen Tests. Du kannst uns unter crbug/1522657 Feedback geben.

Mit dem Mauszeiger können Sie alle 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. Sie sehen, dass er unterstrichen ist.

2. Klicken Sie auf den Namen der Einheit, um sie im Drop-down-Menü auszuwählen.

So ändern Sie den Längenwert:

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

2. Ziehen Sie den Schieberegler 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 im DOM-Baum 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.

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

So aktivieren oder deaktivieren Sie den automatischen dunklen Modus oder emulieren die Einstellung des Nutzers für helle oder dunkle Designs:

1. Klicken Sie auf dem Tab Elemente > Stile auf Gängige 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 dunkler 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 eine Verknüpfung für die Optionen CSS-Medienfunktion „prefers-reduced-motion“ emulieren prefers-color-scheme und Automatischen Dunkelmodus aktivieren auf dem Tab Rendering.

Kurse ein- und 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 Elementen eine Klasse hinzufügen. Unter dem Feld Neue Klasse hinzufügen sind 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 . In den DevTools wird unter der Regel element.style eine neue Regel eingefügt.

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

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

Wenn Sie eine neue Style-Regel hinzufügen, halten Sie die Maustaste auf Neue Style-Regel gedrückt, um auszuwählen, welchem Stylesheet die Style-Regel hinzugefügt werden soll.

Erklärung aktivieren oder deaktivieren

So aktivieren oder deaktivieren Sie eine einzelne Erklärung:

1. Wählen Sie ein Element aus.
2. Bewegen Sie auf dem Tab Stile den Mauszeiger auf die Regel, die die Deklaration definiert. Neben jeder Erklärung werden Kästchen angezeigt.
3. Setzen Sie ein Häkchen in das Kästchen neben der Erklärung oder entfernen Sie es. 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.

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

Weitere Informationen finden Sie im entsprechenden Abschnitt unter Animationen.

Weitere Informationen finden Sie unter Einfache und flüssige Übergänge mit der View Transitions API.

Rasterelemente und ihren Inhalt mit dem Raster-Editor ausrichten

Weitere Informationen finden Sie im 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 prüfen und beheben.

Winkelwert mit dem Winkelmesser ä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 Winkeldeklaration aus.

2. Suchen Sie auf dem Tab Styles nach der transform- oder background-Deklaration, die Sie ändern möchten. Klicken Sie neben dem Wert für den Winkel auf das Kästchen Winkelvorschau.

   

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

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

   

4. Klicken Sie auf den Kreis Winkeluhr, um den Winkelwert zu ändern, oder scrollen Sie mit der Maus, um den Winkelwert um 1 zu vergrößern bzw. zu verringern.

5. Es gibt weitere Tastenkombinationen, mit denen Sie den Winkelwert ändern können. Weitere Informationen finden Sie unter Tastenkombinationen für den Stilbereich.

Schatten für Felder und Text mit dem Schatten-Editor ändern

Der Shadow-Editor bietet eine Benutzeroberfläche zum Ändern von text-shadow- und box-shadow-CSS-Deklarationen.

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 text-shadow- oder box-shadow-Deklaration nach dem Schattensymbol .

   

3. Klicken Sie auf das Schattensymbol, um den Schatten-Editor 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.
   • Unkenntlich machen Ziehen Sie den Schieberegler oder geben Sie einen Wert ein.
   • Breitengrad (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

Im Editor für Übergänge können Sie die Werte von transition-timing-function und animation-timing-function über eine Benutzeroberfläche ändern.

So öffnen Sie den Editor für Übergänge:

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

Mit Voreinstellungen das Timing anpassen

Wenn Sie die Zeitabläufe mit einem Klick anpassen möchten, verwenden Sie die Voreinstellungen im Editor für Übergänge:

1. Klicken Sie im Editor für Übergänge auf eine der Auswahlschaltflächen, um einen Schlüsselbegriffswert festzulegen:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

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

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

Keyword für die Zeit	Voreinstellung	Kubische Bézierkurve
Ease-In-Out	Ein-/ausgehen, Sinus	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In-Out, quadratisch	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Schnell heraus, langsam hinein	cubic-bezier(0.4, 0, 0.2, 1)
	Hinein, Raus, Zurück	cubic-bezier(0.68, -0.55, 0.27, 1.55)
Ease-In	In, Sinus	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratisch	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Kubikmeter	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Ein, Zurück	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)
	Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	Linear Out, Slow In	cubic-bezier(0, 0, 0.2, 1)
	Aus, hinten	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Benutzerdefinierte Zeiträume konfigurieren

Verwenden Sie die Steuerpunkte auf den Linien, um benutzerdefinierte Werte für Timingfunktionen festzulegen:

• Klicken Sie bei linearen Funktionen auf eine beliebige Stelle auf der Linie, um einen Kontrollpunkt hinzuzufügen, und ziehen Sie ihn. Doppelklicken Sie, um den Punkt zu entfernen.

  

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

  

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

CSS-Änderungen kopieren (experimentell)

Hinweis:Wenn Sie diese experimentelle Funktion aktivieren möchten, setzen Sie unter Einstellungen > Experimente das Häkchen bei CSS-Änderungen auf dem Tab „Stile“ synchronisieren und aktualisieren Sie die Entwicklertools.

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

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

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

Auf dem Tab Änderungen können Sie außerdem Änderungen nachverfolgen.