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.

U vindt dezelfde optie ook in het paneel Rendering .

Zie Scherm bevriezen en verdwijnende elementen inspecteren voor meer manieren om een ​​element te bevriezen.

Een pseudo-klasse in- of uitschakelen

Om een ​​pseudo-klasse in of uit te schakelen:

1. Selecteer een element .
2. Ga in het paneel Elementen naar het tabblad Stijlen .
3. Klik op :hov .
4. Selecteer de pseudo-klasse die u wilt inschakelen.

In dit voorbeeld ziet u dat DevTools de background-color -declaratie toepast op het element, ook al beweegt u niet daadwerkelijk met de muis over het element.

Op het tabblad Stijlen worden de volgende pseudo-klassen voor alle elementen weergegeven:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Bovendien kunnen sommige elementen hun eigen pseudoklassen hebben. Wanneer u een dergelijk element selecteert, toont het tabblad Stijlen de sectie Specifieke elementstatus forceren, die u kunt uitvouwen en pseudoklassen kunt inschakelen die specifiek zijn voor het element.

Zie Een pseudostatus toevoegen aan een klasse voor een interactieve tutorial.

Bekijk geërfde gemarkeerde pseudo-elementen

Met pseudo-elementen kunt u specifieke onderdelen van elementen stylen. Pseudo-elementen met een highlight-status zijn documentgedeelten met de status "geselecteerd" en worden gestyled als "gemarkeerd" om deze status aan de gebruiker te laten zien. Voorbeelden van dergelijke pseudo-elementen zijn ::selection , ::spelling-error , ::grammar-error en ::highlight .

Zoals in de specificatie wordt vermeld, bepaalt cascade welke stijl wint als er meerdere stijlen met elkaar in conflict zijn.

Om de overerving en prioriteit van de regels beter te begrijpen, kunt u de overgeërfde pseudo-markeringselementen bekijken:

1. Bekijk de onderstaande tekst .

   Ik heb de stijl van het pseudo-highlight-element van mijn ouders geërfd. Kies mij!

2. Selecteer een deel van de tekst hierboven.

3. Scrol op het tabblad Stijlen naar beneden tot u de sectie Inherited from ::selection pseudo of... vindt.

Cascadelagen bekijken

Cascadelagen bieden meer expliciete controle over uw CSS-bestanden om stijlspecifieke conflicten te voorkomen. Dit is handig voor grote codebases, ontwerpsystemen en bij het beheren van stijlen van derden in applicaties.

Om cascadelagen te bekijken, bekijkt u het volgende element en opent u Elementen > Stijlen .

Bekijk op het tabblad Stijlen de 3 cascadelagen en hun stijlen: page , component en base .

Om de volgorde van de lagen te bekijken, klikt u op de laagnaam of op de Knop om CSS-lagen te bekijken/bekijken .

De page heeft de hoogste specificiteit en daarom is de achtergrond van het element groen.

Een pagina in afdrukmodus bekijken

Om een ​​pagina in afdrukmodus te bekijken:

1. Open het opdrachtmenu .
2. Begin met het typen Rendering en selecteer Show Rendering .
3. Selecteer afdrukken in de vervolgkeuzelijst CSS-media emuleren .

Bekijk gebruikte en ongebruikte CSS met het tabblad Dekking

Op het tabblad Dekking ziet u welke CSS een pagina daadwerkelijk gebruikt.

1. Druk op Command + Shift + P (Mac) of Control + Shift + P (Windows, Linux, ChromeOS) terwijl DevTools in focus is om het opdrachtmenu te openen.

2. Begin met typen van coverage .

   

3. Selecteer Dekking weergeven . Het tabblad Dekking verschijnt.

   

4. Klik Opnieuw laden . De pagina wordt opnieuw geladen en het tabblad Dekking geeft een overzicht van hoeveel CSS (en JavaScript) er wordt gebruikt van elk bestand dat de browser laadt.

   

   Groen staat voor gebruikte CSS. Rood staat voor ongebruikte CSS.

5. Klik op een CSS-bestand om in het bovenstaande voorbeeld een uitsplitsing per regel te zien van de CSS die het bestand gebruikt.

   

   Op de schermafbeelding zijn regels 55 tot en met 57 en 65 tot en met 67 van devsite-google-blue.css niet gebruikt, terwijl regels 59 tot en met 63 wel worden gebruikt.

Afdrukvoorbeeldmodus forceren

Zie DevTools dwingen om in de afdrukvoorbeeldmodus te gaan .

CSS kopiëren

