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.
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.
- Wählen Sie ein Element aus.
- 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
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.
@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.
Sehen Sie sich die Regel @scope
in der folgenden Vorschau an:
- Prüfen Sie den Text auf der Karte in der Vorschau.
- 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:
- Prüfen Sie die zweite Textzeile in der Vorschau.
- 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.
@position-try
At-Regeln ansehen
Mit der CSS-Regel @position-try
in Verbindung mit 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.
Unter Elemente > Stile werden position-try-options
-Werte aufgelöst und jede Option mit einem eigenen @position-try --name
-Abschnitt verknüpft.
Sehen Sie sich in der nächsten Vorschau die Werte für position-try-options
und @position-try
an:
- Öffnen Sie in der Vorschau das Untermenü. Klicken Sie dann auf MEIN KONTO und dann auf GESCHÄFT.
- Prüfen Sie das Element in der Vorschau mit
id="submenu"
. - Suchen Sie unter Stile die Eigenschaft
position-try-options
und klicken Sie auf ihren Wert--bottom
. Über den Tab Styles gelangen Sie zum entsprechenden@position-try
-Abschnitt.
Wenn Sie die Werte im Abschnitt 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.
Versuchen Sie, eine fokussierte Seite auf dieser Demoseite zu emulieren:
- Fokus auf das Eingabeelement setzen Darunter erscheint ein weiteres Element.
- Öffnen Sie die Entwicklertools. Das Entwicklertools-Fenster ist jetzt im Fokus und nicht auf der Seite, sodass das Element wieder verschwindet.
- 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:
- Wählen Sie ein Element aus.
- Wechseln Sie im Steuerfeld Unterelemente zum Tab Stile.
- Klicken Sie auf :hov.
- 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.
Um die Übernahme und die Priorität von Regeln besser zu verstehen, können Sie sich die übernommenen Highlights-Pseudoelemente ansehen:
-
Ich habe den Stil des Pseudoelements „Hervorhebung“ meiner Eltern übernommen. Wähle mich aus!
Wählen Sie einen Teil des obigen Textes aus.
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:
- Öffnen Sie das Befehlstaste-Menü.
- Beginnen Sie mit der Eingabe von
Rendering
und wählen SieShow Rendering
aus. - 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.
- 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.
Beginnen Sie mit der Eingabe von
coverage
.Wählen Sie Abdeckung anzeigen aus. Der Tab „Abdeckung“ wird angezeigt.
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.
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:
- Wählen Sie ein Element aus.
- Klicken Sie auf dem Tab Elemente > Stile mit der rechten Maustaste auf eine CSS-Eigenschaft.
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.
- Deklaration kopieren Kopiert die Property und ihren Wert in die CSS-Syntax:
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:
- Wählen Sie ein Element aus.
- Klicken Sie auf dem Tab Styles zwischen die Klammern des Abschnitts element.style. Der Cursor wird fokussiert, sodass Sie Text eingeben können.
- Geben Sie einen Namen für die Eigenschaft ein und drücken Sie die Eingabetaste.
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
undbackground-color
auf das ausgewählte Element angewendet. In der DOM-Struktur werden die Deklarationen imstyle
-Attribut des Elements widergespiegelt.
Deklaration zu einer Stilregel hinzufügen
So fügen Sie einer vorhandenen Stilregel eine Deklaration hinzu:
- Wählen Sie ein Element aus.
- 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.
- Geben Sie einen Namen für die Eigenschaft ein und drücken Sie die Eingabetaste.
- 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
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:
- Wenn Sie den Mauszeiger auf den Namen der Einheit bewegen, sehen Sie, dass sie unterstrichen ist.
Klicken Sie auf den Namen der Einheit, um sie aus dem Drop-down-Menü auszuwählen.
So ändern Sie den Längenwert:
- Wenn Sie den Mauszeiger über den Wert der Einheit bewegen, sehen Sie, dass sich der Zeiger in einen horizontalen Doppelpfeil ändert.
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:
- Wählen Sie das Element in der DOM-Struktur aus.
- Klicken Sie auf .cls.
- Geben Sie den Namen des Kurses in das Feld Neuen Kurs hinzufügen ein.
- 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:
- Klicken Sie auf dem Tab Elemente > Stile auf Gängige Rendering-Emulationen ein-/ausblenden.
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 aufdark
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:
- Wählen Sie das Element in der DOM-Struktur aus.
- Ö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.
- 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:
- Wählen Sie ein Element aus.
- 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:
- Wählen Sie ein Element aus.
- Bewegen Sie den Mauszeiger auf dem Tab Styles auf die Regel, die die Deklaration definiert. Neben jeder Deklaration werden Kästchen angezeigt.
- 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:
- Wählen Sie ein Element mit Winkeldeklaration aus.
Suchen Sie auf dem Tab Styles die Deklaration
transform
oderbackground
, die Sie ändern möchten. Klicken Sie neben dem Wert für den Winkel auf das Feld Winkelvorschau.Die kleinen Uhren links von
-5deg
und0.25turn
sind die Winkelvorschau.Klicken Sie auf die Vorschau, um die Winkeluhr zu öffnen.
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.
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:
Wählen Sie ein Element mit einer Schattendeklaration aus. Wählen Sie beispielsweise das nächste Element aus.
Suchen Sie auf dem Tab Styles nach dem Schattensymbol neben der Deklaration
text-shadow
oderbox-shadow
.Klicke auf das Schattensymbol, um den Schatteneditor zu öffnen.
Ä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.
- Typ (nur für
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:
- Wählen Sie ein Element aus, das eine Timingfunktion-Deklaration enthält, z. B. das
<body>
-Element auf dieser Seite. - Auf dem Tab Styles finden Sie das lilafarbene -Symbol neben den Deklarationen
transition-timing-function
,animation-timing-function
odertransition
. - 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:
- Klicken Sie im Easing-Editor auf eine der Auswahlschaltflächen, um einen Keyword-Wert festzulegen:
- Linear
- ease-in-out
- ease-in
- ease-out
Klicken Sie in der Voreinstellungen auf die Schaltflächen oder , um eine der folgenden Voreinstellungen auszuwählen:
- Lineare Voreinstellungen:
elastic
,bounce
oderemphasized
. - Voreinstellungen für Kubische Bézier:
- Lineare Voreinstellungen:
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
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.