Referenz zu CSS-Features

Entdecken Sie neue Workflows in der folgenden umfassenden Referenz der Microsoft Edge DevTools-Features im Zusammenhang mit dem Anzeigen und Ändern von CSS.

Informationen zu den Grundlagen finden Sie unter Erste Schritte beim Anzeigen und Ändern von CSS.

Ausführlicher Inhalt:

Auswählen eines Elements

Mit dem Tool Elemente in DevTools können Sie jeweils die CSS eines Elements anzeigen oder ändern. Das ausgewählte Element ist in der DOM-Struktur hervorgehoben. Die Stile des Elements werden im Bereich Formatvorlagen angezeigt. Ein Tutorial finden Sie unter Anzeigen des CSS für ein Element.

Beispiel für ein ausgewähltes Element

In der obigen Abbildung:

  • Das h1 in der DOM-Struktur hervorgehobene Element ist das ausgewählte Element.
  • Auf der rechten Seite werden die Stile des Elements im Bereich Formatvorlagen angezeigt.
  • Auf der linken Seite ist das Element im Viewport hervorgehoben, aber nur, weil die Maus derzeit in der DOM-Struktur darauf zeigt:

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

  • Klicken Sie auf einer gerenderten Webseite mit der rechten Maustaste auf ein Seitenelement, und klicken Sie dann auf Untersuchen.

  • Klicken Sie in DevTools auf Element auswählen (Element auswählen), oder drücken Sie STRG+UMSCHALT+C (Windows, Linux) oder BEFEHL+UMSCHALT+C (macOS), und klicken Sie dann im Viewport auf das Element.

  • Klicken Sie in DevTools auf das -Element in der DOM-Struktur.

  • Führen Sie in DevTools eine Abfrage wie document.querySelector('p') in der Konsole aus, klicken Sie mit der rechten Maustaste auf das Ergebnis, und wählen Sie dann Im Bereich Elemente anzeigen aus.

CSS anzeigen

Verwenden Sie die RegisterkartenElementformatvorlagen> und Berechnet, um CSS-Regeln anzuzeigen und CSS-Probleme zu diagnostizieren.

Auf der Registerkarte Formatvorlagen werden an verschiedenen Stellen Links zu verschiedenen anderen Stellen angezeigt, einschließlich, aber nicht beschränkt auf:

Links können anders formatiert werden. Wenn Sie nicht sicher sind, ob es sich um einen Link handelt, versuchen Sie, darauf zu klicken, um dies herauszufinden.

Zum Beispiel:

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zur To Do-App .

  2. Klicken Sie mit der rechten Maustaste auf Leerzeichen oberhalb der Zeichenfolge "Aufgabe hinzufügen", und klicken Sie dann auf Untersuchen.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Wählen Sie die Registerkarte Formatvorlagen aus.

    Es werden verschiedene Arten von Links angezeigt:

    Verschiedene Links hervorgehoben

Anzeigen von QuickInfos mit CSS-Dokumentation, Spezifität und benutzerdefinierten Eigenschaftswerten

Im Tool Elemente werden auf der Registerkarte Formatvorlagen QuickInfos mit nützlichen Informationen angezeigt, wenn Sie auf bestimmte Elemente zeigen.

CSS-Dokumentation anzeigen

So zeigen Sie die Beschreibung einer CSS-Eigenschaft in einer QuickInfo an:

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . to Do-App.

  2. Klicken Sie mit der rechten Maustaste auf Leerzeichen oberhalb der Zeichenfolge "Aufgabe hinzufügen", und klicken Sie dann auf Untersuchen.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Wählen Sie die Registerkarte Formatvorlagen aus.

  4. Zeigen Sie auf einen CSS-Eigenschaftsnamen, z padding:. B. .

    Eine QuickInfo wird angezeigt:

    QuickInfo mit Dokumentation zu einer CSS-Eigenschaft

    DevTools ruft die Beschreibungen für QuickInfos aus dem Benutzerdefinierten Datenrepository von VS Code ab.

  5. Klicken Sie in der QuickInfo auf den Link Weitere Informationen .

    Die CSS-Referenzseite für die Eigenschaft bei MDN wird angezeigt, z. B. diepadding CSS-Eigenschaft.

So deaktivieren Sie die CSS-QuickInfos:

  • Aktivieren Sie in der QuickInfo das Kontrollkästchen Nicht anzeigen .

So aktivieren Sie CSS-QuickInfos erneut:

  1. Wählen Sie in DevTools die Option DevTools anpassen und steuern aus, und wählen Sie dann Einstellungen aus.

  2. Wählen Sie in der Gliederung auf der linken Seite Einstellungen aus, und scrollen Sie dann nach unten zum Abschnitt Elemente .

  3. Aktivieren Sie das Kontrollkästchen QuickInfo zur CSS-Dokumentation anzeigen .

Selektorspezifität anzeigen

Zeigen Sie auf eine CSS-Auswahl, um eine QuickInfo anzuzeigen, die die Spezifitätsgewichtung des Selektors anzeigt, z. B.: Spezifität: (0,0,1):

Zum Beispiel:

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . to Do-App.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und klicken Sie dann auf Untersuchen.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Wählen Sie in der DOM-Struktur das <body> -Element aus.

  4. Zeigen Sie auf der Registerkarte Formatvorlagen auf den body CSS-Selektor.

    Es wird eine QuickInfo mit Spezifität angezeigt: (0,0,1):

    Die QuickInfo mit Spezifitätsgewichtung eines übereinstimmend ausgewählten Selektors

Siehe auch:

Anzeigen der Werte benutzerdefinierter Eigenschaften

Zeigen Sie auf eine var(--custom-property) Funktion, um den Wert der benutzerdefinierten Eigenschaft in einer QuickInfo anzuzeigen.

Zum Beispiel:

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . to Do-App.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und klicken Sie dann auf Untersuchen.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Wählen Sie in der DOM-Struktur das <body> -Element aus.

  4. Zeigen Sie auf der Registerkarte Formatvorlagen in der body CSS-Regel auf --spacing.

    Der Wert .3rem wird in einer QuickInfo angezeigt:

    Der Wert einer benutzerdefinierten Eigenschaft in einer QuickInfo

Siehe auch:

Anzeigen des externen Stylesheets, in dem eine Regel definiert ist

Klicken Sie im Bereich Formatvorlagen auf den Link neben einer CSS-Regel, um das externe Stylesheet zu öffnen, das die Regel definiert. Das Stylesheet wird im Bereich Editor des Quellentools geöffnet.

Wenn das Stylesheet minimiert ist, klicken Sie unten im Editorbereich auf die Schaltfläche Format (Format). Weitere Informationen finden Sie unter Neuformatieren einer minimierten JavaScript-Datei mit Pretty-Print in JavaScript-Debugfeatures.

Anzeigen des Stylesheets, in dem eine Regel definiert ist

In der obigen Abbildung gelangen Sie nach dem Klicken zu to-do-styles.css:5Zeile 5 von to-do-styles.css, wo die h1 CSS-Regel definiert ist.

Anzeigen von ungültigen, überschriebenen, inaktiven und anderen CSS-Dateien

Auf der Registerkarte Formatvorlagen werden viele Arten von CSS-Problemen erkannt und auf unterschiedliche Weise hervorgehoben.

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

Im Bereich Formatvorlagen werden alle Regeln angezeigt, die für ein Element gelten, einschließlich überschriebener Deklarationen. Wenn Sie nicht an überschriebenen Deklarationen interessiert sind, verwenden Sie den Bereich Berechnet , um nur die CSS anzuzeigen, die tatsächlich auf ein Element angewendet wird.

Zum Beispiel:

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . to Do-App.

  2. Klicken Sie mit der rechten Maustaste auf die Überschrift Meine Aufgaben, und klicken Sie dann auf Untersuchen.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist und das <h1> Element in der DOM-Struktur ausgewählt ist.

  3. Wählen Sie im Tool Elemente die Registerkarte Berechnet aus.

    Die CSS-Eigenschaften, die auf das ausgewählte Element angewendet werden, werden angezeigt:

    Der Bereich

    Ein Eigenschaftsname und -wert in Kursivschrift geben einen Wert an, der zur Laufzeit berechnet wird.

  4. Aktivieren Sie das Kontrollkästchen Alle anzeigen , um alle Eigenschaften anzuzeigen.

Anzeigen von CSS-Eigenschaften in alphabetischer Reihenfolge

Verwenden Sie den Bereich Berechnet . Siehe Nur das CSS anzeigen, das tatsächlich auf ein Element angewendet wird, weiter oben.

Anzeigen geerbter CSS-Eigenschaften

Aktivieren Sie das Kontrollkästchen Alle anzeigen im Bereich Berechnet . Siehe Nur das CSS anzeigen, das tatsächlich auf ein Element angewendet wird, weiter oben.

Anzeigen von CSS at-rules

At-rules sind CSS-Anweisungen, mit denen Sie das CSS-Verhalten steuern können.

Im Tool Elemente werden auf der Registerkarte Formatvorlagen die folgenden at-rules in dedizierten Abschnitten angezeigt:

Anzeigen @property von Regeln

Mit @property css at-rule können Sie benutzerdefinierte CSS-Eigenschaften bestimmter Typen in einem Stylesheet definieren.

Zeigen Sie auf der Registerkarte Formatvorlagen auf den Namen einer solchen Eigenschaft, um eine QuickInfo anzuzeigen, die Folgendes enthält:

  • Der Wert der Eigenschaft, z 20%. B. .
  • Die Deskriptoren der Eigenschaft, z. B.: initial value: 40%
  • Ein Link zum Anzeigen einer registrierten Eigenschaft mit der zugehörigen Registrierung im reduzierbaren @property Abschnitt unten auf der Registerkarte Formatvorlagen .

Zum Beispiel:

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Seite, auf der die @property at-rule verwendet wird, z. B. Regeln anzeigen@property.

  2. Klicken Sie mit der rechten Maustaste auf den Absatz Element 3 , und klicken Sie dann auf Untersuchen.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Zeigen Sie auf der Registerkarte Formatvorlagen auf diese var(--itemSize) Funktion:

    QuickInfo für die at-property CSS at-rule

    Die QuickInfo enthält Folgendes:

    • Der Wert der Eigenschaft, z 100px. B. .
    • Die Deskriptoren der Eigenschaft, z. B. der Anfangswert.
    • Ein Link zum Anzeigen einer registrierten Eigenschaft .

  4. Klicken Sie auf den Link Registrierte Eigenschaft anzeigen .

    Der erweiterte @property Abschnitt wird weiter unten auf der Registerkarte Formatvorlagen angezeigt:

    --itemSize im Abschnitt

Um eine @property Regel zu bearbeiten, doppelklicken Sie auf deren Namen oder Wert. Siehe Ändern eines Deklarationsnamens oder -werts weiter unten.

Siehe auch:

Anzeigen @supports von Regeln

Auf der Registerkarte Formatvorlagen werden die @supports CSS-Regeln angezeigt, wenn sie auf ein Element angewendet werden.

So zeigen Sie beispielsweise die Regel an @supports :

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Seite, die die @supports at-Rule verwendet, z. B. Regeln anzeigen@supports.

  2. Klicken Sie mit der rechten Maustaste auf "Ich unterstütze den CIE LAB-Farbraum!", und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet. Im Tool Elemente in der DOM-Struktur ist das <div class="box"> Element ausgewählt. Auf der Registerkarte @supportsFormatvorlagen werden CSS-Deklarationen aufgelistet:

    Ergebnis von HTML für at-supports at-rule

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

  • Wenn Ihr Browser die lab() Funktion nicht unterstützt, ist das Element lila.

Um zu sehen, welche Browserversionen den CIE LAB-Farbraum unterstützen, suchen Sie Caniuse.com nach "lab".

Anzeigen @scope von Regeln

Auf der Registerkarte Formatvorlagen werden CSS @scope at-rules angezeigt, wenn sie auf ein Element angewendet werden.

Mit @scope den at-rules können Sie CSS-Formatvorlagen festlegen, d. h. formatvorlagen explizit auf bestimmte Elemente anwenden. Weitere Informationen finden Sie @scope unter CSS at-rule bei MDN.

So zeigen Sie die Regel an @scope :

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Seite, die die @scope at-rule verwendet, z. B. die Demo Zum Anzeigen @scope von Regeln :

    Ergebnis der HTML-& CSS für die at-scope at-rule

  2. Klicken Sie mit der rechten Maustaste auf "I'm the text that lives on a Karte", und wählen Sie dann Inspect (Überprüfen) aus.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Wählen Sie die Registerkarte Formatvorlagen aus.

  4. Überprüfen Sie die @scope Regel:

    Die Bereichsregel auf der Registerkarte Formatvorlagen

    In diesem Beispiel setzt die @scope Regel (Hintergrundfarbe = Pflaume) die globale CSS-Deklaration background-color (aquamarin) für jedes <p> Element außer Kraft, das sich in einem Element (z. B. einem <div>) befindet, das über eine card -Klasse verfügt.

    Um die @scope Regel zu bearbeiten, doppelklicken Sie auf die Regel:

  5. Doppelklicken Sie auf der Registerkarte Formatvorlagen auf die Pflaume, drücken Sie ENTF, und wählen Sie dann Beige aus.

    Der Text im Karte auf der Demo-Webseite wechselt vom Pflaumenhintergrund in den beigen Hintergrund.

Anzeigen @font-palette-values von Regeln