Via een enkel dropdownmenu op het tabblad Stijlen kunt u afzonderlijke CSS-regels, declaraties, eigenschappen en waarden kopiëren

Je kunt bovendien CSS-eigenschappen kopiëren in de JavaScript-syntaxis. Deze optie is handig als je CSS-in-JS- bibliotheken gebruikt.

Om CSS te kopiëren:

1. Selecteer een element .
2. Klik met de rechtermuisknop op een CSS-eigenschap op het tabblad Elementen > Stijlen .

3. Selecteer een van de volgende opties uit het keuzemenu:

   • Kopieer declaratie . Kopieert de eigenschap en de waarde ervan in CSS-syntaxis: css property: value;
   • Eigenschap kopiëren . Kopieert alleen de property .
   • Waarde kopiëren . Kopieert alleen de value .
   • Kopieer regel . Kopieert de volledige CSS-regel: css selector[, selector] { property: value; property: value; ... }
   • Kopieer de declaratie als JS . Kopieert de eigenschap en de bijbehorende waarde in JavaScript-syntaxis: js propertyInCamelCase: 'value'
   • Kopieer alle declaraties . Kopieert alle eigenschappen en hun waarden in de CSS-regel: css property: value; property: value; ...

   • Kopieer alle declaraties als JS . Kopieert alle eigenschappen en hun waarden in JavaScript-syntaxis: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Kopieer alle CSS-wijzigingen . Kopieert de wijzigingen die u op het tabblad Stijlen aanbrengt naar alle declaraties.

   • Berekende waarde bekijken . Brengt u naar het tabblad Berekend .

CSS wijzigen

In deze sectie worden alle manieren weergegeven waarop u CSS kunt wijzigen in Elementen > Stijlen .

Bovendien kunt u:

• Overschrijf CSS tijdens het laden van de pagina .
• Sla aangepaste CSS op in uw lokale bronnen in een werkruimte .

Voeg een CSS-declaratie toe aan een element

Omdat de volgorde van declaraties van invloed is op de stijl van een element, kunt u declaraties op verschillende manieren toevoegen:

• Voeg een inline-declaratie toe . Dit is gelijk aan het toevoegen van een style aan de HTML van het element.
• Voeg een declaratie toe aan een stijlregel .

Welke workflow moet u gebruiken? Voor de meeste scenario's wilt u waarschijnlijk de inline-declaratieworkflow gebruiken. Inline-declaraties hebben een hogere specificiteit dan externe declaraties, dus de inline-workflow zorgt ervoor dat de wijzigingen in het element worden doorgevoerd zoals verwacht. Zie Selectortypen voor meer informatie over specificiteit.

Als u de stijlen van een element debugt en specifiek wilt testen wat er gebeurt als een declaratie op verschillende plaatsen wordt gedefinieerd, gebruikt u de andere workflow.

Voeg een inline-declaratie toe

Om een ​​inline-declaratie toe te voegen:

1. Selecteer een element .
2. Klik op het tabblad Stijlen tussen de haakjes van de sectie element.style . De cursor krijgt focus, zodat u tekst kunt invoeren.
3. Voer een eigenschapsnaam in en druk op Enter .

4. Voer een geldige waarde voor die eigenschap in en druk op Enter . In de DOM-boom kunt u zien dat er een style aan het element is toegevoegd.

   

   Op de schermafbeelding zijn de eigenschappen margin-top en background-color toegepast op het geselecteerde element. In de DOM-boomstructuur worden de declaraties weergegeven in het style van het element.

Een declaratie toevoegen aan een stijlregel

Om een ​​declaratie aan een bestaande stijlregel toe te voegen:

1. Selecteer een element .
2. Klik op het tabblad Stijlen tussen de haakjes van de stijlregel waaraan u de declaratie wilt toevoegen. De cursor krijgt focus, zodat u tekst kunt invoeren.
3. Voer een eigenschapsnaam in en druk op Enter .
4. Voer een geldige waarde voor die eigenschap in en druk op Enter .

Op de schermafbeelding krijgt een stijlregel de nieuwe border-bottom-style:groove declaratie.

De naam of waarde van een declaratie wijzigen

Dubbelklik op de naam of waarde van een declaratie om deze te wijzigen. Zie Opsombare waarden wijzigen met sneltoetsen voor sneltoetsen om een ​​waarde snel te verhogen of te verlagen met 0,1, 1, 10 of 100 eenheden.

Wijzig opsombare waarden met sneltoetsen

