Referentie voor CSS-functies

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

Zie CSS bekijken en wijzigen voor meer informatie over de basisprincipes.

Selecteer een element

In het Elementenpaneel 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. Aan de rechterkant worden de stijlen van het element weergegeven op het tabblad Stijlen . Aan de linkerkant wordt het element gemarkeerd in de viewport, maar alleen omdat de muis erover beweegt in de DOM-structuur .

Zie De CSS van een element bekijken voor een tutorial.

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

• Klik in uw viewport met de rechtermuisknop op het element en selecteer Inspecteren .
• Klik in DevTools 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 DevTools op het element in de DOM-structuur .
• Voer in DevTools een query uit zoals document.querySelector('p') in de Console , klik met de rechtermuisknop op het resultaat en selecteer vervolgens Reveal in Elements panel .

Bekijk CSS

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

Navigeer met koppelingen

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

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

Hier zijn er enkele uitgelicht:

Links kunnen een andere stijl hebben. Als u 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

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

Bekijk CSS-documentatie

Om tooltip met een korte CSS-beschrijving te zien, beweegt u de muis over de eigenschapsnaam op het tabblad Stijlen .

Opmerking: DevTools haalt de beschrijvingen voor tooltips uit VS Code Custom Data .

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

Als u de tooltips wilt uitschakelen, vinkt u dit aan Niet laten zien .

Om ze weer in te schakelen, vinkt u aan Instellingen > Voorkeuren > Elementen > Tooltip voor CSS-documentatie weergeven .

Specificiteit van selector bekijken

Beweeg over een selector om 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 zien.

Bekijk ongeldige, overschreven, inactieve en andere CSS

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

Zie CSS begrijpen op het tabblad Stijlen .

Bekijk alleen de CSS die daadwerkelijk op een element is toegepast

Op het tabblad Stijlen ziet u alle regels 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 eigendommen te zien.

Zie CSS begrijpen op 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 .

Bekijk overgenomen CSS-eigenschappen

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

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

Bekijk CSS at-regels

At-regels zijn CSS-instructies waarmee u CSS-gedrag kunt controleren. Elementen > Stijlen toont de volgende at-regels in speciale secties:

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

Bekijk @property at-regels

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

Beweeg de muis over de naam van een dergelijke eigenschap op het tabblad Stijlen om tooltip te zien met de waarde van de eigenschap, beschrijvingen en een link naar de registratie ervan in de opvouwbare 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 worden toegepast. Inspecteer bijvoorbeeld het volgende element:

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

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

Bekijk @scope at-regels

Op het tabblad Stijlen worden CSS @scope at-regels weergegeven als deze op een element worden 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 bepalen, met andere woorden, stijlen expliciet toepassen op specifieke elementen.

Opmerking : de @scope at-rule-functie is experimenteel. Als u dit wilt testen, schakelt u de functievlag Experimental Web Platform in chrome://flags/#enable-experimental-web-platform-features . Anders werkt het volgende voorbeeld niet.

Bekijk de @scope -regel in het volgende voorbeeld:

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

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

Dubbelklik erop om de @scope -regel te bewerken.

Bekijk @font-palette-values at-regels

Met de @font-palette-values ​​CSS at-regel kunt u 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 het volgende voorbeeld:

1. Inspecteer de tweede regel tekst in het voorbeeld.
2. Zoek in Stijlen de sectie @font-palette-values .

In dit voorbeeld overschrijven de --New font-paletwaarden de standaardwaarden van het gekleurde lettertype.

Dubbelklik erop om uw aangepaste waarden te bewerken.

Bekijk @position-try at-regels

Met de @position-try CSS-regel samen met 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 corresponderende elementen met popovertarget attributen.

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

Demo met anker met popover

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

Dubbelklik erop om waarden te bewerken.

Bekijk het doosmodel van een element

Om het doosmodel van een element te bekijken, gaat u naar het tabblad Stijlen en klikt u op de knop Zijbalkknop 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 naar specifieke CSS-eigenschappen of -waarden te zoeken.

Als u ook wilt zoeken naar overgenomen eigenschappen op het tabblad Berekend , schakelt u het selectievakje Alles weergeven in.

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

Emuleer een gerichte pagina

Als u de focus van de pagina naar DevTools verlegt, worden sommige overlay-elementen automatisch verborgen als ze worden geactiveerd door focus. Bijvoorbeeld vervolgkeuzelijsten, menu's of datumkiezers. Met de check_box Een gefocuste pagina emuleren optie kunt u fouten in een dergelijk element opsporen alsof het in focus is.

Let op: Als deze optie is ingeschakeld, wordt document.visibilityState ingesteld op visible en wordt de visibilitychange niet geactiveerd. Zie Paginazichtbaarheid-API voor meer informatie.

Probeer een gerichte pagina op deze demopagina te emuleren:

1. Focus op het invoerelement. Eronder verschijnt een ander element.
2. Open DevTools . Het DevTools-venster is nu in focus in plaats van de pagina, dus het element verdwijnt weer.
3. In Elementen > Stijlen klikt u op :hov , vinkt u check_box aan Een gefocuste pagina emuleren , en zorgt u ervoor dat het invoerelement is geselecteerd . U kunt nu het element eronder inspecteren.

U vindt dezelfde optie ook in het deelvenster Rendering .

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

Schakel een pseudo-klasse in

Om een ​​pseudo-klasse te schakelen:

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

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

Het tabblad Stijlen toont de volgende pseudo-klassen voor alle elementen:

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

Bovendien kunnen sommige elementen hun eigen pseudo-klassen hebben. Wanneer u een dergelijk element selecteert, toont het tabblad Stijlen een sectie Force-specifieke elementstatus die u kunt uitvouwen en pseudo-klassen kunt inschakelen die specifiek zijn voor het element.

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

Bekijk overgenomen pseudo-elementen voor hoogtepunten

Met pseudo-elementen kunt u specifieke delen van elementen vormgeven. Markeer pseudo-elementen zijn documentgedeelten met de status 'geselecteerd' en zijn opgemaakt als 'gemarkeerd' om deze status aan de gebruiker aan te geven. Dergelijke pseudo-elementen zijn bijvoorbeeld ::selection , ::spelling-error , ::grammar-error en ::highlight .

Zoals vermeld in de specificatie , bepaalt cascade de winnende stijl als meerdere stijlen conflicteren.

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

Om de overerving en prioriteit van de regels beter te begrijpen, kunt u de overgenomen pseudo-elementen voor accentuering bekijken:

1. Bekijk de onderstaande tekst .

   Ik erfde de stijl van het hoogtepunt-pseudo-element van mijn ouders. Selecteer mij!

2. Selecteer een gedeelte van de bovenstaande tekst.

3. Blader op het tabblad Stijlen naar beneden om de sectie Inherited from ::selection pseudo of... te vinden.

Cascadelagen bekijken

Cascadelagen maken een explicietere controle over uw CSS-bestanden mogelijk om conflicten met betrekking tot stijlspecificiteit te voorkomen. Dit is handig voor grote codebases, ontwerpsystemen en bij het beheren van stijlen van derden in applicaties.

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

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

Om de laagvolgorde te bekijken, klikt u op de naam van de laag of op de Schakel de weergaveknop voor CSS-lagen in of uit .

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

Bekijk een pagina in de afdrukmodus

Een pagina bekijken in de afdrukmodus:

1. Open het Commandomenu .
2. Begin met het typen van Rendering en selecteer Show Rendering .
3. Voor de vervolgkeuzelijst CSS-media emuleren selecteert u print .

Bekijk gebruikte en ongebruikte CSS op 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 Commandomenu te openen.

2. Begin met het typen van coverage .

   

3. Selecteer Dekking tonen . Het tabblad Dekking verschijnt.

   

4. Klik Herladen . De pagina wordt opnieuw geladen en het tabblad Dekking biedt een overzicht van hoeveel CSS (en JavaScript) 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 regel voor regel te zien welke CSS het gebruikt in het bovenstaande voorbeeld.

   

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

Forceer de afdrukvoorbeeldmodus

Zie DevTools naar de modus Afdrukvoorbeeld forceren .

Kopieer CSS

Vanuit één vervolgkeuzemenu op het tabblad Stijlen kunt u afzonderlijke CSS-regels, declaraties, eigenschappen en waarden kopiëren

Bovendien kunt u CSS-eigenschappen in JavaScript-syntaxis kopiëren. Deze optie is handig als u CSS-in-JS- bibliotheken gebruikt.

CSS kopiëren:

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

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

   • Kopieer aangifte . Kopieert de eigenschap en de waarde ervan in CSS-syntaxis: css property: value;
   • Eigenschap kopiëren . Kopieert alleen de property .
   • Kopieer waarde . Kopieert alleen de value .
   • Kopieer regel . Kopieert de volledige CSS-regel: css selector[, selector] { property: value; property: value; ... }
   • Kopieer declaratie als JS . Kopieert de eigenschap en de waarde ervan in JavaScript-syntaxis: js propertyInCamelCase: 'value'
   • Kopieer alle aangiften . 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 over alle declaraties.

   • Bekijk de berekende waarde . Brengt u naar het tabblad Berekend .

Wijzig CSS

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

Bovendien kunt u:

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

Voeg een CSS-declaratie toe aan een element

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

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

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

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

Voeg een inline-declaratie toe

Een inline-declaratie toevoegen:

1. Selecteer een element .
2. Klik op het tabblad Stijlen tussen de haakjes van de sectie element.style . De cursor wordt scherpgesteld, 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-boom kun je 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 zien die worden weerspiegeld in het style van het element.

Voeg een declaratie toe aan een stijlregel

Een declaratie toevoegen aan een bestaande stijlregel:

1. Selecteer een element .
2. Klik op het tabblad Stijlen tussen de haakjes van de stijlregel waaraan u de declaratie wilt toevoegen. De cursor wordt scherpgesteld, 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 border-bottom-style:groove declaratie.

Wijzig de naam of waarde van een declaratie

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

Wijzig opsombare waarden met sneltoetsen

Tijdens het bewerken van een opsombare waarde van 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.
• Omhoog 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 + Up (Mac) of Control + Shift + Page Up (Windows, Linux) om de waarde met 100 te verhogen.

Afbouwen werkt ook. Vervang gewoon elk eerder genoemd exemplaar van Up door Down .

Lengtewaarden wijzigen

Verouderd: deze functie is verouderd in Chrome 123. Als u deze tijdelijk weer wilt inschakelen, wist u de instellingen Instellingen > Experimenten > check_box Beëindig de CSS <lengte>-ontwerptool op het tabblad Stijlen . Laat gerust feedback achter in crbug/1522657 .

U kunt uw aanwijzer gebruiken om elke eigenschap met lengte te wijzigen, zoals breedte, hoogte, opvulling, marge of rand.

Om de lengte-eenheid te wijzigen:

1. Beweeg de muis over de naam van het apparaat en zie dat deze onderstreept is.

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

Om de lengtewaarde te wijzigen:

1. Beweeg over de eenheidswaarde en merk op 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 aan te passen, houdt u Shift ingedrukt tijdens het slepen.

Voeg een klasse toe 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 lichte en donkere themavoorkeuren en schakel de automatische donkere modus in

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

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

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

   • geeft de voorkeur aan kleurenschema: licht . Geeft aan dat de gebruiker de voorkeur geeft aan het lichte thema.
   • geeft de voorkeur aan kleurenschema: donker . Geeft aan dat de gebruiker de voorkeur geeft aan het donkere thema.
   • Automatische donkere modus . Toont uw pagina in de donkere modus, zelfs als u deze niet heeft geïmplementeerd. Bovendien wordt prefers-color-scheme automatisch ingesteld op dark .

Deze vervolgkeuzelijst is een snelkoppeling voor de emulatie van CSS-mediafunctie prefers-color-scheme en automatische donkere modus inschakelen op het tabblad Rendering .

Schakel een klasse in

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

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

Voeg een stijlregel toe

Een nieuwe stijlregel toevoegen:

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.

Schakel een declaratie in

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

1. Selecteer een element .
2. Ga op het tabblad Stijlen met de muis over de regel die de declaratie definieert. Naast elke aangifte verschijnen selectievakjes.
3. Vink het selectievakje naast de aangifte 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 Vloeiende en eenvoudige overgangen met de View Transitions API voor meer informatie.

Lijn rasteritems en hun inhoud uit met de Rastereditor

Zie de overeenkomstige sectie in CSS-raster inspecteren .

Verander kleuren met de Kleurkiezer

Zie HD- en niet-HD-kleuren inspecteren en fouten opsporen met de Kleurkiezer .

Verander de hoekwaarde met de Hoekklok

De Angle Clock biedt een GUI voor het wijzigen <angle> s 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 klokken links van -5deg en 0.25turn zijn de hoekvoorbeelden.

3. Klik op het voorbeeld om de Hoekklok te openen.

   

4. Wijzig de hoekwaarde door op de hoekklokcirkel te klikken of scroll met uw muis om de hoekwaarde met 1 te verhogen/verlagen.

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

Wijzig de kader- en tekstschaduwen met de Schaduweditor

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

Schaduwen wijzigen met de Schaduweditor :

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

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

   

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

   

4. Wijzig de schaduweigenschappen:

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

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

Bewerk animatie- en overgangstijden 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 Versoepelingseditor te openen:

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

Gebruik presets om de timing aan te passen

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

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

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

   • Lineaire voorinstellingen: elastic , bounce of emphasized .
   • Kubieke Bezier- voorinstellingen:

Timing-trefwoord	Voorinstelling	Kubieke Bezier
gemak-in-uit	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, kubusvormig	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)
gemak-in	In, Sin	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, kwadratisch	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, kubisch	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Binnen, terug	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Snel uit, lineair in	cubic-bezier(0.4, 0, 1, 1)
gemak-uit	Uit, Sin	cubic-bezier(0.39, 0.58, 0.57, 1)
	Uit, kwadratisch	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Uit, Kubiek	cubic-bezier(0.22, 0.61, 0.36, 1)
	Lineair uit, langzaam in	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 klikt u ergens op de lijn om een ​​controlepunt toe te voegen en sleept u dit. Dubbelklik om het punt te verwijderen.

  

• Voor Cubic Bezier-functies sleept u een van de controlepunten.

  

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

(Experimenteel) Kopieer CSS-wijzigingen

Opmerking: Om deze experimentele functie in te schakelen, vinkt u CSS-wijzigingen synchroniseren aan op het tabblad Stijlen eronder Instellingen > Experimenten en laad DevTools opnieuw.

Als dit experiment is ingeschakeld, markeert het tabblad Stijlen uw CSS-wijzigingen in het groen.

Om een ​​enkele wijziging in de CSS-declaratie te kopiëren, beweegt u de muis over de gemarkeerde declaratie en klikt u op de Knop Kopiëren .

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

Bovendien kunt u de wijzigingen die u aanbrengt bijhouden op het tabblad Wijzigingen .