Tipps zu Entwicklertools: CSS-Probleme erkennen

Sofia Emelianova
Sofia Emelianova

Haben Sie schon einmal CSS auf ein Element angewendet, aber es funktioniert einfach nicht?

Mit den Chrome-Entwicklertools können Sie CSS-Probleme auf einen Blick erkennen, beheben und testen.

Im Video erfahren Sie, wie im Bereich Elemente > Stile verschiedene CSS-Probleme hervorgehoben werden:

  • Warnung. Eigenschaft mit ungültiger Syntax

  • Kästchen. Überschriebene Property

  • Kästchen. Inaktive Property Informationen.Mit einem Hinweis.

  • Von parent übernommen

    • Kästchen. Übernommene Property
    • Kästchen. Nicht übernommenes Attribut
  • Kästchen. Erweiterbares Kurzzeichenattribut Maximieren.

    • Kästchen. Überschriebenes Longhand-Attribut
    • Kästchen. Aktive Longhand-Property

User-Agent-Stylesheet

  • Nicht bearbeitbare Property
  • Überschriebenes, nicht bearbeitbares Attribut

Weitere Tipps zur Fehlerbehebung:

  • Mit dem Filter im Bereich Stile können Sie sich auf die Property konzentrieren, die Sie interessiert.
  • Im Bereich Berechnet sehen Sie alle Gewinner der Cascade und ihre berechneten Werte.
  • Maximieren Sie im Bereich Berechnet eine Property und klicken Sie auf einen Link, um die Quelle im Bereich Stile zu finden.

Weitere Informationen dazu, wie in den DevTools CSS-Probleme hervorgehoben werden, finden Sie unter Ungültiges, überschriebenes, inaktives und anderes CSS finden.

Weitere Informationen zu CSS finden Sie unter CSS lernen.

Informationen zum Erstellen von Websites, die gut aussehen und für alle Nutzer gut funktionieren, finden Sie unter Responsives Design lernen.