Wanneer u een opsombare waarde van een declaratie bewerkt, bijvoorbeeld font-size , kunt u de volgende sneltoetsen gebruiken om de waarde met een vast bedrag te verhogen:

• Option + Omhoog (Mac) of Alt + Omhoog (Windows, Linux) om met 0,1 te verhogen.
• Tot om de waarde met 1 te wijzigen, of met 0,1 als de huidige waarde tussen -1 en 1 ligt.
• Shift + Omhoog om met 10 te verhogen.
• Shift + Command + Omhoog (Mac) of Control + Shift + Page Up (Windows, Linux) om de waarde met 100 te verhogen.

Verlagen werkt ook. Vervang gewoon elk eerder genoemd ' Up' door 'Down' .

Lengtewaarden wijzigen

Met de aanwijzer kunt u elke eigenschap met lengte wijzigen, zoals de breedte, hoogte, opvulling, marge of rand.

Om de lengte-eenheid te wijzigen:

1. Beweeg uw muis over de naam van de eenheid. U zult zien dat deze onderstreept is.

2. Klik op de naam van de eenheid om een ​​eenheid uit de vervolgkeuzelijst te selecteren.

Om de lengtewaarde te wijzigen:

1. Beweeg uw muis over de eenheidswaarde. U ziet dat uw aanwijzer verandert in een horizontale dubbele pijl.

2. Versleep horizontaal om de waarde te verhogen of te verlagen.

Om de waarde met 10 aan te passen, houdt u Shift ingedrukt tijdens het slepen.

Een klasse toevoegen aan een element

Om een ​​klasse aan een element toe te voegen:

1. Selecteer het element in de DOM-boom .
2. Klik op .cls .
3. Voer de naam van de klasse in het vak Nieuwe klasse toevoegen in .
4. Druk op Enter .

Voorkeuren voor lichte en donkere thema's nabootsen en automatische donkere modus inschakelen

Om de automatische donkere modus in of uit te schakelen of de voorkeur van de gebruiker voor lichte of donkere thema's na te bootsen:

1. Klik op het tabblad Elementen > Stijlen op Schakel algemene rendering-emulaties in of uit .

2. Selecteer een van de volgende opties uit de vervolgkeuzelijst:

   • prefers-color-scheme: light . Geeft aan dat de gebruiker de voorkeur geeft aan het lichte thema.
   • prefers-color-scheme: dark . Geeft aan dat de gebruiker de voorkeur geeft aan het donkere thema.
   • Automatische donkere modus . Geeft uw pagina in de donkere modus weer, zelfs als u deze niet hebt geïmplementeerd. Stelt prefers-color-scheme bovendien automatisch in op dark .

Deze vervolgkeuzelijst is een snelkoppeling voor de opties Emulate CSS media feature prefers-color-scheme en Enable automatic dark mode van het tabblad Rendering .

Een klas wisselen

Om een ​​klasse op een element in of uit te schakelen:

1. Selecteer het element in de DOM-boom .
2. Open de sectie Elementklassen . Zie Een klasse toevoegen aan een element . Onder het vak Nieuwe klasse toevoegen staan ​​alle klassen die op dit element worden toegepast.
3. Schakel het selectievakje in naast de klasse die u wilt in- of uitschakelen.

Voeg een stijlregel toe

Om een ​​nieuwe stijlregel toe te voegen:

1. Selecteer een element .
2. Klik op Nieuwe stijlregel DevTools voegt een nieuwe regel in onder de element.style -regel.

Op de schermafbeelding voegt DevTools de stijlregel h1.devsite-page-title toe nadat u op Nieuwe stijlregel hebt geklikt.

Kies aan welk stijlblad u een regel wilt toevoegen

Wanneer u een nieuwe stijlregel toevoegt , klikt u op Nieuwe stijlregel en houdt u deze ingedrukt om te kiezen aan welk stijlblad u de stijlregel wilt toevoegen.

Een declaratie in- of uitschakelen

Om een ​​enkele declaratie in of uit te schakelen:

1. Selecteer een element .
2. Beweeg op het tabblad Stijlen de muis over de regel die de declaratie definieert. Er verschijnen selectievakjes naast elke declaratie.
3. Vink het selectievakje naast de declaratie aan of uit. Wanneer u een declaratie wist, streept DevTools deze door om aan te geven dat deze niet langer actief is.

Op de schermafbeelding is de color voor het momenteel geselecteerde element uitgeschakeld.

Bewerk de ::view-transition pseudo-elementen tijdens een animatie

Zie het overeenkomstige gedeelte in Animaties .

Zie Soepele en eenvoudige overgangen met de View Transitions API voor meer informatie.

