Referenz zu CSS-Features

Entdecken Sie neue Workflows in der folgenden umfassenden Referenz zu Microsoft Edge DevTools-Features zum Anzeigen und Ändern von CSS.

Die Grundlagen finden Sie unter Erste Schritte beim Anzeigen und Ändern von CSS.

Detaillierter Inhalt:

Element auswählen

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

Ein 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 Formatvorlagen des Elements im Bereich "Formatvorlagen" angezeigt.
  • Auf der linken Seite wird das Element im Ansichtsfenster hervorgehoben, jedoch nur, weil die Maus gerade in der DOM-Struktur darüber schwebt:

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 auf das Element im Ansichtsfenster.

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

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

CSS anzeigen

Verwenden Sie die Registerkarten Elemente>, Formatvorlagen 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 unterschiedlich formatiert sein. Wenn Sie nicht sicher sind, ob etwas ein Link ist, klicken Sie darauf, um es herauszufinden.

Beispiel:

  1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zur Aufgaben-App .

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

    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 " zeigt die Registerkarte "Formatvorlagen " QuickInfos mit nützlichen Informationen an, wenn Sie mit dem Mauszeiger auf bestimmte Elemente zeigen.

CSS-Dokumentation anzeigen

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

  1. Wechseln zu einer Webseite, z. B. der To Do-App, in einem neuen Fenster oder auf einer neuen Registerkarte.

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

    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. B padding:. . .

    Eine QuickInfo wird angezeigt:

    Die QuickInfo mit Dokumentation zu einer CSS-Eigenschaft

    DevTools ruft die Beschreibungen für Tooltips aus dem VS Code-Repository für benutzerdefinierte Daten 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 padding . CSS-Eigenschaft.

So deaktivieren Sie die CSS-QuickInfos:

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

So aktivieren Sie CSS-Tooltips wieder:

  1. Wählen Sie in DevTools die Option DevTools anpassen und steuern und 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 für CSS-Dokumentation anzeigen ".

Selektorspezifität anzeigen

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

Beispiel:

  1. Wechseln zu einer Webseite, z. B. der To Do-App, in einem neuen Fenster oder auf einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und klicken Sie dann auf "Überprüfen".

    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.

    Eine QuickInfo wird angezeigt, die Spezifität anzeigt: (0,0,1):

    Die QuickInfo mit Spezifitätsgewichtung eines angepassten Selektors

Siehe auch:

Anzeigen der Werte benutzerdefinierter Eigenschaften

Bewegen Sie den Mauszeiger über eine var(--custom-property) Funktion, um den Wert der benutzerdefinierten Eigenschaft in einer QuickInfo anzuzeigen.

Beispiel:

  1. Wechseln zu einer Webseite, z. B. der To Do-App, in einem neuen Fenster oder auf einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und klicken Sie dann auf "Überprüfen".

    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 Tools "Quellen" geöffnet.

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

Anzeigen des Stylesheets, in dem eine Regel definiert ist

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

Ungültige, überschriebene, inaktive und andere CSS anzeigen

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

Zeigen Sie nur das CSS an, das tatsächlich auf ein Element angewendet wurde

Der Bereich "Formatvorlagen" zeigt Ihnen alle Regeln, die für ein Element gelten, einschließlich der Deklarationen, die überschrieben wurden. Wenn Sie kein Interesse an überschriebenen Deklarationen haben, verwenden Sie den Bereich "Berechnet", um nur das CSS anzuzeigen, das tatsächlich auf ein Element angewendet wird.

Beispiel:

  1. Wechseln zu einer Webseite, z. B. der To Do-App, in einem neuen Fenster oder auf einer neuen Registerkarte.

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

    DevTools wird geöffnet, wobei das Tool "Elemente" ausgewählt ist, wobei 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 ein Wert in Kursivschrift geben einen Wert an, der zur Laufzeit berechnet wird.

  4. Um alle Eigenschaften anzuzeigen, aktivieren Sie das Kontrollkästchen Alle anzeigen .

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, oben.

Geerbte CSS-Eigenschaften anzeigen

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

CSS-At-Regeln anzeigen

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

Im Tool "Elemente " zeigt die Registerkarte "Formatvorlagen " die folgenden At-Regeln in speziellen Abschnitten an:

Regeln anzeigen @property

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

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

  • Der Wert der Eigenschaft, z. B 20%.
  • Die Deskriptoren der Eigenschaft, z. B.: initial value: 40%
  • Ein Link zum Anzeigen registrierter Eigenschaften zu ihrer Registrierung im reduzierbaren @property Abschnitt unten auf der Registerkarte "Formatvorlagen ".

Beispiel:

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

  2. Klicken Sie mit der rechten Maustaste auf den dritten Absatz des Artikels , 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:

    Tooltip für die at-property-CSS-at-Regel

    Die QuickInfo enthält:

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

  4. Klicken Sie auf den Link "Registrierte Eigenschaft anzeigen ".

    Der Abschnitt mit der erweiterten @property wird weiter unten auf der Registerkarte "Formatvorlagen" angezeigt:

    --itemSize im Abschnitt at-property

Doppelklicken Sie auf den Namen oder Wert, um eine @property Regel zu bearbeiten. Weitere Informationen finden Sie unten unter Ändern eines Deklarationsnamens oder -werts.

Siehe auch:

Regeln anzeigen @supports

Die Registerkarte Stile zeigt Ihnen die @supports CSS-at-Regeln, wenn sie auf ein Element angewendet werden.

So zeigen Sie beispielsweise die @supports Regel an:

  1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Seite, auf der die @supports At-Regel verwendet wird, z. B@supports. Anzeigen von At-Regeln.

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

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

    Ergebnis von HTML für die at-supports-Regel

  • 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".

Regeln anzeigen @scope

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

Mit den @scope at-Regeln können Sie CSS-Formatvorlagen definieren, d. h. Stilen explizit auf bestimmte Elemente anwenden. Siehe @scope CSS at-rule bei MDN.

So zeigen Sie die @scope Regel an:

  1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Seite, auf der die @scope At-Regel verwendet wird, z. B. die Demo zum Anzeigen @scope von At-Regeln :

    Ergebnis von HTML & CSS für die At-Scope-Regel

  2. Klicken Sie mit der rechten Maustaste auf "Ich bin der Text, der sich auf einer Karte befindet", und wählen Sie dann "Überprüfen" aus.

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

  3. Wählen Sie die Registerkarte "Formatvorlagen " aus.

  4. Untersuchen Sie die @scope Regel:

    Die To-Scope-Regel auf der Registerkarte

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

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

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

    Der Text auf der Karte auf der Demo-Webseite ändert sich von pflaumenfarbenem zu beigem Hintergrund.

Regeln anzeigen @font-palette-values

Mit der CSS-Regel @font-palette-values können Sie die Standardwerte der font-palette Eigenschaft anpassen (überschreiben). Im Tool "Elemente " zeigt die Registerkarte "Formatvorlagen " diese At-Regel in einem eigenen Abschnitt an.

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

  1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Seite, auf der die @font-palette-values At-Regel verwendet wird, z. B. die Demo zum Anzeigen @font-palette-values von At-Regeln .

  2. Klicken Sie mit der rechten Maustaste auf "Neue Farben", und wählen Sie dann "Überprüfen" 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

    In diesem Beispiel überschreiben die Werte der --New Schriftpalette die Standardwerte der farbigen Schrift.

    Doppelklicken Sie wie folgt auf einen benutzerdefinierten Wert, um ihn zu bearbeiten:

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

    Auf der überprüften Webseite werden "neue Farben" jetzt als Blau und Rot gerendert.

Regeln anzeigen @position-try

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

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

  • 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 über Attribute verfügen 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 auf einer neuen Registerkarte zu einer Seite, auf der die Werte und @position-try die position-try-fallbacks At-Regel verwendet werden, z. B. die Demo zum Anzeigen @position-try von At-Regeln.

  2. Öffnen Sie auf der gerenderten Webseite das Untermenü. Das heißt, klicken Sie auf IHR KONTO und dann auf STOREFRONT.

    Das Untermenü wird mit einer Liste von Befehlen angezeigt: ANGEBOTE, SONDERANGEBOTE, ABMELDEN.

  3. Klicken Sie im Untermenü mit der rechten Maustaste oben auf 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"> wird in der DOM-Struktur ausgewählt:

    Ergebnis von HTML & CSS für die at-position-try-Regel

  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" scrollt nach unten zum entsprechenden @position-try Abschnitt:

    Der Abschnitt

  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">) mit dem entsprechenden popovertarget Attributwert (popovertarget="submenu") aus, und auf der Registerkarte Styles wird das CSS des Elements angezeigt:

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

Doppelklicken Sie auf den Wert, um einen Wert zu bearbeiten.

Siehe auch:

Anzeigen des Boxmodells eines Elements

Um das Box-Modell 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 Kastenmodelldiagramm im Bereich Formatvorlagen das Kastenmodell für das aktuell ausgewählte h1 Element:

Das Kastenmodelldiagramm

Siehe auch:

Durchsuchen und Filtern des 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 ist der Bereich "Formatvorlagen" so gefiltert, dass nur Regeln angezeigt werden, die die Suchabfrage colorenthalten.

Filtern des Bereichs

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

Filtern des Bereichs

Emulieren einer Seite mit Fokus

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

  • Dropdownlisten.
  • Menüs.
  • Datumsauswahl.

Um ein solches Element so zu debuggen, als ob die Seite den Fokus hat, führen Sie einen der folgenden Schritte aus:

  • Klicken Sie im Tool "Elemente " auf der Registerkarte "Formatvorlagen " auf :hov "Elementstatus umschalten" und aktivieren Sie dann das Kontrollkästchen " Seite mit Fokus emulieren ".
  • Aktivieren Sie im Rendering-Tool das Kontrollkästchen "Seite mit Fokus emulieren ".

Vorsicht: Wenn diese Option aktiviert ist, ist sie document.visibilityState festgelegt visible auf, und das visibilitychange Ereignis wird nicht ausgelöst. Siehe Page Visibility API at MDN.

So versuchen Sie, eine Seite mit Fokus zu emulieren:

  1. Öffnen Sie das Emulieren einer fokussierten Seitendemo in einem neuen Fenster oder auf 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 angezeigt, das besagt: "Diese Meldung wird nur angezeigt, wenn das Textfeld fokussiert ist."

  3. Klicken Sie mit der rechten Maustaste auf das Eingabetextfeld, und wählen Sie dann "Überprüfen" aus.

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

  4. Klicken Sie im Tool "Elemente " auf der Registerkarte "Formatvorlagen " auf :hov "Elementstatus umschalten" und aktivieren Sie dann das Kontrollkästchen " Seite mit Fokus emulieren ".

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

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

    Sie können jetzt das Nachrichtenelement überprüfen, das sich unterhalb des Eingabetextfelds befindet, obwohl DevTools und nicht die überprüfte Seite den Fokus hat:

    Das Kontrollkästchen

  6. Bereinigung: Klicken Sie im Tool "Elemente " auf der Registerkarte "Formatvorlagen " auf :hov "Elementstatus umschalten" und deaktivieren Sie das Kontrollkästchen " Seite mit Fokus emulieren ".

Ein Kontrollkästchen " Seite mit Fokus emulieren " wird auch im Rendering-Tool angezeigt. siehe Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder für Sehstörungen aussieht.

Siehe auch:

Umschalten einer Pseudoklasse

So schalten Sie eine Pseudoklasse um:

  1. Wechseln zu einer Webseite, z. B. der To Do-App, in einem neuen Fenster oder auf einer neuen Registerkarte.

  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 "Überprüfen" 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. B :hover.:

    Auswahl der Pseudoklasse :hover

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

Auf der Registerkarte Stile 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, zeigt die Registerkarte Stile einen Abschnitt "Spezifischen Elementzustand erzwingen " an, den Sie erweitern und für das Element spezifische Pseudoklassen aktivieren können, z. B. ein Kontrollkästchen :read/write :

Der Force specific element state section of a 'textarea' element

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

Vererbte Hervorhebungspseudoelemente anzeigen

Mit Pseudoelementen können Sie bestimmte Teile von Elementen formatieren. Hervorheben von Pseudoelementen sind Dokumentteile mit dem Status "ausgewählt" und werden als "hervorgehoben" formatiert, um dem Benutzer diesen Status anzuzeigen.

Solche Pseudoelemente sind zum Beispiel:

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

Wenn mehrere Formatvorlagen miteinander in Konflikt stehen, bestimmt die CSS-Kaskade den Gewinnerstil. Siehe Einführung in die CSS-Kaskade bei MDN.

Um die Vererbung und Priorität der Regeln besser zu verstehen, sehen Sie sich das geerbte Hervorhebungspseudoelement in der folgenden Abbildung an.

So zeigen Sie die geerbten Hervorhebungspseudoelemente an:

  1. Gehen Sie in einem neuen Fenster oder auf einer neuen Registerkarte zur Demo "Pseudoelemente hervorheben ".

  2. Markieren Sie einen Teil des Texts: "Ich habe den Stil des Highlight-Pseudoelements meiner Eltern geerbt. Wähle mich aus!"

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

  3. Klicken Sie mit der rechten Maustaste auf den Text "Ich habe den Stil des Highlight-Pseudoelements meines Elternteils geerbt. 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 Stile wird der Abschnitt angezeigt: Pseudo ::selection-Element:

    Sehen Sie sich den Abschnitt

Siehe auch:

Anzeigen von Kaskadenebenen

Kaskadenebenen ermöglichen eine explizitere Steuerung Ihrer CSS-Dateien, um Konflikte zwischen Stilspezifität zu vermeiden. Dies ist nützlich für:

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

So zeigen Sie Übergabeebenen an:

  1. Wechseln Sie zu einer Webseite, die Kaskadenschichten verwendet, wie z. B. die Demo "Ebenen kaskadieren ".

  2. Klicken Sie mit der rechten Maustaste auf das Element "Meine Stile sind geschichtet!", 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 Überlassungsebenen und ihre Formatvorlagen an: pagecomponent und base:

    Ebenen kaskadieren

  5. Um die Ebenenreihenfolge anzuzeigen, klicken Sie auf den Ebenennamen (Seite, Komponente oder Basis). Oder klicken Sie auf das Symbol CSS-Ebenenansichtumschalten Schaltfläche CSS-Ebenenansicht 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. Wechseln Sie zu einer Webseite.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

    DevTools wird geöffnet.

  3. Drücken Sie ein- bis zweimal die ESC-Taste , damit die Symbolleiste "Schnellansicht " am unteren Rand von DevTools angezeigt wird.

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

  5. Wählen Sie das Renderingtool aus.

    Das Renderingtool wird im Schnellansichtsbereich am unteren Rand der DevTools geöffnet.

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

    Die Webseite wird so gerendert, als würde sie gedruckt.

  7. Wenn Sie fertig sind, klicken Sie im Rendering-Tool auf die Dropdownliste CSS-Medientyp emulieren , und wählen Sie dann Keine Emulation aus.

Anzeigen von verwendetem und nicht verwendetem CSS mit dem Abdeckungstool

Das Abdeckungstool zeigt Ihnen, welches 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 der Eingabe, coverageund wählen Sie dann Abdeckung anzeigen aus:

    Öffnen des Coverage-Tools über das Befehlsmenü

    Das Abdeckungstool wird angezeigt:

    Das Abdeckungstool

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

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

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

  4. Klicken Sie auf eine CSS-Datei, um eine zeilenweise Aufschlüsselung des verwendeten CSS anzuzeigen.

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

    Eine zeilenweise Aufschlüsselung von verwendetem und nicht verwendetem CSS

Druckvorschaumodus erzwingen

Weitere Informationen finden Sie unter DevTools in den Seitenansichtsmodus zwingen.

CSS kopieren

Über ein einzelnes Dropdown-Menü auf der Registerkarte "Formatvorlagen " können Sie separate CSS-Regeln, Deklarationen, Eigenschaften oder Werte kopieren. siehe CSS-Syntaxgrundlagen in Was ist CSS? bei MDN.

Darüber hinaus können Sie CSS-Eigenschaften in JavaScript-Syntax kopieren. Diese Option ist praktisch, wenn Sie CSS-in-JS-Bibliotheken verwenden. siehe Formatvorlagenbearbeitung für CSS-in-JS-Frameworks.

So kopieren Sie CSS:

  1. Wechseln Sie in einem neuen Fenster oder auf 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 "Überprüfen".

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

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

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

    CSS-Dropdownmenü kopieren

  5. Wählen Sie ein Menüelement mit der rechten Maustaste aus:

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

    • Eigenschaft kopieren. Kopiert nur den property Namen.

    • Wert kopieren. Kopiert nur die value.

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

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

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

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

    • Kopieren Sie alle CSS-Änderungen. Kopiert die Änderungen, die Sie auf der Registerkarte "Formatvorlagen" vorgenommen haben, in alle Deklarationen. Dieser Menüpunkt wird bedingt angezeigt.

    • Berechneten Wert anzeigen. Bringt 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 aufgelistet, wie Sie CSS inElementformatvorlagen> ändern können.

Darüber hinaus haben Sie folgende Möglichkeiten:

Zwei Möglichkeiten, eine CSS-Deklaration zu einem Element hinzuzufügen

Die Reihenfolge der Deklarationen wirkt sich darauf aus, wie ein Element formatiert wird. 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 CSS-Inlinedeklaration zu einem Element

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

Inlinedeklarationen haben eine höhere Spezifität als externe Deklarationen, 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 eckigen Klammern des Abschnitts element.style . Der Cursor fokussiert, 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, und DevTools schlägt dann eine Liste übereinstimmender Eigenschafts-/Wert-Paare vor, aus denen 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-topbackground-color und-Eigenschaften auf das ausgewählte Element angewendet. In der DOM-Struktur werden die Deklarationen im Attribut des style Elements widergespiegelt.

Inlinedeklarationen hinzufügen

Hinzufügen einer CSS-Deklaration zu einer vorhandenen Stilregel

Wenn Sie die Formatvorlagen eines Elements debuggen und speziell testen müssen, was geschieht, wenn eine Deklaration an verschiedenen Stellen definiert wird, fügen Sie einer vorhandenen Stilregel 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 die eckigen Klammern der Formatvorlagenregel, der Sie die Deklaration hinzufügen möchten. Der Cursor fokussiert, 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 des Namens oder Werts einer Deklaration

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 das Auswählen eines Werts aus einer Liste:

Ändern des Werts einer Deklaration

Wenn Sie einen numerischen Wert ändern möchten, geben Sie den Wert ein, oder verwenden Sie die Pfeiltasten gemäß dem nächsten Abschnitt.

Ändern von aufzählungsfähigen Werten mit Tastenkombinationen

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

Tastenkombination Aktion
ALT+NACH-OBEN (Windows, Linux), OPTION+NACH-OBEN (macOS) Erhöhung um 0,1.
NACH-OBEN Erhöhen Sie den Wert um 1 oder um 0,1, wenn der aktuelle Wert zwischen -1 und 1 liegt.
UMSCHALT+NACH-OBEN Erhöhung um 10.
STRG+UMSCHALT+BILD-AUF (Windows, Linux), UMSCHALT+BEFEHL+NACH-OBEN (macOS) Erhöhen Sie den Wert um 100.

Zum Verringern drücken Sie die NACH-UNTEN-TASTE (ODER BILD-AB-TASTE) anstelle der NACH-OBEN-TASTE(oder BILD-AUF-Taste).

Längenwerte ändern

Mit dem Mauszeiger können Sie jede Eigenschaft ändern, die einen Längenwert hat, wie z. B width. , 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 auf einer neuen Registerkarte.

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

    DevTools wird geöffnet und zeigt das Tool "Elemente " an. Das <label> Element wird 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 Einheiten angezeigt: 800px.

  4. Klicken Sie auf den Wert 50rem.

    Eine QuickInfo wird angezeigt: "Erhöhen / Verringern mit dem Mausrad oder den Tasten nach oben/unten. 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: Erhöhung um 100. Umschalttaste: Erhöhung um 10. ALT: Erhöhung um 0,1.

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

  6. Geben Sie im Wertfeld der Eigenschaft max-width den Wert 200px ein (von Einheiten zu px Einheiten wechselndrem).

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

    Auf der überprüften Webseite ändert das Textfeld " Vorgang hinzufügen" die Breite, wenn 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.

    Der Bereich Elementklassen

Präferenzen für helle und dunkle Designs emulieren und den automatischen Dunkelmodus aktivieren

So schalten Sie den automatischen Dunkelmodus um oder emulieren die Benutzerpräferenz für helle oder dunkle Designs:

  1. Klicken Sie im Tool "Elemente " auf der Registerkarte "Formatvorlagen " oben rechts auf die Schaltfläche "Allgemeine Renderingemulationen umschalten " (Pinselsymbol):

    Umschalten gängiger Rendering-Emulationen

  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 Dunkelmodus. Zeigt Ihre Seite im dunklen Modus an, auch wenn Sie ihn nicht implementiert haben. Legt außerdem Folgendes auf dark automatisch festprefers-color-scheme.

Diese Dropdownliste ist eine Verknüpfung für die Optionen CSS-Medienfunktion prefers-color-schemeemulieren und automatischen Dunkelmodus 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 . Siehe Hinzufügen einer Klasse zu einem Element. Unter den Textfeldern Neue Klasse hinzufügen befinden sich alle Klassen, die auf dieses Element angewendet werden.

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

Hinzufügen einer Stilregel

So fügen Sie eine neue Formatvorlagenregel hinzu:

  1. Wählen Sie ein Element aus.

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

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

    Hinzufügen einer neuen Formatvorlagenregel

Wählen Sie ein Stylesheet aus, dem eine Regel hinzugefügt werden soll

Standardmäßig erstellt DevTools beim Hinzufügen einer Formatvorlagenregel ein neues Stylesheet, das im Dokument benannt inspector-stylesheet ist, und fügt dann die neue Stylesheetregel in diesem Stylesheet hinzu.

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

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

Auswählen eines Stylesheets

Hinzufügen einer Stilregel zu einer bestimmten Stelle in einem Stylesheet

Wenn Sie eine Stilregel durch Klicken auf die Schaltfläche Neue Stilregel (Symbol Neue Stilregel) hinzufügen, wird die neue Regel unterhalb der element.style-Regel im inspector-stylesheet Stylesheet eingefügt.

