Ungültige, überschriebene, inaktive und andere Preisvergleichsportale suchen

Sofia Emelianova

In diesem Leitfaden wird davon ausgegangen, dass Sie mit der Prüfung von CSS in den Chrome-Entwicklertools vertraut sind. Weitere Informationen zu den Grundlagen finden Sie unter CSS ansehen und ändern.

Von Ihnen verfasstes CSS prüfen

Angenommen, Sie haben einem Element CSS hinzugefügt und möchten sicherstellen, dass die neuen Stile richtig angewendet werden. Wenn Sie die Seite aktualisieren, sieht das Element wie zuvor aus. Ein Fehler ist aufgetreten.

Prüfen Sie als Erstes das Element und vergewissern Sie sich, dass der neue CSS-Code auch tatsächlich auf das Element angewendet wurde.

Manchmal wird der neue CSS-Code im Bereich Elemente > Stile angezeigt, aber er ist blasser Text, kann nicht bearbeitet werden, ist durchgestrichen oder hat ein Warn- oder Hinweissymbol daneben.

CSS im Bereich „Styles“

Im Bereich Styles werden viele Arten von CSS-Problemen erkannt und unterschiedlich hervorgehoben.

Übereinstimmende und nicht übereinstimmende Selektoren

Im Bereich Stile werden übereinstimmende Selektoren in normalem Text und nicht übereinstimmende Selektoren in blassem Text angezeigt.

Ungültige Werte und Deklarationen

Der Bereich Styles ist durchgestrichen und neben den folgenden Elementen werden Warnsymbole angezeigt:

• Eine vollständige CSS-Deklaration (Eigenschaft und Wert), wenn die CSS-Eigenschaft ungültig oder unbekannt ist.
• Nur der Wert, wenn die CSS-Eigenschaft gültig, aber der Wert ungültig ist.

Überschriebene

Im Bereich Styles werden Eigenschaften durchgestrichen, die gemäß der Kaskadierungsreihenfolge von anderen Eigenschaften überschrieben werden.

In diesem Beispiel überschreibt das Stilattribut width: 300px; für das Element width: 100% in der Klasse .youtube.

Inaktiv

Der Bereich Stile wird in blassem Text angezeigt. Neben den Eigenschaften, die gültig sind, aber aufgrund anderer Eigenschaften keine Wirkung haben, werden -Informationssymbole angezeigt.

Diese hellen Eigenschaften sind aufgrund der CSS-Logik und nicht aufgrund der kaskadierenden Reihenfolge inaktiv.

Wichtiger Hinweis : Helle inaktive Properties unterscheiden sich von hellen nicht übernommenen Properties. Inaktive Properties sind mit Symbolen gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol , um zu sehen, was schiefgelaufen ist.

In diesem Beispiel werden durch die Eigenschaft display: block; justify-content und align-items deaktiviert, die Flex- oder Rasterlayouts steuern.

Übernommen und nicht übernommen

Im Bereich Styles werden die Attribute in Inherited from <element-name>-Abschnitten abhängig von ihrer Standardübernahme aufgelistet:

• Standardmäßig übernommene Elemente in normalem Text.
• Nicht übernommene Inhalte werden standardmäßig in blassem Text angezeigt.

Wichtiger Hinweis:

• Helle, nicht übernommene Properties unterscheiden sich von hellen inaktiven Properties. Nicht übernommene Eigenschaften haben keine Symbole und befinden sich in den entsprechenden Bereichen.
• Das Überschreiben der Standardübernahme hat keinen Einfluss darauf, wie die Eigenschaften im Bereich Stile angezeigt werden: „blass“ oder „nicht“.

Kurzschrift

Mit Kurzform-Eigenschaften können Sie mehrere CSS-Eigenschaften gleichzeitig festlegen und Ihr Stylesheet besser lesbar machen. Da solche Properties jedoch kurz sind, übersehen Sie möglicherweise eine lange (genaue) Property, die eine durch die Kurzschreibweise implizierte Property überschreibt.

Im Bereich Styles werden Kurzeigenschaften als -Drop-down-Listen angezeigt, die alle gekürzten Eigenschaften enthalten.

In diesem Beispiel werden zwei von vier verkürzten Properties überschrieben.

Nicht bearbeitbar

Im Bereich Stile werden Eigenschaften, die nicht bearbeitet werden können, in kursiver Text angezeigt. Die CSS aus den folgenden Quellen können beispielsweise nicht bearbeitet werden:

• user agent stylesheet: Das Standard-Stylesheet von Chrome.

  

• Stilbezogene HTML-Attribute für das Element, z. B. Höhe, Breite, Farbe usw. Sie können sie im DOM-Baum bearbeiten. Dadurch wird der CSS-Bereich im Bereich Styles aktualisiert, aber nicht umgekehrt.

  In diesem Beispiel ist das Attribut height="48" für ein <svg>-Element auf 50 festgelegt. Dadurch wird die entsprechende Eigenschaft unter svg[Attributes Style] im Bereich Styles aktualisiert.

Untersuchen Sie ein Element, dessen Stil noch nicht Ihren Vorstellungen entspricht.

So können Sie herausfinden, was schiefgeht:

• CSS-Dokumentation und Selektor-Spezifität in den Kurzinfos im Bereich Stile
• Im Bereich Berechnet, um das „endgültige“ auf ein Element angewendete CSS zu sehen und mit dem von Ihnen deklarierten zu vergleichen.

Im Bereich Elemente > Stile wird der genaue Satz von CSS-Regeln in verschiedenen Stylesheets angezeigt. Im Bereich Elemente > Computed werden hingegen aufgelöste CSS-Werte aufgelistet, die Chrome zum Rendern eines Elements verwendet:

• Von der Vererbung abgeleitetes Preisvergleichsportal
• Cascade-Gewinner
• Langform-Eigenschaften (genau), nicht Kurzschreibweise (kurz)
• Berechnete Werte, z. B. font-size: 14px anstelle von font-size: 70%

CSS im Bereich „Berechnet“

Im Bereich Berechnet werden verschiedene Attribute ebenfalls unterschiedlich angezeigt.

Deklariert und übernommen

Im Bereich Berechnet werden die in einem Stylesheet deklarierten Eigenschaften in normaler Schriftart aufgelistet. Dies gilt sowohl für eigene als auch für übernommene Eigenschaften des Elements. Klicken Sie neben der Person auf das Symbol zum Maximieren , um die Quelle zu sehen.

Um die Deklaration im Bereich Styles zu sehen, bewegen Sie den Mauszeiger auf die maximierte Eigenschaft und klicken Sie auf die Pfeilschaltfläche .

Wenn Sie die Deklaration im Bereich Quellen sehen möchten, klicken Sie auf den Link zur Quelldatei.

Bei Properties mit mehreren Quellen wird im Bereich Berechnet zuerst die Kaskadengewinner angezeigt.

Laufzeit

Im Bereich Berechnet werden Attributwerte aufgelistet, die zur Laufzeit in blassem Text berechnet wurden.

In diesem Beispiel hat Chrome für das <ul>-Element Folgendes berechnet:

• Die width relativ zum übergeordneten Element <div>
• Den height im Verhältnis zu den untergeordneten Elementen, den beiden <li>-Elementen

Nicht übernommen und benutzerdefiniert

Damit im Bereich Berechnet alle Attribute und ihre Werte angezeigt werden, klicken Sie Alle anzeigen an. Zu allen Unterkünften gehören:

• Anfangswerte für nicht übernommene Properties in blassem Text
• Benutzerdefinierte Eigenschaften – mit einem Präfix -- im regulären Text. Solche Eigenschaften werden standardmäßig übernommen.

Wichtiger Hinweis:Das Überschreiben der Standardübernahme wirkt sich nicht darauf aus, wie die Attribute im Bereich Berechnet angezeigt werden: „blass“ oder „nicht“.

Wenn Sie diese große Liste in Kategorien unterteilen möchten, aktivieren Sie das Kontrollkästchen Gruppe.

In diesem Beispiel sehen Sie die Anfangswerte für nicht übernommene Eigenschaften unter Animation und benutzerdefinierte Eigenschaften unter CSS-Variablen.

Nach Duplikaten suchen

Um eine bestimmte Eigenschaft und ihre potenziellen Duplikate zu untersuchen, geben Sie den Namen der Eigenschaft in das Textfeld Filter ein. Dies ist sowohl im Bereich Styles als auch im Bereich Berechnet möglich.

Weitere Informationen finden Sie unter CSS-Code eines Elements suchen und filtern.

Nicht verwendete CSS finden

Siehe Abdeckung: Nicht verwendeten JavaScript- und CSS-Code finden