Lijn rasteritems en hun inhoud uit met de raster-editor

Zie de overeenkomstige sectie in CSS-raster controleren .

Verander kleuren met de kleurenkiezer

Zie HD- en niet-HD-kleuren inspecteren en debuggen met de Kleurenkiezer .

Verander de hoekwaarde met de hoekklok

De Angle Clock biedt een GUI voor het wijzigen van <angle> -waarden in CSS-eigenschapswaarden.

Om de Hoekklok te openen:

1. Selecteer een element met hoekdeclaratie.

2. Zoek op het tabblad Stijlen de transform of background die u wilt wijzigen. Klik op het vakje Hoekvoorbeeld naast de hoekwaarde.

   

   De kleine klokjes links van -5deg en 0.25turn geven de hoekvoorbeelden weer.

3. Klik op de voorvertoning om de Hoekklok te openen.

   

4. U kunt de hoekwaarde wijzigen door op de cirkel van de hoekklok te klikken of door met de muis te scrollen om de hoekwaarde met 1 te verhogen of te verlagen.

5. Er zijn meer sneltoetsen om de hoekwaarde te wijzigen. Meer informatie vindt u in de sneltoetsen van het deelvenster Stijlen .

Wijzig de schaduwen van kaders en tekst met de schaduweditor

De Shadow Editor biedt een GUI voor het wijzigen van CSS-declaraties text-shadow en box-shadow .

Om schaduwen te veranderen met de Schaduweditor :

1. Selecteer een element met een schaduwdeclaratie. Selecteer bijvoorbeeld het volgende element.

2. Zoek in het tabblad Stijlen naar een schaduw pictogram naast de text-shadow of box-shadow declaratie.

   

3. Klik op het schaduwpictogram om de schaduweditor te openen.

   

4. Wijzig de schaduweigenschappen:

   • Type (alleen voor box-shadow ). Kies Outset of Inset .
   • X- en Y-offsets . Versleep de blauwe stip of geef waarden op.
   • Vervagen . Versleep de schuifregelaar of geef een waarde op.
   • Spreiding (alleen voor box-shadow ). Versleep de schuifregelaar of geef een waarde op.

5. Bekijk de wijzigingen die op het element zijn toegepast.

Bewerk animatie- en overgangstimings met de Easing Editor

De Easing Editor biedt een GUI voor het wijzigen van de waarden van transition-timing-function en animation-timing-function .

Om de Easing Editor te openen:

1. Selecteer een element met een timingfunctiedeclaratie, zoals het <body> -element op deze pagina.
2. Zoek in het tabblad Stijlen de paarse pictogram naast de declaraties transition-timing-function , animation-timing-function de transition steno-eigenschap.
3. Klik op het pictogram om de Easing Editor te openen:

Gebruik voorinstellingen om de timing aan te passen

Om de timing met een klik aan te passen, gebruikt u de voorinstellingen in de Easing Editor :

1. Om een ​​trefwoordwaarde in te stellen, klikt u in de Easing Editor op een van de keuzeknoppen:
   • lineair
   • gemak-in-uit
   • gemak-in
   • gemak-out

2. Klik in de voorinstellingenschakelaar op of knoppen om een ​​van de volgende voorinstellingen te kiezen:

   • Lineaire voorinstellingen: elastic , bounce of emphasized .
   • Cubic Bézier -presets:

Aangepaste timing configureren

Om aangepaste waarden voor timingfuncties in te stellen, gebruikt u de controlepunten op de lijnen:

• Voor lineaire functies klikt u ergens op de lijn om een ​​controlepunt toe te voegen en sleept u het. Dubbelklik om het punt te verwijderen.

  

• Voor Kubieke Bézier-functies versleept u een van de controlepunten.

  

Elke wijziging activeert een balanimatie in het voorbeeld bovenaan in de editor.

(Experimenteel) CSS-wijzigingen kopiëren

Als dit experiment is ingeschakeld, worden uw CSS-wijzigingen groen gemarkeerd op het tabblad Stijlen .

Om een ​​enkele CSS-declaratiewijziging te kopiëren, beweegt u de muis over de gemarkeerde declaratie en klikt u op de Kopieerknop .

Als u alle CSS-wijzigingen in één keer wilt kopiëren naar alle declaraties, klikt u met de rechtermuisknop op een declaratie en selecteert u Alle CSS-wijzigingen kopiëren .

Daarnaast kunt u via het tabblad Wijzigingen de wijzigingen die u aanbrengt, bijhouden .

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: