Referenz zu CSS-Funktionen

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

Weitere Informationen zu den Grundlagen finden Sie unter CSS ansehen und ändern.

Element auswählen

Im Steuerfeld Elemente in den Entwicklertools können Sie den CSS-Code jeweils für einzelne Elemente ansehen oder ändern.

Auf dem Screenshot ist das in der DOM-Baumstruktur blau hervorgehobene h1-Element das ausgewählte Element. Auf der rechten Seite werden die Stile des Elements auf dem Tab Stile angezeigt. Das Element links ist im Darstellungsbereich hervorgehoben, aber nur, weil die Maus im DOM-Baum darüber bewegt wird.

Eine Anleitung finden Sie unter CSS eines Elements ansehen.

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

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

Preisvergleichsportal ansehen

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

Über Links navigieren

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

• Neben „CSS-Regeln“ auf Stylesheets und CSS-Quellen Über solche Links wird der Bereich Quellen geöffnet. Wenn das Stylesheet minimiert ist, finden Sie weitere Informationen unter Kurze Datei lesbar machen.
• Gehen Sie im Bereich Übernommen von ... auf die übergeordneten Elemente.
• In var()-Aufrufen zu Deklarationen von benutzerdefinierten Eigenschaften.
• In den Kurz-Properties von animation zu @keyframes.
• Links zu weiteren Informationen in den Kurzinfos der Dokumentation.
• Und vieles mehr.

Hier sind einige davon hervorgehoben:

Links können anders gestaltet sein. Wenn du dir nicht sicher bist, ob es sich um einen Link handelt, klicke darauf, um es herauszufinden.

Kurzinfos mit CSS-Dokumentation, Spezifität und Werten für benutzerdefinierte Eigenschaften ansehen

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

CSS-Dokumentation ansehen

Sie können eine Kurzinfo mit einer kurzen CSS-Beschreibung einblenden, indem Sie auf dem Tab Styles den Mauszeiger auf den Namen der Eigenschaft bewegen.

Hinweis:Die Entwicklertools rufen die Beschreibungen für Kurzinfos aus benutzerdefinierten VS Code-Daten ab.

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

Wenn Sie die Kurzinfos deaktivieren möchten, klicken Sie das Kästchen Nicht anzeigen an.

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

Spezifität der Datenansichtsauswahl

Bewegen Sie den Mauszeiger auf einen Selektor, um eine Kurzinfo mit seiner Spezifität anzuzeigen.

Werte benutzerdefinierter Eigenschaften ansehen

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

Ungültige, überschriebene, inaktive und andere CSS-Attribute 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 wurde

Auf dem Tab Stile sehen Sie alle Regeln, die für ein Element gelten, einschließlich der überschriebenen Deklarationen. Wenn Sie keine überschriebenen Deklarationen benötigen, sehen Sie sich auf dem Tab Computed nur den CSS-Code an, 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“.

Preisvergleichsportal-Eigenschaften in alphabetischer Reihenfolge ansehen

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

Übernommene CSS-Eigenschaften ansehen

Klicken Sie auf dem Tab Computed das Kästchen Alle anzeigen an. Weitere Informationen finden Sie unter Nur den CSS-Code anzeigen, der tatsächlich auf ein Element angewendet wird.

Alternativ können Sie auch auf dem Tab Styles nach den 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. Unter Elemente > Stile werden die folgenden @-Regeln in eigenen Abschnitten angezeigt:

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

@property At-Regeln ansehen

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

Bewegen Sie auf dem Tab Stile den Mauszeiger auf den Namen der Eigenschaft. Sie sehen nun eine Kurzinfo mit dem Wert, den Beschreibungen und einem Link zur Registrierung im minimierbaren Bereich @property unten auf dem Tab Stile.

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

@supports At-Regeln ansehen

Auf dem Tab Styles werden die CSS-At-Regeln für @supports angezeigt, wenn sie auf ein Element angewendet werden. Untersuchen Sie beispielsweise das folgende Element:

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

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

@scope At-Regeln ansehen

Auf dem Tab Stile werden die At-Regeln für CSS @scope angezeigt, wenn diese auf ein Element angewendet werden.

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

Hinweis: Die Funktion @scope-At-Regel ist experimentell. Aktivieren Sie zum Testen das Flag Experimental Web Platform features 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.

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

@font-palette-values At-Regeln ansehen

Mit der CSS-At-Regel für @font-palette-values können Sie die Standardwerte der Eigenschaft font-palette anpassen. Unter Elemente > Stile wird dies in einem eigenen Abschnitt 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 überschreiben die Werte der --New-Schriftartpalette die Standardwerte der farbigen Schriftart.

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

Boxmodell eines Elements ansehen

Um das Feldmodell eines Elements anzusehen, rufen Sie den Tab Stile auf und klicken Sie in der Aktionsleiste auf Seitenleiste anzeigen.

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

CSS eines Elements suchen und filtern

Auf den Tabs Styles und Computed können Sie mit dem Feld Filter nach bestimmten CSS-Eigenschaften oder -Werten suchen.

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

Wenn Sie den Tab Berechnet aufrufen möchten, gruppieren Sie die gefilterten Eigenschaften in minimierbaren Kategorien, indem Sie das Kästchen Gruppieren anklicken.

Fokussierte Seite emulieren

Wenn Sie den Fokus von der Seite auf die Entwicklertools verschieben, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. beispielsweise 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 ob es im Fokus wäre.

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.

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

1. Fokus auf das Eingabeelement setzen Darunter erscheint ein weiteres Element.
2. Öffnen Sie die Entwicklertools. Das Entwicklertools-Fenster ist jetzt im Fokus und nicht auf der Seite, sodass das Element wieder verschwindet.
3. Klicken Sie unter Elemente > Stile auf :hov, setzen Sie ein Häkchen bei check_box Hervorgehobene Seite emulieren und prüfen Sie, ob das Eingabeelement ausgewählt ist. Sie können jetzt das untergeordnete Element untersuchen.

Diese Option finden Sie auch im Steuerfeld Rendering.

Pseudoklasse ein-/ausblenden

So schalten Sie eine Pseudoklasse wie :active, :focus, :focus-within, :target, :hover, :visited oder focus-visible um:

1. Wählen Sie ein Element aus.
2. Wechseln Sie im Steuerfeld Unterelemente zum Tab Stile.
3. Klicken Sie auf :hov.
4. Wählen Sie die Pseudoklasse aus, die Sie aktivieren möchten.

Im Darstellungsbereich sehen Sie, dass die Entwicklertools die background-color-Deklaration auf das Element anwenden, auch wenn der Mauszeiger nicht auf das Element bewegt wurde.

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

Übernommene Pseudoelemente für die Hervorhebung ansehen

Mit Pseudoelementen können Sie bestimmte Teile von Elementen gestalten. Hervorhebungs-Pseudoelemente sind Dokumentteile mit dem Status „ausgewählt“ und werden als „hervorgehoben“ gekennzeichnet, um dem Nutzer diesen Status anzuzeigen. Solche Pseudoelemente sind beispielsweise ::selection, ::spelling-error, ::grammar-error und ::highlight.

Wie in der Spezifikation erwähnt, wird bei Konflikten zwischen mehreren Stilen die Kaskade ermittelt.

Hinweis:Um diese Funktion zu aktivieren, führen Sie Chrome mit dem Flag --enable-blink-features=HighlightInheritance aus.

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

1. Überprüfe den Text unten.

   Ich habe den Stil des Pseudoelements „Hervorhebung“ meiner Eltern übernommen. Wähle mich aus!

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

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

Kaskadenebenen ansehen

Kaskadierende Ebenen ermöglichen eine detailliertere Steuerung Ihrer CSS-Dateien, um Stilkonflikte zu vermeiden. Dies ist nützlich bei großen Codebasen, Designsystemen und bei der Verwaltung von Drittanbieter-Stilen in Anwendungen.

Wenn Sie Kaskadenebenen sehen möchten, inspect Sie das nächste Element und öffnen Sie Elemente > Stile.

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

Klicken Sie zum Anzeigen der Ebenenreihenfolge 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 Befehlstaste-Menü.
2. Beginnen Sie mit der Eingabe von Rendering und wählen Sie Show Rendering aus.
3. Wählen Sie im Drop-down-Menü CSS-Medien emulieren die Option Drucken aus.

Gebrauchtes 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 im Fokus sind, um das Befehlsmenü zu öffnen.

2. Beginnen Sie mit der Eingabe von coverage.

   

3. Wählen Sie Abdeckung anzeigen 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 in jeder Datei, die im Browser geladen wird, verwendet wird.

   

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

5. Klicken Sie auf eine CSS-Datei, um in der Vorschau oben eine Aufschlüsselung der verwendeten CSS-Elemente 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 Entwicklertools in Druckvorschaumodus erzwingen.

CSS kopieren

Über ein einziges 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 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. Klicken Sie auf dem Tab Elemente > Stile mit der rechten Maustaste auf eine CSS-Eigenschaft.

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

   • Deklaration kopieren Kopiert die Property und ihren Wert in die CSS-Syntax: css property: value;
   • Property kopieren. Es wird nur der Name property kopiert.
   • Wert kopieren: Kopiert nur 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 die JavaScript-Syntax: js propertyInCamelCase: 'value'
   • Kopieren Sie alle Deklarationen. Kopiert alle Attribute und ihre Werte in die CSS-Regel: css property: value; property: value; ...

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

   • Alle CSS-Änderungen kopieren: Kopiert die Änderungen, die Sie auf dem Tab Styles für alle Deklarationen vornehmen.

   • Berechneten Wert ansehen Dadurch gelangen Sie zum Tab Berechnet.

CSS ä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 beim Seitenaufbau überschreiben:
• Speichern Sie geänderten CSS-Code in den lokalen Quellen in einem Arbeitsbereich.

CSS-Deklaration zu einem Element hinzufügen

Da sich die Reihenfolge der Deklarationen auf den Stil eines Elements auswirkt, lassen sich Deklarationen auf verschiedene Weise hinzufügen:

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

Welchen Workflow sollten Sie verwenden? In den meisten Fällen empfiehlt es sich, den Workflow für die Inline-Deklaration zu verwenden. Inline-Deklarationen sind spezifischer als externe. Daher sorgt der Inline-Workflow dafür, dass die Änderungen im Element wie erwartet wirksam werden. Weitere Informationen zur Spezifität finden Sie unter Selektortypen.

Wenn Sie eine Fehlerbehebung für die Stile eines Elements durchführen und gezielt 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 Styles zwischen die Klammern des Abschnitts element.style. Der Cursor wird fokussiert, sodass Sie Text eingeben können.
3. Geben Sie einen Namen für die Eigenschaft 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-Struktur 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-Struktur werden die Deklarationen im style-Attribut des Elements widergespiegelt.

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 Styles zwischen die Klammern der Stilregel, der Sie die Deklaration hinzufügen möchten. Der Cursor fokussiert und ermöglicht die Eingabe von Text.
3. Geben Sie einen Namen für die Eigenschaft 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.

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 ihn zu ändern. Unter Aufzählbare Werte mit Tastenkombinationen ändern finden Sie Tastenkombinationen zum schnellen Erhöhen oder Verringern eines Werts um 0, 1, 1, 10 oder 100 Einheiten.

Aufzählbare Werte mit Tastenkombinationen ändern

Beim Bearbeiten eines aufzählbaren Werts einer Deklaration, z. B. font-size, können Sie den Wert mit den folgenden Tastenkombinationen um einen festen Betrag erhöhen:

• Drücken Sie Wahltaste + Nach-oben-Taste (Mac) oder Alt + Nach-oben-Taste (Windows, Linux), um den Wert 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 + Nach oben, um den Wert um 10 zu erhöhen
• Drücken Sie 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 jede Instanz von Up, die zuvor erwähnt wurde, durch Down.

Längenwerte ändern

Eingestellt :Diese Funktion wurde in Chrome 123 eingestellt. Um es vorübergehend wieder zu aktivieren, deaktivieren Sie unter Einstellungen > Einstellungen > Tests > check_box Das CSS-Authoring-Tool „<length>“ auf dem Tab „Stile“. Unter crbug/1522657 können Sie uns Feedback geben.

Sie können mit dem Mauszeiger beliebige Eigenschaften in Bezug auf die Länge ändern, z. B. Breite, Höhe, Abstand, Rand oder Rahmen.

So änderst du die Längeneinheit:

1. Wenn Sie den Mauszeiger auf den Namen der Einheit bewegen, sehen Sie, dass sie unterstrichen ist.

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

So ändern Sie den Längenwert:

1. Wenn Sie den Mauszeiger über den Wert der Einheit bewegen, sehen Sie, dass sich der Zeiger in einen horizontalen Doppelpfeil ändert.

2. Horizontal ziehen, 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 Elementen hinzufügen

So fügen Sie einem Element eine Klasse hinzu:

1. Wählen Sie das Element in der DOM-Struktur 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 das helle und dunkle Design emulieren und den automatischen dunklen Modus aktivieren

