Was bedeutet es, wenn Chrome Dev Tools eine berechnete Eigenschaft ausgegraut anzeigt?

92

Bitte beachten Sie, dass nicht das Bedienfeld „Stile“ (ich weiß, was ausgegraut in diesem Kontext bedeutet - nicht angewendet), sondern das nächste Bedienfeld, das Bedienfeld „Berechnete Eigenschaften“.

Was bedeutet es, wenn eine berechnete Eigenschaft ausgegraut angezeigt wird?

Beispiel:

Geben Sie hier die Bildbeschreibung ein

css google-chrome google-chrome-devtools AmbroseChapel
quelle
Mögliches Duplikat von Was bedeutet es, wenn eine CSS-Regel im Elementinspektor von Chrome abgeblendet ist?
estellezg
Kayce Basken von Google hat dieses Dokument berechnete Eigenschaften in devtools und die doc aktualisiert grau Einträge zu decken
Cateyes

Antworten:

62

NB: Diese Antwort hat keine soliden Beweise, sie basiert auf meinen Beobachtungen während der Zeit.

Die grau berechneten Eigenschaften sind weder Standard noch vererbt. Dies tritt nur bei Eigenschaften auf, die nicht für das Element definiert wurden, sondern entweder aus den untergeordneten oder übergeordneten Elementen basierend auf dem Rendern des Laufzeitlayouts berechnet wurden.

Nehmen Sie diese einfache Seite als Beispiel, displayist Standard und font-sizewird vererbt:

<style>
  div { font-size: 13px; }
</style>
<div>
  <p>asdf</p>
</div>

Geben Sie hier die Bildbeschreibung ein

In diesem speziellen Beispiel heightwird der untergeordnete <p>Textknoten (Schriftgröße plus Zeilenhöhe) widthaus der übergeordneten <div>Breite berechnet, die auch aus dem übergeordneten Textknoten berechnet wird <body>.

EDIT: Nun, ich dachte noch einmal, hier ist meine meinungsbasierte Antwort. Ich sollte mir später wirklich den Chromium-Quellcode ansehen: D.

Durch Erweitern dieser Pfeile können Sie sehen, welche tatsächliche Regel auf das Element angewendet wird, und zwar unter allen dagegen definierten (entweder direkt oder geerbt, entweder vom Entwickler oder vom Browser):

Geben Sie hier die Bildbeschreibung ein

Hier können Sie bis zu jeder Definition zurückverfolgen, einschließlich der im Browser integrierten Regeln, und mit dem CSS-Kaskadenmechanismus (Überschreiben) nachsehen.

Für Elemente, die keine CSS-Definition haben (keine direkt definierte, keine geerbte, kein eingebauter Browser), müssen Sie keine Quelle verfolgen. Und die Eigenschaftswerte werden vollständig zur Laufzeit berechnet.

Wenn Sie Alle anzeigen aktivieren, werden mehr graue Eigenschaften angezeigt. Diese sind auch nirgendwo definiert. Im Gegensatz zu den vorherigen Screenshots werden diese jedoch nicht zur Laufzeit berechnet - es handelt sich um den Standardwert der CSS-Spezifikation.

Geben Sie hier die Bildbeschreibung ein

Löwe
quelle
2
Das macht Sinn. Ein weiteres Detail: Ausgegraute Eigenschaften können nicht wie die anderen angeklickt werden, um den Ursprung ihrer Werte in einer bestimmten Deklaration anzuzeigen.
AmbroseChapel
@ AmbroseChapel Ich dachte noch einmal nach und aktualisierte meine Antwort. Ich sollte wirklich den Quellcode lesen. Gute Frage.
Leo
Es ist sicherlich sinnvoll, dass die Graueigenschaften sind, run-time calculatedda die Graueigenschaften normalerweise "Höhe" und "Breite" sind. Wenn Sie darüber nachdenken, sind dies Werte, die dynamisch von den untergeordneten Elementen eines Elements abhängen (z. B. Textmenge und Schriftgröße von) der im Element enthaltene Text oder die Breite des übergeordneten Elements, wenn das Element eine Breite hat: 100%)
Niko Bellic
4
Eine nette CDT-Funktion hierfür wäre: Um zu sehen, wie die Werte berechnet werden, heißt das: Welche Elemente addieren sich zum widthBeispiel zum Stil?
Legenden