Mit @font-palette-values-CSS at-rule können Sie die Standardwerte der font-palette Eigenschaft anpassen (außer Kraft setzen). Im Tool Elemente zeigt die Registerkarte Formatvorlagen diese at-rule in einem dedizierten Abschnitt an.

So zeigen Sie die CSS-Regel @font-palette-values an:

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Seite, die die @font-palette-values at-rule verwendet, z. B. die Demo Zum Anzeigen @font-palette-values von Regeln .

  2. Klicken Sie mit der rechten Maustaste auf "Neue Farben", und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Suchen Sie auf der Registerkarte Formatvorlagen nach der @font-palette-values CSS-Regel:

    Die At-font-palette-values-Regel auf der Registerkarte Formatvorlagen

    In diesem Beispiel überschreiben die Werte der --New Schriftartpalette die Standardwerte der farbigen Schriftart.

    Um einen benutzerdefinierten Wert zu bearbeiten, doppelklicken Sie wie folgt darauf:

  4. Doppelklicken Sie in der @font-palette-values CSS-Regel in der override-colors -Eigenschaft auf 0 gold, 1 red, und geben Sie ein 0 blue, 1 red.

    Auf der überprüften Webseite werden "neue Farben" jetzt blau und rot gerendert.

Anzeigen @position-try von Regeln

Mit @position-try der CSS-Regel und der position-try-fallbacks -Eigenschaft können Sie alternative Ankerpositionen für Elemente definieren.

Im Tool Elemente löst die Registerkarte Formatvorlagen Folgendes auf und verknüpft sie:

  • Die position-try-fallbacks Eigenschaftswerte (oder position-try-options Eigenschaftswerte) sind mit einem dedizierten @position-try --name CSS-Regelabschnitt verknüpft.

  • Die position-anchor Eigenschaftswerte und anchor() Argumente sind mit den entsprechenden Elementen verknüpft, die Attribute aufweisen popovertarget .

Überprüfen Sie beispielsweise die position-try-fallbacks Werte und @position-try CSS-Regeln wie folgt:

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Seite, die die Werte und @position-try at-rule position-try-fallbacks verwendet, z. B. die Demo Zum Anzeigen @position-try von Regeln.

  2. Öffnen Sie auf der gerenderten Webseite das Untermenü. Klicken Sie also auf IHR KONTO und dann auf STOREFRONT.

    Das Untermenü wird mit einer Liste von Befehlen angezeigt: LISTINGS, SPECIAL OFFERS, SIGN OUT.

  3. Klicken Sie im Untermenü mit der rechten Maustaste über LISTINGS, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist. Das Untermenüelement <ul id="submenu"> ist in der DOM-Struktur ausgewählt:

    Ergebnis der HTML-& CSS für at-position-try at-rule

  4. Suchen Sie auf der Registerkarte Formatvorlagen in der #submenu CSS-Regel nach der position-try-fallbacks -Eigenschaft, und klicken Sie auf ihren --bottom Wert.

    Die Registerkarte Formatvorlagen führt einen Bildlauf nach unten zum entsprechenden @position-try Abschnitt durch:

    Der Abschnitt at-position-try auf der Registerkarte Formatvorlagen

  5. Klicken Sie auf der Registerkarte Formatvorlagen in der #submenu CSS-Regel auf den --submenu Link in einer der folgenden Eigenschaften:

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    Die DOM-Struktur wählt das Element (<button popovertarget="submenu">) aus, das über den entsprechenden popovertarget Attributwert (popovertarget="submenu") verfügt, und auf der Registerkarte Formatvorlagen wird der CSS-Code des Elements angezeigt:

    Das in der DOM-Struktur ausgewählte Schaltflächenelement und dessen CSS

Um einen Wert zu bearbeiten, doppelklicken Sie auf den Wert.

Siehe auch:

Anzeigen des Feldmodells eines Elements

Um das Feldmodell eines Elements anzuzeigen, wechseln Sie zum Bereich Formatvorlagen , und scrollen Sie nach unten.

Um einen Wert zu ändern, doppelklicken Sie auf den Wert.

In der folgenden Abbildung zeigt das Box Model-Diagramm im Bereich Formatvorlagen das Feldmodell für das aktuell ausgewählte h1 Element:

Das Box-Modelldiagramm

Siehe auch:

Suchen und Filtern der CSS eines Elements

Verwenden Sie das Textfeld Filter in den Bereichen Formatvorlagen und Berechnet, um nach bestimmten CSS-Eigenschaften oder -Werten zu suchen.

Um auch geerbte Eigenschaften im Bereich Berechnet zu durchsuchen, aktivieren Sie das Kontrollkästchen Alle anzeigen .

In der folgenden Abbildung wird der Bereich Formatvorlagen so gefiltert, dass nur Regeln angezeigt werden, die die Suchabfrage colorenthalten.

Filtern des Bereichs

In der folgenden Abbildung wird der Bereich Berechnet so gefiltert, dass nur Deklarationen angezeigt werden, die die Suchabfrage 100%enthalten:

Filtern des Bereichs

Emulieren einer fokussierten Seite

Wenn Sie den Fokus von der überprüften Webseite zu DevTools wechseln, werden einige Überlagerungselemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. Zum Beispiel:

  • Dropdownlisten.
  • Menüs.
  • Datumsauswahl.

Führen Sie eine der folgenden Schritte aus, um ein Element so zu debuggen, als ob die Seite den Fokus hat:

  • Klicken Sie im Tool Elemente auf der Registerkarte Formatvorlagen auf :hov (Elementzustand umschalten), und aktivieren Sie dann das Kontrollkästchen Emulate a focused page (Seite mit Relevanz emulieren ).
  • Aktivieren Sie im Renderingtool das Kontrollkästchen Emulate a focused page (Seite mit Relevanz emulieren ).

Vorsicht: Wenn diese Option aktiviert ist, wird auf document.visibilityStatevisible festgelegt, und das visibilitychange Ereignis wird nicht ausgelöst. Weitere Informationen finden Sie unter Seitensichtbarkeits-API bei MDN.