So aktivieren Sie den automatischen dunklen Modus oder emulieren die Nutzereinstellung des hellen oder dunklen Designs:

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

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

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

Dieses Drop-down-Menü ist eine Tastenkombination für die Optionen CSS-Medienfunktion emulieren prefers-color-scheme 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-Struktur aus.
2. Öffnen Sie den Abschnitt Elementklassen. Weitere Informationen finden Sie unter Klasse zu Elementen hinzufügen. Unter dem Feld Neue Klasse hinzufügen befinden sich alle Klassen, die auf dieses Element angewendet werden.
3. Klicken Sie auf das Kästchen neben der Klasse, 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 . Mit den Entwicklertools wird eine neue Regel unter der Regel element.style eingefügt.

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

Auswählen, 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, dem die Stilregel hinzugefügt werden soll.

Erklärung ein-/ausblenden

So aktivieren oder deaktivieren Sie eine einzelne Deklaration:

1. Wählen Sie ein Element aus.
2. Bewegen Sie den Mauszeiger auf dem Tab Styles auf die Regel, die die Deklaration definiert. Neben jeder Deklaration werden Kästchen angezeigt.
3. Klicken Sie das Kästchen neben der Deklaration an oder entfernen Sie das Häkchen. Wenn du eine Deklaration löschst, wird sie von den Entwicklertools durchgestrichen, um anzuzeigen, dass sie nicht mehr aktiv ist.

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

Die ::view-transition-Pseudoelemente 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 ihre Inhalte am Rastereditor ausrichten

Weitere Informationen finden Sie im entsprechenden Abschnitt im CSS-Raster.

Farben mit der Farbauswahl ändern

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

Winkel mit der Angle Clock ändern

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

So öffnen Sie die Winkeluhr:

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

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

   

   Die kleinen Uhren links von -5deg und 0.25turn sind die Winkelvorschau.

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

   

4. Sie können den Winkelwert ändern, 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“.

Feld- und Textschatten mit dem Schatteneditor ändern

Der Schatteneditor bietet eine grafische Benutzeroberfläche zum Ändern der CSS-Deklarationen text-shadow und box-shadow.

Schatten mit dem Schatteneditor ändern:

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

   

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

   

4. Ändern Sie die Schatteneigenschaften:

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

5. Sehen Sie sich die Änderungen an, die am Element vorgenommen wurden.

Animationen und Übergangs-Timings mit dem Easing-Editor bearbeiten

Der Easing-Editor bietet eine grafische 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 aus, das eine Timingfunktion-Deklaration enthält, z. B. das <body>-Element auf dieser Seite.
2. Auf dem Tab Styles finden Sie das lilafarbene -Symbol neben den Deklarationen transition-timing-function, animation-timing-function oder transition.
3. Klicken Sie auf das Symbol, um den Easing-Editor zu öffnen:

Timings mithilfe von Voreinstellungen 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 Auswahlschaltflächen, um einen Keyword-Wert festzulegen:
   • Linear
   • ease-in-out
   • ease-in
   • ease-out

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

   • Lineare Voreinstellungen: elastic, bounce oder emphasized.
   • Voreinstellungen für Kubische Bézier:

Timing-Keyword	Voreingestellt	Kubische Bézierkurve
Ease-In-Out	Ein/Aus, Sinus	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Ein-/Aus-Taste, quadratisch	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Hinein, kubisch	cubic-bezier(0.65, 0.05, 0.36, 1)
	Langsam raus	cubic-bezier(0.4, 0, 0.2, 1)
	Hinein, hinten	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, kubisch	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 In	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, kubisch	cubic-bezier(0.22, 0.61, 0.36, 1)
	Lineare Abgänge, langsame Eingänge	cubic-bezier(0, 0, 0.2, 1)
	Hinaus, zurück	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Benutzerdefiniertes Timing konfigurieren

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

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

  

• Bei kubischen Bézier-Funktionen müssen Sie einen der Kontrollpunkte an die gewünschte Stelle ziehen.

  

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

(Experimentell) CSS-Änderungen kopieren

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

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

Um eine einzelne CSS-Deklarationsänderung zu kopieren, bewegen Sie den Mauszeiger auf die hervorgehobene Deklaration und klicken Sie auf die Schaltfläche Kopieren.

Wenn Sie alle CSS-Änderungen gleichzeitig zwischen den 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 auf dem Tab Änderungen Änderungen nachverfolgen.