Referentie voor CSS-functies

Kayce Basken
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Ontdek nieuwe workflows in deze uitgebreide referentie van Chrome DevTools-functies met betrekking tot het bekijken en wijzigen van CSS.

Zie CSS bekijken en wijzigen voor de basisbeginselen.

Selecteer een element

Met het Elementenpaneel van DevTools kunt u de CSS van één element tegelijk bekijken of wijzigen.

Een voorbeeld van een geselecteerd element.

Op de schermafbeelding is het h1 element dat blauw gemarkeerd is in de DOM-structuur het geselecteerde element. Rechts worden de stijlen van het element weergegeven op het tabblad Stijlen . Links is het element gemarkeerd in de viewport, maar alleen omdat de muis eroverheen beweegt in de DOM-structuur .

Zie De CSS van een element bekijken voor een tutorial.

Er zijn verschillende manieren om een ​​element te selecteren:

  • Klik met de rechtermuisknop op het element in uw viewport en selecteer Inspecteren .
  • Klik in DevTools op Selecteer een element Selecteer een element of druk op Command + Shift + C (Mac) of Control + Shift + C (Windows, Linux) en klik vervolgens op het element in het venster.
  • Klik in DevTools op het element in de DOM-boom .
  • Voer in DevTools een query uit zoals document.querySelector('p') in de Console , klik met de rechtermuisknop op het resultaat en selecteer vervolgens Weergeven in elementenpaneel .

CSS bekijken

Gebruik de tabbladen Elementen > Stijlen en Berekend om CSS-regels te bekijken en CSS-problemen te diagnosticeren .

Op het tabblad Stijlen worden op verschillende plaatsen koppelingen naar andere plaatsen weergegeven, waaronder maar niet beperkt tot:

  • Naast CSS-regels, stijlbladen en CSS-bronnen. Dergelijke links openen het paneel Bronnen . Als het stijlblad is verkleind, zie Een verkleind bestand leesbaar maken .
  • In de secties Overgenomen van ... , naar bovenliggende elementen.
  • In var() -aanroepen, naar aangepaste eigenschapsdeclaraties .
  • In animation worden eigenschappen in het kort aangeduid met @keyframes .
  • Meer informatie vindt u in de documentatietooltips.
  • En nog veel meer.

Hieronder worden er enkele uitgelicht:

Verschillende links gemarkeerd.

Links kunnen een andere stijl hebben. Als je niet zeker weet of iets een link is, klik er dan op om erachter te komen.

Bekijk tooltips met CSS-documentatie, specificiteit en aangepaste eigenschapswaarden

Onder Elementen > Stijlen worden tooltips met nuttige informatie weergegeven wanneer u met de muis over specifieke elementen beweegt.

Bekijk CSS-documentatie

Als u een tooltip met een korte CSS-beschrijving wilt zien, beweegt u de muis over de naam van de eigenschap op het tabblad Stijlen .

De tooltip met documentatie over een CSS-eigenschap.

Klik op Meer informatie om naar een MDN CSS-referentie over deze eigenschap te gaan.

Om de tooltips uit te schakelen, vinkt u aan Selectievakje. Niet tonen .

Om ze weer in te schakelen, controleer Instellingen. Instellingen > Voorkeuren > Elementen > Selectievakje. Toon CSS-documentatietooltips .

Specificiteit van de weergaveselector

Beweeg de muis over een selector om een ​​tooltip met het specificiteitsgewicht te zien.

De tooltip met specificiteitsgewicht van een overeenkomende selector.

Bekijk de waarden van aangepaste eigenschappen

Beweeg de muis over een --custom-property om de waarde ervan in een tooltip te bekijken.

De waarde van een aangepaste eigenschap in een tooltip.

Bekijk ongeldige, overschreven, inactieve en andere CSS

Het tabblad Stijlen herkent veel soorten CSS-problemen en markeert ze op verschillende manieren.

Zie CSS begrijpen op het tabblad Stijlen .

Bekijk alleen de CSS die daadwerkelijk op een element is toegepast

Het tabblad Stijlen toont alle regels die van toepassing zijn op een element, inclusief overschreven declaraties. Als u niet geïnteresseerd bent in overschreven declaraties, gebruikt u het tabblad Berekend om alleen de CSS te bekijken die daadwerkelijk op een element wordt toegepast.

  1. Selecteer een element .
  2. Ga naar het tabblad Berekend in het paneel Elementen .

Het tabblad Berekend.

Vink het vakje 'Alles weergeven' aan om alle eigenschappen te zien.

Zie CSS begrijpen op het tabblad Berekend .

Bekijk CSS-eigenschappen in alfabetische volgorde

Gebruik het tabblad Berekend . Zie Alleen de CSS bekijken die daadwerkelijk op een element is toegepast .

Overgenomen CSS-eigenschappen bekijken

Vink het vakje Alles weergeven aan op het tabblad Berekend . Zie Alleen de CSS weergeven die daadwerkelijk op een element is toegepast .

U kunt ook door het tabblad Stijlen scrollen en secties zoeken met de naam Inherited from <element_name> .

Bekijk de sectie Overgenomen van... van het tabblad Stijlen.

Bekijk CSS at-regels

At-regels zijn CSS-statements waarmee je CSS-gedrag kunt bepalen. Elementen > Stijlen toont de volgende at-regels in speciale secties:

Bekijk @property at-regels

Met de CSS at-rule @property kunt u CSS-eigenschappen expliciet definiëren en deze registreren in een stijlblad zonder dat u JavaScript hoeft uit te voeren.

Beweeg de muis over de naam van een eigenschap op het tabblad Stijlen . Er verschijnt een tooltip met de waarde van de eigenschap, beschrijvingen en een koppeling naar de registratie ervan in de uitvouwbare sectie @property onder aan het tabblad Stijlen .

Om een @property -regel te bewerken, dubbelklikt u op de naam of waarde ervan.

Bekijk @supports at-regels

Op het tabblad Stijlen ziet u de @supports CSS at-regels als deze op een element zijn toegepast. Bekijk bijvoorbeeld het volgende element: