Referentie voor CSS-functies

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Ontdek nieuwe workflows in dit uitgebreide naslagwerk over Chrome DevTools-functies voor het bekijken en wijzigen van CSS.

Zie 'CSS bekijken en wijzigen' om de basisprincipes te leren.

Selecteer een element

In het paneel 'Elementen ' van DevTools kunt u de CSS van één element tegelijk bekijken of wijzigen.

Op de schermafbeelding is het h1 element dat blauw is gemarkeerd in de DOM-structuur het geselecteerde element. Rechts worden de stijlen van het element weergegeven in 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 handleiding.

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

• Klik in uw weergavevenster met de rechtermuisknop op het element en selecteer 'Inspecteren' .
• Klik in de ontwikkelaarstools op ' Een element selecteren' . Of druk op Command + Shift + C (Mac) of Control + Shift + C (Windows, Linux) en klik vervolgens op het element in de viewport.
• Klik in de ontwikkelaarstools op het element in de DOM-structuur .
• Voer in de DevTools een query uit zoals document.querySelector('p') in de console , klik met de rechtermuisknop op het resultaat en selecteer vervolgens 'Weergeven' in het paneel 'Elementen' .

CSS bekijken

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

Navigeren met links

Het tabblad Stijlen toont op verschillende plaatsen links naar diverse andere plaatsen, waaronder maar niet beperkt tot:

• Naast CSS-regels vindt u links naar stylesheets en CSS-broncode. Deze links openen het paneel Broncode . Als de stylesheet geminificeerd is, raadpleeg dan 'Een geminificeerd bestand leesbaar maken' .
• In de secties 'Overgenomen van...' verwijst u naar de bovenliggende elementen.
• In var() -aanroepen, naar aangepaste eigenschapdeclaraties .
• In animation shorthand-eigenschappen wordt dit gebruikt met @keyframes .
• Meer informatie vindt u in de tooltips van de documentatie.
• En nog veel meer.

Hieronder staan ​​enkele voorbeelden:

Links kunnen er verschillend uitzien. Als je niet zeker weet of iets een link is, probeer er dan op te klikken.

Bekijk tooltips met CSS-documentatie, specificiteit en aangepaste eigenschapswaarden.

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

Bekijk de CSS-documentatie

Om een ​​tooltip met een korte CSS-beschrijving te zien, beweeg je de muis over de eigenschapsnaam in het tabblad Stijlen .

Opmerking: DevTools haalt de beschrijvingen voor tooltips uit de aangepaste gegevens van VS Code .

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

Om de tooltips uit te schakelen, vinkt u het vakje aan. Niet weergeven .

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

Specificiteit van de weergaveselector

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

Bekijk de waarden van aangepaste eigenschappen

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

Ongeldige, overschreven, inactieve en andere CSS-waarden bekijken

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

Zie 'CSS begrijpen' in het tabblad 'Stijlen' .

Bekijk alleen de CSS die daadwerkelijk op een element is toegepast.

Op het tabblad Stijlen worden alle regels weergegeven die van toepassing zijn op een element, inclusief declaraties die zijn overschreven. 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 selectievakje 'Alles weergeven ' aan om alle eigenschappen te zien.

Zie 'CSS begrijpen' in het tabblad 'Berekend' .

Bekijk CSS-eigenschappen in alfabetische volgorde

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

Overgeërfde CSS-eigenschappen bekijken

Schakel het selectievakje 'Alles weergeven ' in op het tabblad 'Berekend' . Zie 'Alleen de CSS weergeven die daadwerkelijk op een element is toegepast' .

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

Bekijk CSS-regels

At-regels zijn CSS-instructies waarmee je het gedrag van CSS kunt bepalen. Onder Elementen > Stijlen worden de volgende at-regels in aparte secties weergegeven:

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

Bekijk @property at-rules

Met de CSS-at-regel @property kun je expliciet aangepaste CSS-eigenschappen definiëren en deze in een stylesheet registreren zonder JavaScript uit te voeren.

Beweeg de muis over de naam van een dergelijke eigenschap in het tabblad Stijlen om een ​​tooltip te zien met de waarde van de eigenschap, beschrijvingen en een link naar de registratie ervan in het uitklapbare gedeelte @property onderaan het tabblad Stijlen .

Om een @property regel te bewerken, dubbelklik je op de naam of de waarde ervan.

Bekijk @supports at-rules

Op het tabblad Stijlen worden de CSS-attribuutregels @supports weergegeven als deze op een element zijn toegepast. Inspecteer bijvoorbeeld het volgende element:

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

Opmerking : Op het moment van schrijven ondersteunt alleen Safari de CIELAB-kleurruimte .

Bekijk @scope at-rules

Op het tabblad Stijlen zie je de CSS @scope at-regels 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 kun je CSS-stijlen beperken, oftewel stijlen expliciet toepassen op specifieke elementen.

Opmerking : De @scope at-rule-functie is experimenteel. Om deze te testen, schakelt u de vlag voor experimentele webplatformfuncties in via chrome://flags/#enable-experimental-web-platform-features . Anders werkt de volgende preview niet.

Bekijk de @scope -regel in de volgende preview:

1. Controleer de tekst op de kaart in de preview.
2. Ga naar het tabblad Stijlen en zoek de regel @scope .

In dit voorbeeld overschrijft de @scope regel de globale CSS background-color van alle <p> -elementen binnen elementen met de klasse card .

Om de @scope -regel te bewerken, dubbelklik je erop.

Bekijk @font-palette-values ​​bij-regels

Met de CSS-at-regel @font-palette-values kunt u de standaardwaarden van de eigenschap font-palette aanpassen. Deze at-regel wordt weergegeven in een aparte sectie onder `Elementen > Stijlen` .

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

1. Bekijk de tweede tekstregel in de preview.
2. Ga naar Stijlen en zoek de sectie @font-palette-values .

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

Om uw aangepaste waarden te 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 voor meer informatie: Introductie van de CSS-API voor ankerpositionering .

Elementen > Stijlen lost het volgende op en koppelt het aan elkaar:

• Plaats de eigenschapswaarden van position-try-options in een speciale sectie @position-try --name .
• De waarden van de eigenschap position-anchor en de argumenten anchor() verwijzen naar de overeenkomstige elementen met het attribuut popovertarget .

Bekijk de waarden position-try-options en de secties @position-try in de volgende preview:

Demo met behulp van een anker met popover

1. Open in de preview het submenu, dat wil zeggen, klik op UW ACCOUNT en vervolgens op WINKEL .
2. Inspecteer het element met id="submenu" in de preview.
3. Ga in Stijlen naar de eigenschap position-try-options en klik op de waarde --bottom . Het tabblad Stijlen brengt je naar de bijbehorende @position-try sectie.
4. Klik op de link position-anchor ankerwaarde of op dezelfde argumenten anchor() . 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, ga je naar het tabblad Stijlen en klik je op de Toon de zijbalkknop in de actiebalk.

Om een ​​waarde te wijzigen, dubbelklik 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.

Om ook in het tabblad 'Berekend' naar overgeërfde eigenschappen te zoeken, vinkt u het selectievakje 'Alles weergeven ' aan.

Om door het tabblad 'Berekend' te navigeren, kunt u de gefilterde eigenschappen groeperen in inklapbare categorieën door 'Groeperen' aan te vinken.

Een pagina met focus simuleren

Als je de focus van de pagina naar de ontwikkelaarstools verplaatst, worden sommige overlay-elementen automatisch verborgen als ze door de focus worden geactiveerd. Denk bijvoorbeeld aan vervolgkeuzelijsten, menu's of datumkiezers. Met de optie ' Een pagina met focus emuleren' kun je een dergelijk element debuggen alsof het daadwerkelijk de focus heeft.

Let op: wanneer deze optie is ingeschakeld, wordt document.visibilityState ingesteld op visible en wordt de visibilitychange gebeurtenis niet geactiveerd. Zie de Page Visibility API voor meer informatie.

Probeer een pagina met focus te simuleren op deze demopagina :

1. Selecteer het invoerelement. Er verschijnt een ander element eronder.
2. Open de ontwikkelaarstools . Het venster van de ontwikkelaarstools is nu actief in plaats van de pagina, waardoor het element weer verdwijnt.
3. Ga naar Elementen > Stijlen , klik op :hov , vink het selectievakje ' Een gefocuste pagina emuleren' aan en zorg ervoor dat het invoerelement is geselecteerd . Je kunt nu het element eronder inspecteren.

Je vindt dezelfde optie ook in het paneel 'Rendering' .

Om meer manieren te ontdekken om een ​​element te bevriezen, zie Scherm bevriezen en verdwijnende elementen inspecteren .

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. Vink de pseudo-klasse aan die u wilt inschakelen.

In dit voorbeeld zie je dat DevTools de declaratie background-color toepast op het element, ook al bevindt de muiscursor zich niet daadwerkelijk boven het element.

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

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

Daarnaast kunnen sommige elementen hun eigen pseudo-klassen hebben. Wanneer u zo'n element selecteert, toont het tabblad Stijlen een gedeelte 'Specifieke elementstatus afdwingen' dat u kunt uitvouwen om pseudo-klassen die specifiek voor het element zijn, in te schakelen.

Zie ' Een pseudostatus toevoegen aan een klasse' voor een interactieve handleiding.

Overgenomen highlight-pseudo-elementen bekijken

Met pseudo-elementen kun je specifieke delen van elementen opmaken. Highlight-pseudo-elementen zijn documentgedeelten met de status "geselecteerd" die als "gemarkeerd" worden weergegeven om deze status aan de gebruiker kenbaar te maken. Voorbeelden van dergelijke pseudo-elementen zijn ::selection , ::spelling-error , ::grammar-error en ::highlight .

Zoals vermeld in de specificatie , bepaalt de cascade de winnende stijl wanneer meerdere stijlen met elkaar conflicteren.

Opmerking: Om deze functie in te schakelen, start u Chrome met de vlag --enable-blink-features=HighlightInheritance .

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

1. Bekijk de onderstaande tekst .

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

2. Selecteer een gedeelte van de bovenstaande tekst.

3. Ga naar het tabblad Stijlen en scrol omlaag om de sectie ' Inherited from ::selection pseudo of... te vinden.

Bekijk cascade-lagen

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

Om cascade-lagen te bekijken, inspecteer je het volgende element en open je Elementen > Stijlen .

In het tabblad Stijlen kunt u de 3 cascade-lagen en hun stijlen bekijken: page , component en base .

Om de volgorde van de lagen te bekijken, klikt u op de laagnaam of op de Knop om de CSS-lagenweergave in of uit te schakelen .

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

Een pagina bekijken in de afdrukmodus

Om een ​​pagina in afdrukmodus te bekijken:

1. Open het opdrachtmenu .
2. Begin met het typen Rendering en selecteer Show Rendering .
3. Selecteer bij het vervolgkeuzemenu 'CSS-media emuleren ' de optie 'afdrukken' .

Bekijk de gebruikte en ongebruikte CSS via het tabblad 'Coverage'.

Het tabblad 'Coverage' laat zien welke CSS een pagina daadwerkelijk gebruikt.

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

2. Begin met het typen coverage .

   

3. Selecteer 'Dekking weergeven' . Het tabblad 'Dekking' verschijnt.

   

4. Klik Vernieuwen . De pagina wordt opnieuw geladen en het tabblad 'Coverage' 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 de bovenstaande preview een regel-voor-regel overzicht te zien van welke CSS erin gebruikt wordt.

   

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

Printvoorbeeldmodus forceren

Zie DevTools forceren naar afdrukvoorbeeldmodus .

CSS kopiëren

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

Daarnaast kun je CSS-eigenschappen kopiëren in JavaScript-syntaxis. Deze optie is handig als je CSS-in-JS- bibliotheken gebruikt.

Om CSS te kopiëren:

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

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

   • Kopieer de declaratie . Kopieert de eigenschap en de bijbehorende waarde in CSS-syntaxis: css property: value;
   • Eigenschap kopiëren . Kopieert alleen de property .
   • Kopieer de waarde . Kopieert alleen de value .
   • Kopieerregel . 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 . Hiermee worden de wijzigingen die u in het tabblad Stijlen aanbrengt, gekopieerd naar alle declaraties.

   • Bekijk de berekende waarde . Hiermee ga je naar het tabblad 'Berekend' .

CSS wijzigen

In dit gedeelte worden alle manieren beschreven waarop je CSS kunt wijzigen via Elementen > Stijlen .

Daarnaast kunt u:

• CSS overschrijven bij het laden van de pagina .
• Sla de gewijzigde CSS op in uw lokale bronnen in een werkruimte .

Wijzig CSS met codeaanvulling

Om te experimenteren met complexere combinaties van CSS-eigenschappen, zoals verlopen of schaduwen, zonder de exacte syntax te hoeven onthouden, of om snel grid- en flex-layouts te bouwen met behulp van meerdere gerelateerde eigenschappen, kunt u een CSS-eigenschap typen en codeaanvulling gebruiken.

Voeg een CSS-declaratie toe aan een element.

Omdat de volgorde van declaraties van invloed is op de styling van een element, kun je declaraties op verschillende manieren toevoegen:

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

Welke workflow moet je gebruiken? In de meeste gevallen is de workflow voor inline-declaraties waarschijnlijk het meest geschikt. Inline-declaraties hebben een hogere specificiteit dan externe declaraties, waardoor de inline-workflow ervoor zorgt dat de wijzigingen in het element worden doorgevoerd zoals je verwacht. Zie Selectortypen voor meer informatie over specificiteit.

Als je de stijlen van een element aan het debuggen bent en je specifiek wilt testen wat er gebeurt wanneer een declaratie op verschillende plaatsen is gedefinieerd, gebruik dan de andere workflow.

Voeg een inline-declaratie toe

Om een ​​inline-declaratie toe te voegen:

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

4. Voer een geldige waarde in voor die eigenschap en druk op Enter . In de DOM-structuur 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-structuur kunt u de declaraties terugzien in het style attribuut van het element.

Voeg een declaratie toe aan een stijlregel.

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

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

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

Een declaratienaam of -waarde wijzigen

Dubbelklik op de naam of waarde van een declaratie om deze te wijzigen. Zie ' Opsommingswaarden 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.

Bij het bewerken van een opsombare waarde in een declaratie, 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.
• Je kunt de waarde met 1 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 Omhoog (Windows, Linux) om de waarde met 100 te verhogen.

Verlagen werkt ook. Vervang gewoon elke eerder genoemde instantie van 'Up' door 'Down' .

Wijzig lengtewaarden

Verouderd: Deze functie is verouderd in Chrome 123. Om deze tijdelijk weer in te schakelen, schakelt u de instelling uit via Instellingen > Experimenten > vinkje ' CSS <length> authoring tool verouderen' in het tabblad Stijlen . U kunt feedback achterlaten in crbug/1522657 .

Je kunt de muiswijzer gebruiken om elke eigenschap met een lengte te wijzigen, zoals breedte, hoogte, opvulling, marge of rand.

Om de lengte-eenheid te wijzigen:

1. Beweeg de muis over de eenheidsnaam en u zult zien dat deze onderstreept is.

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

Om de lengtewaarde te wijzigen:

1. Beweeg de muis over de eenheidswaarde en u zult zien dat uw aanwijzer verandert in een horizontale dubbele pijl.

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

Om de waarde met 10 te verhogen, houd je 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-structuur .
2. Klik op .cls .
3. Voer de naam van de klas in het vak 'Nieuwe klas toevoegen' in.
4. Druk op Enter .

Emuleer de voorkeuren voor het lichte en donkere thema en schakel de automatische donkere modus in.

Om de automatische donkere modus in of uit te schakelen of de voorkeur van de gebruiker voor een licht of donker thema te simuleren:

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

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

   • 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 . Uw pagina wordt in de donkere modus weergegeven, zelfs als u dit niet zelf hebt ingesteld. Daarnaast wordt prefers-color-scheme automatisch op dark ingesteld.

Dit dropdownmenu is een snelkoppeling naar de opties 'Emulate CSS media feature prefers-color-scheme en 'Enable automatic dark mode' op het tabblad 'Rendering' .

Een klasse in- of uitschakelen

Om een ​​klasse aan een element toe te voegen of uit te schakelen:

1. Selecteer het element in de DOM-structuur .
2. Open het gedeelte 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 naast de klasse die u wilt in- of uitschakelen in of uit.

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 toe onder de element.style -regel.

Op de schermafbeelding is te zien dat DevTools de stijlregel h1.devsite-page-title toevoegt nadat op Nieuwe stijlregel is geklikt.

Kies aan welk stijlblad je een regel wilt toevoegen.

Wanneer je een nieuwe stijlregel wilt toevoegen , klik en houd je de optie 'Nieuwe stijlregel' ingedrukt. om te kiezen aan welk stijlblad de stijlregel moet worden toegevoegd.

Een verklaring in- of uitschakelen

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

1. Selecteer een element .
2. Ga in het tabblad Stijlen met de muis over de regel die de declaratie definieert. Naast elke declaratie verschijnen selectievakjes.
3. Vink het selectievakje naast de declaratie aan of uit. Wanneer u een declaratie uitvinkt, wordt deze in DevTools doorgestreept om aan te geven dat deze niet langer actief is.

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

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

