Referentie voor CSS-functies

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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.

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 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 .

Navigeren met links

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:

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 .

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

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

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

Specificiteit van de weergaveselector

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

Bekijk de waarden van aangepaste eigenschappen

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

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 .

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 CSS at-regels

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

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

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:

Als uw browser de lab() functie ondersteunt, is het element groen, anders is het paars.

Bekijk @scope at-regels

Op het tabblad Stijlen worden de CSS @scope at-regels weergegeven als deze op een element zijn toegepast.

De nieuwe @scope at-regels maken deel uit van de CSS Cascading and Inheritance Level 6-specificatie . Met deze regels kunt u CSS-stijlen afbakenen, met andere woorden: stijlen expliciet toepassen op specifieke elementen.

Bekijk de @scope -regel in het volgende voorbeeld:

1. Bekijk de tekst op de kaart in het voorbeeld.
2. Zoek op het tabblad Stijlen naar de regel @scope .

In dit voorbeeld overschrijft de @scope -regel de globale CSS background-color voor alle <p> -elementen in elementen met een card .

Om de @scope -regel te bewerken, dubbelklikt u erop.

Bekijk @font-palette-values ​​at-rules

Met de CSS-at-regel @font-palette-values ​​kun je de standaardwaarden van de eigenschap font-palette aanpassen. Elementen > Stijlen toont deze at-regel in een speciale sectie.

Bekijk de sectie @font-palette-values ​​in de volgende preview:

1. Bekijk de tweede tekstregel in het voorbeeld.
2. Zoek in Stijlen naar het gedeelte @font-palette-values .

In dit voorbeeld overschrijven de waarden in het lettertypepalet --New de standaardwaarden van het gekleurde lettertype.

Als u uw aangepaste waarden wilt bewerken, dubbelklikt u erop.

Bekijk @position-try at-rules

Met de CSS-regel @position-try en de eigenschap position-try-options kunt u alternatieve ankerposities voor elementen definiëren. Zie Introductie van de CSS-ankerpositionerings-API voor meer informatie.

Elementen > Stijlen lost het volgende op en koppelt het:

• position-try-options eigenschapswaarden naar een speciale @position-try --name sectie.
• position-anchor eigenschapswaarden en anchor() argumenten aan de overeenkomstige elementen met popovertarget kenmerken.

Bekijk de waarden van position-try-options en de secties @position-try in het volgende voorbeeld:

1. Open in het voorbeeld het submenu, klik op UW ACCOUNT en vervolgens op STOREFRONT .
2. Bekijk het element met id="submenu" in de preview.
3. Zoek in Stijlen de eigenschap position-try-options en klik op de waarde --bottom . Het tabblad Stijlen brengt u naar de bijbehorende sectie @position-try .
4. Klik op de link position-anchor ankerwaarde of dezelfde anchor() argumenten. Het paneel Elementen selecteert het element met het bijbehorende popovertarget attribuut en het tabblad Stijlen toont de CSS van het element.

Om waarden te bewerken, dubbelklikt u erop.

Bekijk het boxmodel van een element

Om het boxmodel van een element te bekijken, gaat u naar het tabblad Stijlen en klikt u op de knop Knop Zijbalk weergeven in de actiebalk.

Om een ​​waarde te wijzigen, dubbelklikt u erop.

Zoek en filter de CSS van een element

Gebruik het filtervak ​​op de tabbladen Stijlen en Berekend om te zoeken naar specifieke CSS-eigenschappen of -waarden.

Als u ook naar geërfde eigenschappen op het tabblad Berekend wilt zoeken, vinkt u het selectievakje Alles weergeven aan.

Om naar het tabblad Berekend te navigeren, groepeert u de gefilterde eigenschappen in samenvouwbare categorieën door Groeperen aan te vinken.

Een gerichte pagina emuleren

Als u de focus van de pagina naar DevTools verplaatst, worden sommige overlay-elementen automatisch verborgen als ze door de focus worden geactiveerd. Bijvoorbeeld vervolgkeuzelijsten , menu's of datumkiezers. Met de optie 'Een pagina met focus emuleren' kunt u een dergelijk element debuggen alsof het de focus heeft.

Probeer een gerichte pagina na te bootsen op deze demopagina :

1. Focus op het invoerelement. Een ander element verschijnt eronder.
2. Open DevTools . Het DevTools-venster staat nu in focus in plaats van de pagina, waardoor het element weer verdwijnt.
3. Klik in Elementen > Stijlen op :hov , vink het vakje ' Een gefocuste pagina emuleren' aan en zorg ervoor dat het invoerelement is geselecteerd . Je kunt nu het onderliggende element inspecteren.