CSS-Kurs / CSS mit DevTools prüfen: Styles und Computed

Browser-Entwicklertools ermöglichen es Ihnen, zu überprüfen, welche CSS-Deklarationen auf ein Element zutreffen und welche Werte letztendlich verwendet werden. Styles erklärt passende und überschriebene Regeln, während Computed Ihnen hilft, die resultierenden Eigenschaftswerte zu prüfen; Änderungen in DevTools sind normalerweise vorübergehend.

Bereiten Sie das Beispiel und das erwartete Ergebnis vor

Speichern Sie den gesamten Code unten als index.html im UTF-8-Format und öffnen Sie ihn in Ihrem Browser. In diesem Beispiel wird der Absatz mit den Öffnungszeiten in Grün und der erste allgemeine Absatz in Grau angezeigt. Der Hinweis hat 16px Innenabstand und einen hellen Hintergrund, um einen Vergleich der Ergebnisse nach Attributen zu ermöglichen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

Da wir das CSS zusammen mit dem HTML-Body im style-Element platziert haben, befindet sich die Quelle für die Übung in einer Datei. Wenn Sie bereits mit externem CSS üben, können Sie dieselbe Regel in style.css setzen, aber der Dateiname und die Zeilennummer, die in den Entwicklertools angezeigt werden, werden unterschiedlich sein. Nachdem Sie bestätigt haben, dass der erwartete Text auf dem Bildschirm erscheint, öffnen Sie die Entwicklertools.

Wählen Sie das richtige Element in Elements

1. Klicken Sie mit der rechten Maustaste auf den Satz „We open at 9 a.m. every day.“ auf der Seite und wählen Sie Inspect (Untersuchen). In Chrome oder Edge unter Windows können Sie auch die DevTools mit F12 oder Ctrl+Shift+I öffnen.
2. Überprüfen Sie im Tab Elements, dass die ausgewählte Zeile <p class="notice"> ist. Wenn ein anderes Element ausgewählt ist, drücken Sie das Elementauswahlwerkzeug und wählen Sie die Mitteilung erneut aus. Der Standort der Werkzeuge und die Menüsprache können je nach Browser/Version variieren.
3. Öffnen Sie Styles neben oder unter dem ausgewählten Element. Beachten Sie, dass sowohl die .notice- als auch die p-Regeln sichtbar sind. In schmalen Fenstern können die Panels unten platziert sein oder einige Tabs ins Übersicht-Menü passen.

Was Elements anzeigt, ist das Document Object Model (DOM), also die vom Browser interpretierte Dokumentstruktur. Sie sieht nicht immer genauso aus wie der Seitenquelltext. Wenn ein Browser fehlerhaftes HTML korrigiert oder JavaScript ein Element ersetzt, muss die tatsächliche Auswahl anhand der in Elements angezeigten Struktur bestimmt werden.

Das Diagramm fasst die Beziehung zwischen den Übereinstimmungsregeln in Styles und dem Endwert in Computed zusammen. Es handelt sich um eine erklärende Illustration, keinen Screenshot eines neuen Tests. Öffnen Sie in DevTools Computed und filtern Sie nach color, um denselben Wert zu prüfen. Die Panels können je nach Browserlayout und -version an unterschiedlichen Stellen erscheinen.

Vergleichen Sie Styles und Computed