Zie het betreffende gedeelte in Animaties .

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

Lijn rasteritems en hun inhoud uit met de rastereditor.

Zie het betreffende gedeelte in 'CSS-raster inspecteren' .

Wijzig kleuren met de kleurenkiezer.

Zie Inspecteer en debug HD- en niet-HD-kleuren met de kleurenkiezer .

Wijzig de hoekwaarde met de hoekklok.

De Angle Clock biedt een grafische gebruikersinterface voor het wijzigen van <angle> -waarden in CSS-eigenschappen.

Om de hoekklok te openen:

1. Selecteer een element met een hoekdefinitie.

2. Ga naar het tabblad Stijlen en zoek 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 zijn de hoekvoorbeelden.

3. Klik op de preview om de Angle Clock te openen.

   

4. Wijzig de hoekwaarde door op de cirkel van de hoekklok te klikken of door met de muis te scrollen om de hoekwaarde met 1 te verhogen/verlagen.

5. Er zijn meer sneltoetsen om de hoekwaarde te wijzigen. Meer informatie vind je in het deelvenster Stijlen > Sneltoetsen .

Wijzig de schaduwen van kaders en tekst met de Schaduweditor.

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

Om schaduwen te wijzigen met de Schaduweditor :

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

2. Ga naar het tabblad Stijlen en zoek naar een schaduw. pictogram naast de declaratie text-shadow of box-shadow .

   

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

   

4. Wijzig de schaduweigenschappen:

   • Typ (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 ). Verschuif de schuifregelaar of geef een waarde op.

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

Bewerk animaties en overgangstijden met de Easing Editor.

De Easing Editor biedt een grafische gebruikersinterface 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 declaratie van een timingfunctie, zoals het <body> -element op deze pagina.
2. Zoek in het tabblad Stijlen naar de paarse optie. pictogram naast de declaraties transition-timing-function , animation-timing-function of de eigenschap transition shorthand.
3. Klik op het pictogram om de Easing Editor te openen:

Gebruik voorinstellingen om de timing aan te passen.

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

1. Om in de Easing Editor een trefwoordwaarde in te stellen, klikt u op een van de keuzeknoppen:
   • lineair
   • rustig in- en uitstappen
   • geleidelijke introductie
   • ontspannen

2. Klik in de voorinstellingenwisselaar op of knoppen om een ​​van de volgende presets te selecteren:

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

Timing trefwoord	Voorinstelling	Kubieke Bézier
rustig in- en uitstappen	In Uit, Sinus	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In Uit, Kwadratisch	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Uit, Kubiek	cubic-bezier(0.65, 0.05, 0.36, 1)
	Snel eruit, langzaam erin.	cubic-bezier(0.4, 0, 0.2, 1)
	In, uit, terug	cubic-bezier(0.68, -0.55, 0.27, 1.55)
geleidelijke introductie	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Kwadratisch	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Kubiek	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Achter	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Snel eruit, lineair erin	cubic-bezier(0.4, 0, 1, 1)
ontspannen	Uit, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Uit, Kwadratisch	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Uit, Kubieke	cubic-bezier(0.22, 0.61, 0.36, 1)
	Lineaire uitgang, langzame ingang	cubic-bezier(0, 0, 0.2, 1)
	Uit, terug	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configureer aangepaste timings

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

• Voor lineaire functies kunt u ergens op de lijn klikken om een ​​controlepunt toe te voegen en dit vervolgens slepen. Dubbelklik om het punt te verwijderen.

  

• Voor kubieke Bézier-functies sleept u een van de controlepunten.

  

Elke wijziging activeert een balanimatie in de preview bovenaan de editor.

(Experimenteel) CSS-wijzigingen kopiëren

Opmerking: Om deze experimentele functie in te schakelen, vinkt u 'CSS-wijzigingen synchroniseren' aan in het tabblad 'Stijlen' . Ga naar Instellingen > Experimenten en herlaad de ontwikkelaarstools.

Met dit experiment ingeschakeld, worden je CSS-wijzigingen in het tabblad Stijlen groen gemarkeerd.

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

Om alle CSS-wijzigingen in één keer over te nemen, klikt u met de rechtermuisknop op een declaratie en selecteert u ' Alle CSS-wijzigingen kopiëren' .

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