DevTools-tips: Ontdek CSS-problemen

Sofia Emelianova

Heb je ooit CSS op een element toegepast, maar werkt het gewoon niet?

Met Chrome DevTools kunt u CSS-problemen in één oogopslag ontdekken, debuggen en testen.

Bekijk de video om te zien hoe het paneel Elementen > Stijlen verschillende CSS-problemen belicht:

• Eigenschap met ongeldige syntaxis

• Overschreven eigenschap

• Inactieve eigenschap

• Geërfd van parent

  • Geërfde eigendom
  • Niet-geërfd bezit

• Uitbreidbare steno-eigenschap

  • Overschreven eigenschap met de hand geschreven
  • Actief eigendom van de hand

stylesheet voor user-agents

• Niet-bewerkbare eigenschap
• Overschreven niet-bewerkbare eigenschap

Meer foutopsporingstips:

• Gebruik het filter in het deelvenster Stijlen om u te concentreren op die ene woning die u interesseert.
• Gebruik het venster Berekend om alle Cascade- winnaars en hun berekende waarden te bekijken.
• Vouw in het deelvenster Berekend een eigenschap uit en klik op een koppeling om de bron ervan te vinden in het deelvenster Stijlen .

Zie Ongeldige, overschreven, inactieve en andere CSS zoeken voor meer informatie over alle manieren waarop DevTools CSS-problemen benadrukt.

Zie CSS leren om uw CSS-expertise naar een hoger niveau te tillen.

Zie Leer Responsive Design voor meer informatie over het maken van websites die er geweldig uitzien en voor iedereen goed werken.