Styles zeigt Regeln, die mit dem ausgewählten Element übereinstimmen, Inline-Stile, die direkt am Element geschrieben sind, und vererbungsbezogene Regeln. Sowohl p { color: #666; } als auch .notice { color: #087f5b; } passen auf den Hinweis, aber die endgültige Textfarbe ist grün. Dies liegt daran, dass der Klassenselektor in diesem Beispiel eine höhere Priorität hat als der Elemente-Selektor unter derselben Bedingung gleicher Herkunft, Wichtigkeit und Kaskadenebene.

Wenn Sie einen durchgestrichenen Eintrag in einer grau gefärbten Deklaration sehen, überprüfen Sie zuerst die Möglichkeit, dass nicht „die Syntax war falsch“, sondern eher „eine andere Deklaration hat gewonnen“. Die Bedeutung von Durchstreichungen und Warnzeichen kann je nach Ort und Situation variieren, also fahren Sie mit der Maus über die Deklaration und lesen Sie die Erklärung. padding: 16px ist eine separate Eigenschaft von color, daher können sie auch bei einem Farbkonflikt zusammen angewendet werden.

Computed wird verwendet, um den endgültig berechneten Stil für das ausgewählte Element zu überprüfen. Öffnen Sie den Tab und geben Sie color im Filter ein, um die Textfarbe zu finden. #087f5b kann als rgb(8, 127, 91) angezeigt werden, und sie haben die gleiche Farbe. Erweitern Sie eine Eigenschaft, um verwandte Regeln und Quellen zu verfolgen. Einige Eigenschaften können in der Standardliste ausgeblendet sein, daher sollten Sie auch die Anzeigeoptionen überprüfen.

Die Dokumentation zu den CSS-Funktionen der Chrome DevTools erklärt die Panels und wie man Deklarationen bearbeitet. Um zu verstehen, warum Deklarationen in Konflikt stehen, vergleichen Sie die bedingten Beispiele in Vererbung, Spezifität und Kaskade.

Schalten Sie Deklarationen um und bearbeiten Sie Werte

1. Suchen Sie unter Styles nach der .notice-Deklaration von color: #087f5b. Wenn Sie das Kontrollkästchen neben einer Deklaration deaktivieren, wird diese Deklaration nur vorübergehend ausgeschlossen. Überprüfen Sie daher, ob sich die Farbe der Meldung für die p-Regel in Grau ändert.
2. Schalten Sie das Kontrollkästchen wieder ein, um es auf seine ursprüngliche grüne Farbe zurückzusetzen. Klicken Sie dann auf den Farbwert, ändern Sie ihn auf #1d4ed8 und drücken Sie die Eingabetaste. Überprüfen Sie, dass sich nur der Text in der Meldung in Blau ändert und die Hintergrundfarbe hellgrün bleibt.
3. Überprüfen Sie die Textfarbe erneut unter Computed. Wenn dort rgb(29, 78, 216) steht, entspricht sie der von Ihnen geänderten blauen Farbe. Der Hintergrund ist eine separate Eigenschaft namens background-color.
4. Dieses Labor hat keine Speicherverbindung oder lokale Überschreibungen eingerichtet, daher verschwindet die Farbe, die Sie in den Entwicklertools geändert haben, beim Aktualisieren, und Sie kehren zur ursprünglichen grünen Farbe zurück. Nachdem bestätigt wurde, dass das Original nicht geändert wurde, fahren Sie mit dem nächsten Schritt fort.

Deklarationen, die deaktiviert wurden, können wiederhergestellt werden, indem Sie das Kontrollkästchen wieder aktivieren, und falsch geänderte Werte können durch erneute Eingabe der vorhandenen Werte wiederhergestellt werden. Wenn Sie alle anderen Änderungen auf einmal entfernen möchten, aktualisieren Sie die Seite, ohne die Speicherfunktion zu aktivieren, wie in dieser Übung. Wenn Sie die Arbeitsbereichsverknüpfung oder lokale Überschreibung aktiviert haben, kann sich die Art und Weise, wie sie gespeichert und verwaltet wird, ändern, daher sollten Sie nicht davon ausgehen, dass sie durch ein Aktualisieren wiederhergestellt wird.

Speichern Sie eine bestätigte Änderung in der Quelldatei

Klicken Sie auf den Quell-Dateinamen und die Zeilennummer einer Regel in Styles, um diese zu finden. Da dieses Beispiel CSS in HTML einbettet, bearbeiten Sie die entsprechende Regel in der ursprünglichen index.html. Für ein externes Stylesheet öffnen Sie die dort angegebene Datei, beispielsweise style.css. Überprüfen Sie den Pfad, bevor Sie eine gleichnamige Kopie bearbeiten. Für weitere Details siehe CSS mit Inline-, internen und externen Styles anwenden.

1. Öffnen Sie die index.html, die Sie tatsächlich in einem Texteditor geöffnet hatten. Wenn Sie die Datei in mehrere Ordner kopiert haben, stellen Sie sicher, dass der Dateipfad mit der Browseradresse übereinstimmt.
2. Ändern Sie den Farbwert der Original-.notice-Regel zu #1d4ed8 und speichern Sie.
3. Aktualisieren Sie Ihren Browser. Wenn Sie ihn jetzt erneut öffnen und die Meldung in Blau erscheint, wurde sie im Original übernommen.
4. Um nach Abschluss der Übung zum Originaldesign zurückzukehren, stellen Sie die ursprüngliche Farbe von #087f5b wieder her und speichern/aktualisieren Sie.

Unterscheiden Sie drei häufige CSS-Fehler

Für jede Situation ändern Sie das Original nacheinander, speichern/aktualisieren Sie, überprüfen Sie, und setzen Sie es dann zurück. Im ersten Fall erscheint die absichtlich falsch geschriebene Regel .notcie möglicherweise nicht unter den auf das ausgewählte Element passenden Regeln in Styles. In der dritten Situation variiert die Art und Weise, wie die Warnung angezeigt wird, je nachdem, wo sie erstellt wurde und welche Browserversion verwendet wird. Indem Sie die Fälle in solche unterteilen, in denen keine Regel vorhanden ist, in denen eine Regel vorhanden ist, diese aber überschrieben wurde, und in denen die Deklaration selbst ungültig ist, können Sie sehen, wo Sie sie korrigieren müssen.