So emulieren Sie eine fokussierte Seite:

  1. Öffnen Sie die Demo emulieren einer fokussierten Seite in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie auf das Eingabetextfeld. Oder drücken Sie die TAB-TASTE , um den Fokus auf das Eingabetextfeld zu setzen.

    Unter dem Eingabetextfeld wird ein weiteres Element mit der Meldung "Diese Meldung wird nur angezeigt, wenn das Textfeld den Fokus hat."

  3. Klicken Sie mit der rechten Maustaste auf das Eingabetextfeld, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet, und das Nachrichtenelement verschwindet. Das DevTools-Fenster befindet sich jetzt im Fokus und nicht mehr auf der überprüften Webseite, sodass das Meldungselement nicht mehr angezeigt wird.

  4. Klicken Sie im Tool Elemente auf der Registerkarte Formatvorlagen auf :hov (Elementzustand umschalten), und aktivieren Sie dann das Kontrollkästchen Emulate a focused page (Seite mit Relevanz emulieren ).

  5. Stellen Sie sicher, dass das Eingabetextfeldelement <input id="textBox" type="text"> weiterhin ausgewählt ist.

    Unter dem Eingabetextfeld wird das Nachrichtenelement unter dem Eingabetextfeld wieder angezeigt.

    Sie können jetzt das Nachrichtenelement überprüfen, das sich unterhalb des Eingabetextfelds befindet, obwohl DevTools anstelle der überprüften Seite den Fokus hat:

    Das Kontrollkästchen Emulate a focused page (Emulieren einer fokussierten Seite) ist aktiviert.

  6. Bereinigung: Klicken Sie im Tool Elemente auf der Registerkarte Formatvorlagen auf :hov (Elementstatus umschalten), und deaktivieren Sie dann das Kontrollkästchen Emulate a focused page (Seite mit Relevanz emulieren ).

Das Kontrollkästchen Emulate a focused page (Seite mit Fokus emulieren ) wird auch im Renderingtool angezeigt. Siehe Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder Sehschwächen aussieht.

Siehe auch:

Umschalten einer Pseudoklasse

So schalten Sie eine Pseudoklasse um:

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . to Do-App.

  2. Geben Sie eine Aufgabe ein, z. B. Aufgabe 1.

  3. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  4. Wählen Sie das Tool Elemente aus.

  5. Wählen Sie in der DOM-Struktur das <li class="task"> -Element aus.

  6. Wählen Sie die Registerkarte Formatvorlagen aus.

  7. Klicken Sie oben rechts auf :hov.

    Kontrollkästchen werden angezeigt.

  8. Aktivieren Sie das Kontrollkästchen für die Pseudoklasse, die Sie aktivieren möchten, z :hover. B. :

    Auswählen der Pseudoklasse :hover

    Auf der gerenderten Webseite wird der Kreis neben dem Aufgabennamen mit einem Häkchen gefüllt, und ein rotes X in einem roten Kreis wird auf der rechten Seite der Aufgabe angezeigt, als würde auf das Element gezeigt, obwohl nicht mit dem Mauszeiger auf das Element gezeigt wird.

Auf der Registerkarte Formatvorlagen werden die folgenden Pseudoklassen für alle Elemente angezeigt:

Darüber hinaus verfügen einige Elemente möglicherweise über elementspezifische Pseudoklassen. Wenn Sie ein solches Element auswählen, wird auf der Registerkarte Formatvorlagen der Abschnitt Bestimmter Elementzustand erzwingen angezeigt, den Sie erweitern und aktivieren können, die für das Element spezifisch sind, z. B. das Kontrollkästchen :read-write :

Der Abschnitt

Ein interaktives Tutorial finden Sie unter Hinzufügen eines Pseudozustands zu einer Klasse.

Anzeigen geerbter Pseudoelemente zur Hervorhebung

Mit Pseudoelementen können Sie bestimmte Teile von Elementen formatieren. Hervorhebungs-Pseudoelemente sind Dokumentteile mit einem "ausgewählten" status und werden als "hervorgehoben" formatiert, um diese status für den Benutzer anzugeben.

Solche Pseudoelemente sind beispielsweise:

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

Wenn mehrere Stile in Konflikt geraten, bestimmt die CSS-Kaskade den Gewinnstil. Weitere Informationen finden Sie unter Einführung in die CSS-Kaskade bei MDN.

Um die Vererbung und Priorität der Regeln besser zu verstehen, zeigen Sie das geerbte Highlight-Pseudoelement in der folgenden Demo an.

So zeigen Sie die geerbten Pseudoelemente der Hervorhebung an:

  1. Wechseln Sie zur Demo Pseudoelemente hervorheben in einem neuen Fenster oder einer neuen Registerkarte.

  2. Wählen Sie einen Teil des Texts "I inherited the style of my parent's highlight pseudo-element. Wähle mich aus!"

    Der markierte Text ändert sich in roten Text auf gelbem Hintergrund.

  3. Klicken Sie mit der rechten Maustaste auf den Text "I inherited the style of my parent's highlight pseudo-element. Wählen Sie mich aus!", und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet. Im Tool Elemente wird auf der Registerkarte Formatvorlagen der Abschnitt angezeigt: Geerbt von ::selection pseudo von div.text-parent:

    Anzeigen des Abschnitts

  4. Wählen Sie in der DOM-Struktur das <div class="text-parent"> -Element aus.

    Auf der Registerkarte Formatvorlagen wird der Abschnitt angezeigt: Pseudoelement ::selection:

    Anzeigen des Pseudoabschnitts auf der Registerkarte Formatvorlagen

Siehe auch:

Anzeigen von Kaskadiertenebenen

Kaskadierende Ebenen ermöglichen eine explizitere Steuerung Ihrer CSS-Dateien, um Stil-Spezifitätskonflikte zu verhindern. Dies ist nützlich für:

  • Große Codebasen.
  • Systementwurf.
  • Verwalten von Formatvorlagen von Drittanbietern.

So zeigen Sie Kaskadenebenen an:

  1. Wechseln Sie zu einer Webseite, die Kaskadenebenen verwendet, z. B. die Demo "Cascade layers ".

  2. Klicken Sie mit der rechten Maustaste auf das Element "Meine Stile sind ebenen!" und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Wählen Sie im Tool Elemente die Registerkarte Formatvorlagen aus.

  4. Zeigen Sie auf der Registerkarte Formatvorlagen die drei Kaskadenebenen und deren Stile an: page, component und base:

    Kaskadierende Ebenen

  5. Klicken Sie zum Anzeigen der Ebenenreihenfolge auf den Ebenennamen (Seite, Komponente oder Basis). Oder klicken Sie auf das Symbol CSS-Ebenenansicht umschalten SymbolCSS-Ebenen ansicht umschalten .

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

Siehe auch:

Anzeigen einer Seite im Druckmodus

So zeigen Sie eine Seite im Druckmodus an:

  1. Navigieren Sie zu einer Webseite.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Drücken Sie ESC ein- oder zweimal, damit die Symbolleiste Schnellansicht unten in DevTools angezeigt wird.

  4. Wählen Sie auf der Symbolleiste Schnellansichtdie Option Weitere Tools (+) aus.

  5. Wählen Sie das Renderingtool aus.

    Das Renderingtool wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

  6. Klicken Sie im Renderingtool auf die Dropdownliste CSS-Medientyp emulieren , und wählen Sie dann Drucken aus.

    Die Webseite wird wie gedruckt gerendert.

  7. Wenn Sie fertig sind, klicken Sie im Renderingtool auf die Dropdownliste Emulate CSS media type (CSS-Medientyp emulieren ), und wählen Sie dann Keine Emulation aus.

Anzeigen verwendeter und nicht verwendeter CSS-Dateien mit dem Abdeckungstool

Das Abdeckungstool zeigt Ihnen, welche CSS eine Seite tatsächlich verwendet.

  1. Öffnen Sie das Befehlsmenü, indem Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS) drücken, während DevTools den Fokus hat.

  2. Beginnen Sie mit coverageder Eingabe von , und wählen Sie dann Abdeckung anzeigen aus:

    Öffnen des Abdeckungstools über das Befehlsmenü

    Das Abdeckungstool wird angezeigt:

    Das Abdeckungstool

  3. Klicken Sie auf Instrumentierungsabdeckung starten, und aktualisieren Sie die Seite (Instrumentierungsabdeckung starten und Seite aktualisieren). Die Seite wird aktualisiert, und das Abdeckungstool bietet eine Übersicht darüber, wie viel CSS (und JavaScript) von jeder Datei verwendet wird, die der Browser lädt. Grün steht für verwendetes CSS. Rot stellt nicht verwendete CSS-Dateien dar.

    Eine Übersicht darüber, wie viel CSS (und JavaScript) verwendet und nicht verwendet wird:

    Eine Übersicht darüber, wie viel CSS (und JavaScript) verwendet und nicht verwendet wird

  4. Um eine zeilenweise Aufschlüsselung der verwendeten CSS-Dateien anzuzeigen, klicken Sie auf eine CSS-Datei.

    In der folgenden Abbildung werden die Zeilen 145 bis 147 und 149 bis 151 von nicht verwendet, während die b66bc881.site-ltr.css Zeilen 163 bis 166 verwendet werden:

    Eine zeilenweise Aufschlüsselung verwendeter und nicht verwendeter CSS-Dateien

Druckvorschaumodus erzwingen

Weitere Informationen finden Sie unter Erzwingen von DevTools in den Druckvorschaumodus.

CSS kopieren

Über ein einzelnes Dropdownmenü auf der Registerkarte Formatvorlagen können Sie separate CSS-Regeln, Deklarationen, Eigenschaften oder Werte kopieren. Weitere Informationen finden Sie unter Grundlagen der CSS-Syntax in Was ist CSS? bei MDN.

Darüber hinaus können Sie CSS-Eigenschaften in der JavaScript-Syntax kopieren. Diese Option ist praktisch, wenn Sie CSS-in-JS-Bibliotheken verwenden. Weitere Informationen finden Sie unter Formatbearbeitung für CSS-in-JS-Frameworks.

So kopieren Sie CSS:

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, die CSS verwendet, z. B . die To-Do-App.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und klicken Sie dann auf Untersuchen.

    DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist.

  3. Wählen Sie in der DOM-Struktur ein Element aus, z <h1>. B. .

  4. Klicken Sie auf der Registerkarte Formatvorlagen in einer CSS-Regel mit der rechten Maustaste auf eine CSS-Eigenschaft, z text-align: center. B. :

    CSS-Dropdownmenü kopieren

  5. Wählen Sie ein Kontextmenüelement aus:

    • Deklaration kopieren. Kopiert die Eigenschaft und ihren Wert in die CSS-Syntax: property: value;

    • Copy-Eigenschaft. Kopiert nur den property Namen.

    • Kopierwert. Kopiert nur die value.

    • Regel kopieren. Kopiert die gesamte CSS-Regel: selector[, selector] { property: value; property: value; ... }

    • Kopieren Sie die Deklaration als JS. Kopiert die Eigenschaft und ihren Wert in die JavaScript-Syntax: propertyInCamelCase: 'value'

    • Kopieren Sie alle Deklarationen. Kopiert alle Eigenschaften und deren Werte in der CSS-Syntax: property: value; property: value; ...

    • Kopieren Sie alle Deklarationen als JS. Kopiert alle Eigenschaften und deren Werte in die JavaScript-Syntax: propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • Kopieren Sie alle CSS-Änderungen. Kopiert die Änderungen, die Sie auf der Registerkarte Formatvorlagen vornehmen, in alle Deklarationen. Dieses Menüelement wird bedingt angezeigt.

    • Zeigen Sie den berechneten Wert an. Führt Sie zur Registerkarte Berechnet ; Siehe Nur das CSS anzeigen, das tatsächlich auf ein Element angewendet wird, oben.

CSS ändern

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

Darüber hinaus haben Sie folgende Möglichkeiten:

Zwei Möglichkeiten zum Hinzufügen einer CSS-Deklaration zu einem Element

Die Reihenfolge der Deklarationen wirkt sich auf die Formatierung eines Elements aus. Sie können Deklarationen entweder durch Hinzufügen einer Inlinedeklaration oder durch Hinzufügen einer Deklaration zu einer Stilregel hinzufügen. Diese beiden Ansätze werden in den folgenden Abschnitten beschrieben.

Hinzufügen einer Inline-CSS-Deklaration zu einem Element

Das Hinzufügen einer Inlinedeklaration entspricht dem Hinzufügen eines style Attributs zum HTML-Code eines Elements. In den meisten Szenarien möchten Sie wahrscheinlich Inlinedeklarationen verwenden.

Inlinedeklarationen weisen eine höhere Spezifität als externe Deklarationen auf, sodass die Verwendung von Inlinedeklarationen sicherstellt, dass die Änderungen in Ihrem spezifischen erwarteten Element wirksam werden. Weitere Informationen zur Spezifität finden Sie unter Selektortypen in Spezifität bei MDN.

So fügen Sie eine Inlinedeklaration hinzu:

  1. Wählen Sie ein Element aus.

  2. Klicken Sie im Bereich Formatvorlagen zwischen den Klammern des Abschnitts element.style . Der Cursor konzentriert sich, sodass Sie Text eingeben können.

  3. Geben Sie einen Eigenschaftsnamen ein, und drücken Sie die EINGABETASTE.

  4. Geben Sie einen gültigen Wert für diese Eigenschaft ein, und drücken Sie die EINGABETASTE. In der DOM-Struktur wurde dem -Element ein style -Attribut hinzugefügt.

Alternativ können Sie den Wert in das Eigenschaftenfeld eingeben. DevTools schlägt dann eine Liste der übereinstimmenden Eigenschafts-Wert-Paare vor, aus der Sie auswählen können. Wenn Sie beispielsweise in das Eigenschaftenfeld eingebenbold, schlägt DevTools und font-weight: bolder als mögliche Regeln vorfont-weight: bold. Drücken Sie die EINGABETASTE , um die Regel anzuwenden.

In der folgenden Abbildung wurden die margin-top Eigenschaften und background-color auf das ausgewählte Element angewendet. In der DOM-Struktur werden die Deklarationen im -Attribut des style Elements wiedergegeben.

Hinzufügen von Inlinedeklarationen

Hinzufügen einer CSS-Deklaration zu einer vorhandenen Stilregel