So fügen Sie eine Formatvorlagenregel an einer bestimmten Stelle 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 über der Stelle befindet, an der Sie Ihre neue Stilregel hinzufügen möchten.

    Auf der rechten Seite der CSS-Regel erscheint eine Schaltfläche "Stilregel unten einfügen " (Symbol ").

  2. Klicken Sie auf die Schaltfläche Stilregel unten einfügen (Symbol Formatvorlagenregel unterhalb einfügen):

    Einfügen einer Formatvorlagenregel unten

Umschalten einer Deklaration

So aktivieren oder deaktivieren Sie eine einzelne Deklaration:

  1. Wählen Sie ein Element aus.

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

  3. Aktivieren oder deaktivieren Sie das Kontrollkästchen neben der Deklaration. Wenn Sie eine Deklaration löschen, wird sie von DevTools durchgestrichen, 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:

Farben mit dem Farbwähler ändern

Der Farbwähler stellt eine Benutzeroberfläche zum Ändern color und background-color Deklarieren bereit.

So öffnen Sie die Farbauswahl:

  1. Wählen Sie ein Element aus.

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

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

    Farbvorschau

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

    Der Farbwähler

In der folgenden Abbildung und Liste werden die einzelnen Benutzeroberflächenelemente des Farbwählers beschrieben.

Der Farbwähler, mit Anmerkungen versehen

Beschriftung Komponente Beschreibung
1 Farbtöne
2 Pipette Sammeln Sie mit der Pipette eine Farbe von der Seite
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 Anzeigewertumschalter Umschalten zwischen den RGBA-, HSLA- und Hex-Darstellungen der aktuellen Farbe.
9 Farbpaletten-Umschalter Wechseln Sie zwischen der Material Design-Palette, einer benutzerdefinierten Palette oder einer Seitenfarbenpalette. DevTools generiert die Seitenfarbpalette basierend auf den Farben, die es in Ihren Stylesheets findet.

Siehe auch:

Sammeln Sie mit der Pipette eine Farbe von der Seite

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

  1. Klicken Sie auf das Pipetten-Symbol (Pipette). Der Cursor wechselt zu einer Lupe.

  2. Bewegen Sie den Mauszeiger über das Pixel mit der Farbe, die Sie abtasten möchten, an einer beliebigen Stelle auf Ihrem Bildschirm.

  3. Klicken Sie zum Bestätigen.

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

    Verwenden der Pipette

Siehe auch:

Winkelwert mit der Winkeluhr ändern

Die Winkeluhr stellt eine Benutzeroberfläche zum Ändern der Winkelbeträge in CSS-Eigenschaftswerten bereit.

So öffnen Sie die Winkeluhr:

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

  2. Suchen Sie im Bereich "Formatvorlagen " die transform zu background ändernde oder-Deklaration. Klicken Sie auf das Feld Winkelvorschau neben dem Winkelwert.

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

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

    Kamera-Vorschau

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

Es gibt weitere Tastenkombinationen, um den Winkelwert zu ändern. Weitere Informationen finden Sie unter den Tastenkombinationen im Bereich "Formatvorlagen".

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

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

  1. Wählen Sie ein Element mit einer box-shadowtext-shadow oder-Deklaration aus.

    Öffnen Sie beispielsweise die 1DIV-Demoseite in 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 " (das Schaltflächensymbol für den Schatten-Editor).

    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 in das Textfeld ein, oder ziehen Sie den blauen Punkt.
    Y-Offset Geben Sie einen Wert in das Textfeld ein, oder ziehen Sie den blauen Punkt.
    Blur Geben Sie einen Wert im Textfeld an, oder ziehen Sie den Schieberegler.
    Ausbreitung 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:

    Die Auswirkungen von Änderungen im Schatten-Editor

Bearbeiten Sie die Anzeigedauer von Animationen und Übergängen mit dem Easing 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 Lockerungs-Editor:

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

    Öffnen Sie beispielsweise die Demoseite für animierte Eigenschaften in 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 "Spinner", und wählen Sie dann das <div class="spinner"> darin befindliche <div class="animation-demo good">Element aus.

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

  3. Klicken Sie auf der Registerkarte Formatvorlagen in der .good .spinner CSS-Regel in der animation Deklaration links neben ease-in-outauf die Schaltfläche Kubischen Bezier-Editor öffnen (Symbol für kubischenBezier-Editor).

    Der Erleichterungseditor wird geöffnet:

    Der Lockerungs-Editor

Verwenden von Voreinstellungen zum Anpassen der Anzeigedauer

Um die Anzeigedauern mit einem einfachen Mausklick anzupassen, verwenden Sie die Voreinstellungen im Easing Editor:

  1. Öffnen Sie den Beschleunigungseditor, wie unter Bearbeiten von Animations- und Übergangsanzeigedauern mit dem Beschleunigungs-Editor beschrieben, oben.

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

    Schaltfläche Funktionstyp CSS-Schlüsselwort (keyword)
    Lineare Lockerungsfunktionen Lineare Funktionen linear
    Ease-in-out-Lockerungsfunktionen Ease-in-out-Funktionen ease-in-out
    Erleichterte Funktionen Erleichterte Funktionen ease-in
    Ease-out-Lockerungsfunktionen Ease-Out-Funktionen ease-out

    Durch Auswahl einer Schaltfläche wird ein Wert für ein Schlüsselwort (Keyword) in der CSS-Regel festgelegt (der variiert, wenn Sie im nächsten Schritt eine voreingestellte Variante auswählen), und der Umschalter für Voreinstellungen wird unten im Easing Editor geöffnet.

  3. Klicken Sie im Presets-Umschalterauf die< linke oder rechte> Schaltfläche, um eine der folgenden Presets auszuwählen:

    • Lineare Voreinstellungen: elastic, bounceoder emphasized.

    • Kubische Bézier-Voreinstellungen:

    Timing-Schlüsselwort (keyword) Voreinstellung Cubic Bezier
    Erleichtertes Ein- und Aussteigen In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    Erleichtertes Ein- und Aussteigen In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
    Erleichtertes Ein- und Aussteigen In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    Erleichtertes Ein- und Aussteigen Schnell raus, langsam rein cubic-bezier(0.4, 0, 0.2, 1)
    Erleichtertes Ein- und Aussteigen Ein Aus, ein Rücken cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Timing-Schlüsselwort (keyword) Voreinstellung Cubic Bezier
    Erleichterte Bedienung In, Sine cubic-bezier(0.47, 0, 0.75, 0.72)
    Erleichterte Bedienung In, quadratisch cubic-bezier(0.55, 0.09, 0.68, 0.53)
    Erleichterte Bedienung In, Kubisch cubic-bezier(0.55, 0.06, 0.68, 0.19)
    Erleichterte Bedienung In, Back cubic-bezier(0.6, -0.28, 0.74, 0.05)
    Erleichterte Bedienung Schnell ausgehend, linear in cubic-bezier(0.4, 0, 1, 1)
    Timing-Schlüsselwort (keyword) Voreinstellung Cubic Bezier
    Erleichterung Out, Sine cubic-bezier(0.39, 0.58, 0.57, 1)
    Erleichterung Out, Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
    Erleichterung Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    Erleichterung Linear Out, Slow In cubic-bezier(0, 0, 0.2, 1)
    Erleichterung Raus, Zurück cubic-bezier(0.18, 0.89, 0.32, 1.28)

Siehe auch:

Benutzerdefinierte Anzeigedauern konfigurieren

Um benutzerdefinierte Werte für Timing-Funktionen festzulegen, verwenden Sie die Kontrollpunkte auf den Linien:

  • Klicke bei linearen Funktionen auf eine beliebige Stelle auf der Linie, um einen Kontrollpunkt hinzuzufügen, und ziehe ihn. Um einen Kontrollpunkt zu entfernen, doppelklicke darauf.

    Ziehen eines Kontrollpunktes einer linearen Funktion

  • Ziehen Sie für kubische Bézier-Funktionen einen der Kontrollpunkte:

    Ziehen der Kontrollpunkte einer kubischen Bézier-Funktion

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

Siehe auch

Demos:

MDN:

GitHub:

Web.dev:

Blog zu Chrome für Entwickler:

Chrome-Dokumente:

material.io:

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Begriffen verwendet werden. Die Originalseite findet sich hier und wurde von Kayce Basques verfasst.

Creative Commons License Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.

  • Zuletzt aktualisiert um