Wenn Sie die Stile eines Elements debuggen und speziell testen müssen, was geschieht, wenn eine Deklaration an verschiedenen Stellen definiert wird, fügen Sie einer vorhandenen Formatvorlagenregel eine Deklaration hinzu.

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

  1. Wählen Sie ein Element aus.

  2. Klicken Sie im Bereich Formatvorlagen zwischen den Klammern der Formatvorlagenregel, der Sie die Deklaration hinzufügen möchten. Der Cursor konzentriert sich, sodass Sie Text eingeben können.

  3. Geben Sie einen Eigenschaftsnamen ein, und drücken Sie die EINGABETASTE.

  4. Geben Sie einen gültigen Wert für diese Eigenschaft ein, und drücken Sie die EINGABETASTE.

Hinzufügen einer Deklaration zu einer Stilregel

Ändern eines Deklarationsnamens oder -werts

Um den Namen einer CSS-Deklaration zu ändern, doppelklicken Sie auf den Namen der Deklaration.

Um den Wert einer CSS-Deklaration zu ändern, doppelklicken Sie auf den Wert der Deklaration. Der folgende Screenshot zeigt die Auswahl eines Werts aus einer Liste:

Ändern des Werts einer Deklaration

Um einen numerischen Wert zu ändern, geben Sie im nächsten Abschnitt den Wert ein, oder verwenden Sie die Pfeiltasten.

Ändern von aufzählbaren Werten mit Tastenkombinationen

Um einen numerischen Wert einer CSS-Deklaration zu ändern, geben Sie den Wert ein, oder verwenden Sie die Pfeiltasten, um den Wert um einen bestimmten Betrag zu erhöhen. Beim Bearbeiten eines aufzählbaren Werts einer Deklaration, z. B. , können Sie die folgenden Tastenkombinationen verwenden, font-sizeum den Wert um einen festen Betrag zu erhöhen:

Tastenkombination Aktion
ALT+NACH-OBEN(Windows, Linux), WAHL+NACH-OBEN (macOS) Inkrementierung um 0,1.
NACH-OBEN-TASTE Inkrementierung um 1 oder um 0,1, wenn der aktuelle Wert zwischen -1 und 1 liegt.
UMSCHALT+NACH-OBEN Inkrementierung um 10.
STRG+UMSCHALT+PgUp (Windows, Linux), UMSCHALT+BEFEHL+NACH OBEN (macOS) Inkrementierung um 100.

Drücken Sie zum Verringern die NACH-UNTEN-TASTE (oder DIE BILD-NACH-UNTEN-TASTE) anstelle der NACH-OBEN - oder BILD-NACH-OBEN-TASTE.

Ändern von Längenwerten

Sie können den Zeiger verwenden, um jede Eigenschaft mit einem Längenwert zu ändern, z width. B. , height, padding, marginoder border.

So ändern Sie die Längeneinheit:

  1. Öffnen Sie eine Webseite, die CSS verwendet, z . B. die To-Do-App, in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf den Text Aufgabe hinzufügen, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet und zeigt das Tool Elemente an. Das <label> -Element ist in der DOM-Struktur ausgewählt.

  3. Zeigen Sie auf der Registerkarte Formatvorlagen in der .new-task-form CSS-Regel in der max-width: -Eigenschaft auf 50rem.

    Es wird eine QuickInfo mit dem entsprechenden Wert und den entsprechenden Einheiten angezeigt: 800px.

  4. Klicken Sie auf den Wert 50rem.

    Eine QuickInfo wird angezeigt: "Inkrement/Dekrement mit Mausrad- oder Auf-/Abtasten. STRG: +/-100, UMSCHALT: +/-10, ALT: +/-0,1"

  5. Bewegen Sie das Mausrad, oder drücken Sie die NACH-OBEN- und NACH-UNTEN-TASTE , während Sie eine Taste drücken:

    STRG: Inkrementierung um 100. Verschiebung: Inkrementierung um 10. ALT: Inkrementierung um 0,1.

    Auf der überprüften Webseite ändert das Eingabetextfeld Aufgabe hinzufügen die Breite, wenn Sie den Wert ändern.

  6. Geben Sie im Wertfeld der max-width-Eigenschaft den Wert 200px an (ändern Sie von rem Einheiten in px Einheiten).

  7. Bewegen Sie das Mausrad erneut, oder drücken Sie die NACH-OBEN- und NACH-UNTEN-TASTE , während Sie die TASTEN STRG (+/-100), UMSCHALT (+/-10) oder ALT (+/-0,1) gedrückt halten.

    Auf der überprüften Webseite ändert das Eingabetextfeld Aufgabe hinzufügen die Breite, während Sie den Wert ändern:

    Ändern der maximalen Breite des Eingabetextfelds

Hinzufügen einer Klasse zu einem Element

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 der Klasse in das Textfeld Neue Klasse hinzufügen ein.

  4. Drücken Sie EINGABE.

    Bereich

Emulieren von hellen und dunklen Designeinstellungen und Aktivieren des automatischen dunklen Modus

So schalten Sie den automatischen dunklen Modus um oder emulieren die Präferenz des Benutzers für helle oder dunkle Designs:

  1. Klicken Sie im Tool Elemente auf der Registerkarte Formatvorlagen in der oberen rechten Ecke auf die Schaltfläche Allgemeine Renderingemulationen (Pinselsymbol) umschalten:

    Umschalten gängiger Renderingemulationen

  2. Wählen Sie in der Dropdownliste eine der folgenden Optionen aus:

    • prefers-color-scheme: light. Gibt an, dass der Benutzer das helle Design bevorzugt.

    • prefers-color-scheme: dark. Gibt an, dass der Benutzer das dunkle Design bevorzugt.

    • Automatischer dunkler Modus. Zeigt Ihre Seite im dunklen Modus an, auch wenn Sie sie nicht implementiert haben. Legt außerdem automatisch auf fest prefers-color-schemedark .

Diese Dropdownliste ist eine Verknüpfung für die Optionen "Css-Medien emulieren" prefers-color-scheme und "Automatischen dunklen Modus aktivieren " des Renderingtools .

Siehe auch:

Umschalten einer Klasse

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 Bereich Elementklassen . Weitere Informationen finden Sie unter Hinzufügen einer Klasse zu einem Element. Unterhalb der Textfelder Neue Klasse hinzufügen befinden sich alle Klassen, die auf dieses Element angewendet werden.

  3. Schalten Sie das Kontrollkästchen neben der Klasse um, die Sie aktivieren oder deaktivieren möchten.

Hinzufügen einer Stilregel

So fügen Sie eine neue Stilregel hinzu:

  1. Wählen Sie ein Element aus.

  2. Klicken Sie auf Neue Formatvorlagenregel (Neue Formatvorlagenregel). DevTools fügt eine neue Regel unterhalb der Regel element.style ein.

    In der folgenden Abbildung fügt DevTools die h1.devsite-page-title Stilregel hinzu, nachdem Sie auf Neue Formatvorlagenregel geklickt haben.

    Hinzufügen einer neuen Stilregel

Auswählen eines Stylesheets zum Hinzufügen einer Regel

Beim Hinzufügen einer Formatvorlagenregel erstellt DevTools standardmäßig ein neues Stylesheet mit dem Namen inspector-stylesheet im Dokument und fügt dann die neue Formatregel in diesem Stylesheet hinzu.

So fügen Sie stattdessen die Regel in einem vorhandenen Stylesheet hinzu:

  • Klicken und halten Sie neue Formatvorlageregel (Neue Formatvorlagenregel) gedrückt, und wählen Sie dann ein Stylesheet aus der Liste aus, dem die Formatvorlagenregel hinzugefügt werden soll.

Auswählen eines Stylesheets

Hinzufügen einer Formatregel zu einer bestimmten Position in einem Stylesheet

Beim Hinzufügen einer Formatvorlagenregel durch Klicken auf die Schaltfläche Neue Formatvorlageregel (Symbol ") wird die neue Regel unter der Element.style-Regel in das inspector-stylesheet Stylesheet eingefügt.

So fügen Sie eine Stilregel an einer bestimmten Position eines bestimmten Stylesheets hinzu, indem Sie im Bereich Formatvorlagen beginnen:

  1. Zeigen Sie im Tool Elemente auf der Registerkarte Formatvorlagen auf die Formatvorlagenregel, die sich direkt oberhalb der Stelle befindet, an der Sie Ihre neue Formatvorlagenregel hinzufügen möchten.

    Auf der rechten Seite der CSS-Regel wird unten eine Schaltfläche Formatvorlagenregel einfügen (Symbol Formatvorlagenregel einfügen unter) angezeigt.

  2. Klicken Sie unten auf die Schaltfläche Formatvorlage einfügen (Formatvorlagenregel einfügen unten symbol):

    Formatvorlagenregel einfügen unten

Umschalten einer Deklaration

So schalten Sie eine einzelne Deklaration ein oder aus:

  1. Wählen Sie ein Element aus.

  2. Zeigen Sie im Bereich Formatvorlagen auf die Regel, die die Deklaration definiert. Neben jeder Deklaration wird ein Kontrollkästchen angezeigt.

  3. Aktivieren oder deaktivieren Sie das Kontrollkästchen neben der Deklaration. Wenn Sie eine Deklaration löschen, kreuzt DevTools sie aus, um anzugeben, dass sie nicht mehr aktiv ist.

    In der folgenden Abbildung wurde die margin-top Eigenschaft für das aktuell ausgewählte Element deaktiviert.

    Umschalten einer Deklaration

Bearbeiten der ::view-transition Pseudoelemente während einer Animation

Siehe:

Ausrichten von Rasterelementen und deren Inhalt mit dem Raster-Editor

Siehe:

Ändern von Farben mit der Farbauswahl

Die Farbauswahl stellt eine Benutzeroberfläche zum Ändern color und background-color Deklarationen bereit.

So öffnen Sie die Farbauswahl:

  1. Wählen Sie ein Element aus.

  2. Suchen Sie im Bereich Formatvorlagen nach der colorDeklaration , background-coloroder einer ähnlichen Deklaration, die Sie ändern möchten. Links neben dem colorWert , background-coloroder einem ähnlichen Wert befindet sich ein kleines Quadrat, das eine Vorschau der Farbe darstellt.

    In der folgenden Abbildung ist das kleine Quadrat links von rgba(0, 0, 0, 0.7) eine Vorschau dieser Farbe.

    Farbvorschau

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

    Die Farbauswahl

In der folgenden Abbildung und Liste werden die einzelnen Ui-Elemente der Farbauswahl beschrieben.

Die Farbauswahl, kommentiert

Beschriftung Komponente Beschreibung
1 Schattierungen
2 Pipette Beispiel für eine Farbe außerhalb der Seite mit dem Piper
3 In Zwischenablage kopieren Kopieren Sie den Anzeigewert in die Zwischenablage.
4 Anzeigewert Die RGBA-, HSLA- oder Hex-Darstellung der Farbe.
5 Farbpalette Klicken Sie auf ein Quadrat, um die Farbe zu ändern.
6 Farbton
7 Transparenz
8 Anzeigewertwechsel Schalten Sie zwischen den RGBA-, HSLA- und Hexadezimaldarstellungen der aktuellen Farbe um.
9 Farbpalettenumschalter Wechseln Sie zwischen der Materialentwurfspalette, einer benutzerdefinierten Palette oder einer Seitenfarbenpalette. DevTools generiert die Seitenfarbpalette basierend auf den Farben, die in Ihren Stylesheets gefunden werden.

Siehe auch:

Beispiel für eine Farbe außerhalb der Seite mit dem Piper

So ändern Sie die ausgewählte Farbe auf der Seite in eine andere Farbe:

  1. Klicken Sie auf das Pipettensymbol (Pipette). Der Cursor ändert sich in eine Lupe.

  2. Zeigen Sie auf das Pixel, das die Farbe aufweist, die Sie verwenden möchten, an einer beliebigen Stelle auf dem Bildschirm.

  3. Klicken Sie auf diese Option, um dies zu bestätigen.

    In der folgenden Abbildung zeigt die Farbauswahl einen aktuellen Farbwert von , der rgba(0,0,0,0.7)nahe an Schwarz liegt. Die spezifische Farbe ändert sich in die Version von Schwarz, die derzeit im Viewport hervorgehoben ist, nachdem Sie darauf geklickt haben.

    Verwenden der Pipette

Siehe auch:

Ändern des Winkelwerts mit der Winkeluhr

Die Angle Clock bietet eine Benutzeroberfläche zum Ändern der Winkelmengen in CSS-Eigenschaftswerten.

So öffnen Sie die Angle Clock

  1. Wählen Sie ein Element aus, das eine Winkeldeklaration enthält.

  2. Suchen Sie im Bereich Formatvorlagen die - oder background -transformDeklaration, die Sie ändern möchten. Klicken Sie neben dem Winkelwert auf das Feld Winkelvorschau .

    In der folgenden Abbildung ist die kleine Uhr links von 100deg eine Vorschau des Winkels.

  3. Klicken Sie auf die Vorschau, um die Angle Clock zu öffnen:

    Winkelvorschau

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

Es gibt weitere Tastenkombinationen zum Ändern des Winkelwerts. Weitere Informationen finden Sie in den Tastenkombinationen im Bereich Formatvorlagen.

Ändern von Feld- und Textschatten mit dem Schatten-Editor

Verwenden Sie den Schatten-Editor, um den Wert der CSS-Eigenschaft oder text-shadow der box-shadow CSS-Eigenschaft für ein HTML-Element zu ändern:

  1. Wählen Sie ein Element mit einer - oder text-shadow -box-shadowDeklaration aus.

    Öffnen Sie beispielsweise die 1DIV-Demoseite auf einer neuen Registerkarte oder einem neuen Fenster, klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie Untersuchen aus, um DevTools zu öffnen, und wählen Sie dann im Tool Elemente das <div class="demos"> Element aus.

  2. Suchen Sie im Bereich Formatvorlagen in der .demos CSS-Regel nach der box-shadow Deklaration, und klicken Sie dann auf die Schaltfläche Schatten-Editor öffnen (Symbol für die Schaltfläche ").

    Der Schatten-Editor wird geöffnet:

    Der Schatten-Editor

  3. Ändern Sie die Schatteneigenschaften wie folgt:

    Eigenschaft So ändern Sie
    Typ Wählen Sie Outset oder Inset aus. Nur für box-shadow.
    X-Offset Geben Sie einen Wert im Textfeld an, oder ziehen Sie den blauen Punkt.
    Y-Offset Geben Sie einen Wert im Textfeld an, oder ziehen Sie den blauen Punkt.
    Blur Geben Sie einen Wert im Textfeld an, oder ziehen Sie den Schieberegler.
    Verbreiten Geben Sie einen Wert im Textfeld an, oder ziehen Sie den Schieberegler. Nur für box-shadow.

    Die Änderungen werden in Echtzeit auf das -Element auf der gerenderten Webseite angewendet:

    Auswirkungen von Änderungen im Schatten-Editor

Bearbeiten von Animationen und Übergangszeiten mit dem Beschleunigungs-Editor

Verwenden Sie den Easing-Editor , um den Wert der Eigenschaft animation-timing-function oder transition-timing-function für ein HTML-Element zu ändern.

So öffnen Sie den Easing-Editor:

  1. Wählen Sie in DevTools im Tool Elemente in der DOM-Struktur ein Element aus, für das eine CSS-Animation oder ein Übergang angewendet wurde.

    Öffnen Sie beispielsweise die Demoseite für animierte Eigenschaften auf einer neuen Registerkarte oder einem neuen Fenster, klicken Sie mit der rechten Maustaste auf das grüne Feld, das eine Animation enthält, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet und zeigt das Tool Elemente an.

  2. Drücken Sie STRG+F , suchen Sie nach "Spinner", und wählen Sie dann das <div class="spinner"> Element aus, das sich in befindet <div class="animation-demo good">.

    Die roten (schlechten) und grünen (gut) Felder auf dieser Demoseite sind zwei verschiedene CSS-Animationen. Beide Animationen werden mithilfe der animation CSS-Eigenschaft mit CSS ausgeführt und definieren eine ease-in-out Zeitsteuerungsfunktion.

  3. Klicken Sie auf der Registerkarte Formatvorlagen in der .good .spinner CSS-Regel in der animation Deklaration links von ease-in-outauf die Schaltfläche Kubik-Bézier-Editor öffnen (Kubischer Bézier-Editor-Symbol).

    Der Beschleunigungs-Editor wird geöffnet:

    Der Beschleunigungs-Editor

Verwenden von Voreinstellungen zum Anpassen von Zeitangaben

Verwenden Sie die Voreinstellungen im Beschleunigungs-Editor, um die Anzeigedauer durch einen einfachen Mausklick anzupassen:

  1. Öffnen Sie den Easing-Editor, wie oben unter Bearbeiten von Animationen und Übergangszeiten mit dem Beschleunigungs-Editor beschrieben.

  2. Klicken Sie auf eine der vier Auswahlschaltflächen:

    Schaltfläche Funktionstyp CSS-Schlüsselwort (keyword)
    Lineare Beschleunigungsfunktionen Lineare Funktionen linear
    Erleichterte Beschleunigungsfunktionen Funktionen für einfaches In-Out ease-in-out
    Erleichterte Beschleunigungsfunktionen Erleichterte Funktionen ease-in
    Erleichterte Beschleunigungsfunktionen Funktionen zur Vereinfachung ease-out

    Wenn Sie eine Schaltfläche auswählen, wird ein Schlüsselwort (keyword) Wert in der CSS-Regel festgelegt (der variiert, wenn Sie im nächsten Schritt eine Variantenvoreinstellung auswählen), und der Schalter Voreinstellungen wird am unteren Rand des Beschleunigungs-Editors geöffnet.

  3. Klicken Sie in der Umschaltfläche Voreinstellungen auf die Schaltflächen Links< oder Rechts> , um eine der folgenden Voreinstellungen zu wählen:

    • Lineare Voreinstellungen: elastic, bounceoder emphasized.

    • Kubische Béziervoreinstellungen:

    Timing-Schlüsselwort (keyword) Voreinstellung Kubischer Bézier
    ease-in-out In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    ease-in-out In Out, Quadratisch cubic-bezier(0.46, 0.03, 0.52, 0.96)
    ease-in-out In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    ease-in-out Fast Out, Slow In cubic-bezier(0.4, 0, 0.2, 1)
    ease-in-out In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Timing-Schlüsselwort (keyword) Voreinstellung Kubischer Bézier
    ease-in In, Sinus cubic-bezier(0.47, 0, 0.75, 0.72)
    ease-in In, Quadratisch cubic-bezier(0.55, 0.09, 0.68, 0.53)
    ease-in In, Kubik cubic-bezier(0.55, 0.06, 0.68, 0.19)
    ease-in In, Zurück cubic-bezier(0.6, -0.28, 0.74, 0.05)
    ease-in Fast Out, Linear In cubic-bezier(0.4, 0, 1, 1)
    Timing-Schlüsselwort (keyword) Voreinstellung Kubischer Bézier
    ease-out Out, Sine cubic-bezier(0.39, 0.58, 0.57, 1)
    ease-out Out, Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
    ease-out Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    ease-out Linear Out, Slow In cubic-bezier(0, 0, 0.2, 1)
    ease-out Aus, Zurück cubic-bezier(0.18, 0.89, 0.32, 1.28)

Siehe auch:

Konfigurieren von benutzerdefinierten Zeitsteuerungen

Um benutzerdefinierte Werte für Zeitsteuerungsfunktionen festzulegen, verwenden Sie die Kontrollpunkte in den Zeilen:

  • Klicken Sie bei linearen Funktionen auf eine beliebige Stelle in der Linie, um einen Kontrollpunkt hinzuzufügen, und ziehen Sie ihn. Um einen Kontrollpunkt zu entfernen, doppelklicken Sie darauf.

    Ziehen eines Kontrollpunkts einer linearen Funktion

  • Ziehen Sie für Kubik-Bézierfunktionen einen der Kontrollpunkte:

    Ziehen der Kontrollpunkte einer Kubikbezierfunktion

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

Siehe auch

Demos:

MDN:

Github:

Web.dev:

Chrome für Entwicklerblog:

Chrome-Dokumentation:

material.io:

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

  • Last updated on