Referentie voor css-functies

Ontdek nieuwe workflows in deze uitgebreide referentie van Chrome DevTools-functies voor CSS bekijken en wijzigen.

Ga naar CSS bekijken en wijzigen voor de basisprincipes.

Selecteer een element

In het deelvenster Elementen van DevTools kun je de CSS van één element tegelijk bekijken of wijzigen.

Op de screenshot is het h1-element dat blauw is gemarkeerd in de DOM-boomstructuur het geselecteerde element. Rechts worden de stijlen van het element getoond op het tabblad Stijlen. Aan de linkerkant is het element gemarkeerd in de viewport, maar alleen omdat de muis erboven staat in de DOM-boomstructuur.

Ga naar De CSS van een element bekijken voor een tutorial.

U kunt een element op verschillende manieren selecteren:

• Klik in het kijkvenster 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 daarna op het element in de viewport.
• Klik in DevTools op het element in de DOM-boomstructuur.
• Voer in DevTools een query zoals document.querySelector('p') uit in de Console, klik met de rechtermuisknop op het resultaat en selecteer Onthullen in het deelvenster 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 links op verschillende plaatsen naar verschillende andere plaatsen, waaronder:

• Naast css-regels, naar stylesheets en css-bronnen. Dergelijke links openen het deelvenster Bronnen. Als de stylesheet is verkleind, ga je naar Een verkleind bestand leesbaar maken.
• In de gedeelten Overgenomen van ..., naar bovenliggende elementen.
• In var()-aanroepen, naar declaraties van aangepaste eigenschappen.
• In animation-steno-eigenschappen, naar @keyframes.
• Links naar Meer informatie in tooltips in de documentatie.
• En meer.

Hieronder staan enkele voorbeelden:

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

Tooltips met CSS-documentatie, specificiteit en aangepaste eigenschapswaarden bekijken

Elementen > Stijlen toont tooltips met nuttige informatie als je de cursor op specifieke elementen plaatst.

CSS-documentatie bekijken

Als je een tooltip met een korte CSS-beschrijving wilt zien, plaats je de cursor op de eigenschapsnaam op het tabblad Stijlen.

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

Vink Niet tonen aan om de tooltips uit te zetten.

Als je ze weer wilt aanzetten, ga je naar Instellingen > Voorkeuren > Elementen > Tooltip voor CSS-documentatie tonen.

Specificiteit van kiezer bekijken

Plaats de cursor op een kiezer op het tabblad Stijlen, waaronder bovenliggende kiezers in geneste css-regels, overgenomen geneste regels en @nested-declarations-regels, om een tooltip te tonen met het specificiteitsgewicht en om overeenkomende elementen in het kijkvenster te markeren.

De waarden van aangepaste eigenschappen bekijken

Plaats de cursor op een --custom-property om de waarde ervan in een tooltip te bekijken.

Ongeldige, overschreven, inactieve en andere css bekijken

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

Ga naar Inzicht in CSS op het tabblad Stijlen.

Alleen de css bekijken die daadwerkelijk op een element is toegepast

Op het tabblad Stijlen staan alle regels die van toepassing zijn op een element, waaronder overschreven declaraties. Als je niet geïnteresseerd bent in overschreven declaraties, gebruik je 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 deelvenster Elementen.

Vink het selectievakje Alles tonen aan om alle eigenschappen te bekijken.

Ga naar CSS begrijpen op het tabblad Berekend.

CSS-property's in alfabetische volgorde bekijken

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

Overgenomen CSS-eigenschappen bekijken

Vink het selectievakje Alles tonen aan op het tabblad Berekend. Ga naar Alleen de CSS bekijken die daadwerkelijk op een element is toegepast.

Je kunt ook op het tabblad Stijlen scrollen en de gedeelten met de sectienaam Inherited from <element_name> zoeken.

CSS-at-regels bekijken

At-regels zijn css-instructies waarmee je het css-gedrag kunt beheren. Elementen > Stijlen toont de volgende at-regels in speciale gedeelten:

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

@property-regels bekijken

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

Plaats de cursor op de naam van de eigenschap op het tabblad Stijlen om een tooltip te tonen met de waarde van de eigenschap, beschrijvingen en een link naar de registratie in het samenvouwbare gedeelte @property onderaan het tabblad Stijlen.

Als je een @property-regel wilt bewerken, dubbelklik je op de naam of waarde.

@supports at-regel bekijken

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

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

@scope at-regels bekijken

Op het tabblad Stijlen staan @scope at-regels voor CSS als deze op een element zijn toegepast.

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

Bekijk de regel @scope in het volgende voorbeeld:

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

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

Dubbelklik op de regel @scope om deze te bewerken.

@font-palette-values at-regels bekijken

Met de @font-palette-values CSS at-regel kunt u de standaardwaarden van de property font-palette aanpassen. Elements > Styles toont deze at-regel in een speciaal gedeelte.

Bekijk het gedeelte @font-palette-values in het volgende voorbeeld:

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

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

Dubbelklik op de aangepaste waarden om ze te bewerken.

@position-try at-regels bekijken

Met de css-regel @position-try en de property position-try-options kun je alternatieve ankerposities voor elementen definiëren. Ga naar Introductie van de CSS API voor ankerpositionering voor meer informatie.

Elementen > Stijlen lost het volgende op en koppelt het:

• position-try-options-propertywaarden naar een speciaal gedeelte @position-try --name.
• position-anchor-propertywaarden en anchor()-argumenten voor de bijbehorende elementen met popovertarget-kenmerken.

Controleer de waarden van position-try-options en de gedeelten @position-try in het volgende voorbeeld:

1. Open in het voorbeeld het submenu. Klik op UW ACCOUNT en dan op ETALAGE.
2. Inspecteer het element met id="submenu" in het voorbeeld.
3. Zoek in Stijlen de property position-try-options en klik op de waarde --bottom. Via het tabblad Stijlen gaat u naar het bijbehorende gedeelte @position-try.
4. Klik op de position-anchorwaardelink of dezelfde anchor()argumenten. Het deelvenster Elementen selecteert het element met het bijbehorende popovertarget-kenmerk en het tabblad Stijlen toont de css van het element.

Dubbelklik op een waarde om deze te bewerken.

Het boxmodel van een element bekijken

Als je het boxmodel van een element wilt bekijken, ga je naar het tabblad Stijlen en klik je op de knop Zijbalk tonen in de actiebalk.

Dubbelklik op een waarde om deze te wijzigen.

De CSS van een element zoeken en filteren

Gebruik het vak Filteren op de tabbladen Stijlen en Berekend om te zoeken naar specifieke css-kiezers (waaronder bovenliggende kiezers in geneste regels), eigenschappen of waarden.

Als u ook wilt zoeken naar overgenomen eigenschappen op het tabblad Berekend, vinkt u het selectievakje Alles tonen aan.

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

Pagina met focus emuleren

Als je de focus verplaatst van de pagina naar DevTools, worden sommige overlay-elementen automatisch verborgen als ze worden geactiveerd door de focus. Bijvoorbeeld dropdownmenu's, menu's of datumkiezers. Met de optie check_box Pagina met focus emuleren kun je zo'n element debuggen alsof het de focus heeft.

Probeer een pagina met focus te emuleren op deze demopagina:

1. Focus op het invoerelement. Er verschijnt een ander element onder.
2. Open DevTools. Het venster DevTools is nu actief in plaats van de pagina, dus het element verdwijnt weer.
3. Klik in Elementen > Stijlen op :hov, vink check_box Een gefocuste pagina emuleren aan en zorg dat het invoerelement is geselecteerd. Je kunt het element eronder nu inspecteren.

Je vindt dezelfde optie ook in het deelvenster Rendering.

Ga naar Het scherm bevriezen en verdwijnende elementen inspecteren voor meer manieren om een element te bevriezen.

Een pseudoklasse aan-/uitzetten

Een pseudoklasse aan- of uitzetten:

1. Selecteer een element.
2. Ga in het deelvenster Elementen naar het tabblad Stijlen.
3. Klik op :hov.
4. Vink de pseudoklasse aan die je wilt aanzetten.

In dit voorbeeld zie je dat DevTools de declaratie background-color toepast op het element, ook al wordt de muisaanwijzer niet op het element geplaatst.

Op het tabblad Stijlen staan de volgende pseudoklassen voor alle elementen:

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

Sommige elementen kunnen ook hun eigen pseudoklassen hebben. Als je zo'n element selecteert, toont het tabblad Stijlen het gedeelte Specifieke elementstatus afdwingen. Je kunt dit gedeelte uitvouwen en pseudoklassen aanzetten die specifiek zijn voor het element.

Ga naar Een pseudostate toevoegen aan een klasse voor een interactieve tutorial.

Overgenomen pseudoelementen voor markeringen bekijken

Met pseudoelementen kunt u specifieke delen van elementen opmaken. Pseudo-elementen voor markering zijn documentgedeelten met de status Geselecteerd. Ze zijn opgemaakt als Gemarkeerd om deze status aan de gebruiker aan te geven. Voorbeelden van zulke pseudoelementen zijn ::selection, ::spelling-error, ::grammar-error en ::highlight.

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

Als u meer inzicht wilt in de overname en prioriteit van de regels, kunt u de overgenomen pseudomarkeringselementen bekijken:

1. Inspecteer de tekst hieronder.

   Ik heb de stijl van het pseudoelement voor markering van mijn bovenliggende element overgenomen. Selecteer mij!

2. Selecteer een deel van de tekst hierboven.

3. Scroll op het tabblad Stijlen omlaag naar het gedeelte Inherited from ::selection pseudo of....

Cascade-lagen bekijken

Met cascadelaag kun je je CSS-bestanden explicieter beheren om conflicten met stijlspecificiteit te voorkomen. Dit is handig voor grote codebases, ontwerpsystemen en bij het beheren van stijlen van derden in apps.

Als je trapsgewijze lagen wilt bekijken, inspecteer je het volgende element en open je Elementen > Stijlen.

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

Als je de laagvolgorde wilt bekijken, klik je op de laagnaam of op de knop Weergave van css-lagen aan-/uitzetten.

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

Een pagina bekijken in de afdrukmodus

Zo bekijk je een pagina in de afdrukmodus:

1. Open het opdrachtmenu.
2. Begin met typen van Rendering en selecteer Show Rendering.
3. Selecteer afdrukken in het dropdownmenu Css-media emuleren.

Gebruikte en ongebruikte css bekijken met het tabblad Dekking

Op het tabblad Dekking staat welke css een pagina daadwerkelijk gebruikt.

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

2. Begin met typen coverage.

   

3. Selecteer Dekking tonen. Het tabblad Dekking verschijnt.

   

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

   

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

5. Klik op een CSS-bestand om een regel-voor-regel overzicht te bekijken van de CSS die het gebruikt in het voorbeeld hierboven.

   

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

Modus voor afdrukvoorbeeld afdwingen

Ga naar DevTools dwingen de modus Afdrukvoorbeeld te gebruiken.

Css kopiëren

In het tabblad Stijlen kunt u via één dropdownmenu afzonderlijke css-regels, declaraties, eigenschappen en waarden kopiëren.

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

Zo kopieer je CSS:

1. Selecteer een element.
2. Klik met de rechtermuisknop op een CSS-property op het tabblad Elements > Styles.

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

   • Verklaring kopiëren. Kopieert de property en de waarde ervan in de CSS-syntaxis: css property: value;
   • Property kopiëren. Kopieert alleen de naam van de property.
   • Waarde kopiëren. Kopieert alleen de value.
   • Regel kopiëren. Kopieert de hele css-regel: css selector[, selector] { property: value; property: value; ... }
   • Declaratie kopiëren als JS. Kopieert de property en de waarde ervan in de JavaScript-syntaxis: js propertyInCamelCase: 'value'
   • Alle declaraties kopiëren. Kopieert alle property's en hun waarden in de css-regel: css property: value; property: value; ...

   • Alle declaraties kopiëren als JS. Kopieert alle property's en hun waarden in de JavaScript-syntaxis: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

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

   • Berekende waarde bekijken Hiermee ga je naar het tabblad Berekend.

Css wijzigen

In dit gedeelte vind je alle manieren waarop je CSS kunt wijzigen in Elementen > Stijlen.

Daarnaast kun je het volgende doen:

• CSS overschrijven tijdens het laden van pagina's.
• Aangepaste CSS opslaan in je lokale bronnen in een werkruimte.

CSS wijzigen met codecompletion

Als u wilt experimenteren met complexere combinaties van CSS-eigenschappen, zoals verlopen of schaduwen, zonder de exacte syntaxis te onthouden, of als u snel raster- en flex-indelingen wilt maken die afhankelijk zijn van meerdere gerelateerde eigenschappen, kunt u een CSS-eigenschap typen en codeaanvulling gebruiken.

Een CSS-declaratie toevoegen aan een element

Omdat de volgorde van declaraties van invloed is op de manier waarop een element wordt gestyled, kun je declaraties op verschillende manieren toevoegen:

• Voeg een inline verklaring toe. Dit is hetzelfde als het kenmerk style toevoegen aan de HTML van het element.
• Een declaratie toevoegen aan een stijlregel.

Welke workflow moet je gebruiken? In de meeste gevallen wilt u waarschijnlijk de inline declaratie-workflow gebruiken. Inline-declaraties hebben een hogere specificiteit dan externe declaraties. De inline-workflow zorgt er dus voor dat de wijzigingen van kracht worden in het element, zoals je zou verwachten. Ga naar Selectortypen voor meer informatie over specificiteit.

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

Een inline declaratie toevoegen

Zo voegt u een inline verklaring toe:

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

4. Voer een geldige waarde in voor die property en druk op Enter. In de DOM-boomstructuur kun je zien dat er een style-kenmerk is toegevoegd aan het element.

   

   In het screenshot zijn de eigenschappen margin-top en background-color toegepast op het geselecteerde element. In de DOM-boomstructuur zie je de declaraties terug in het kenmerk style van het element.

Een declaratie toevoegen aan een stijlregel

Zo voeg je een declaratie toe aan een bestaande stijlregel:

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

In de screenshot krijgt een stijlregel de nieuwe declaratie border-bottom-style:groove.

De naam of waarde van een verklaring wijzigen

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

Opsombare waarden wijzigen met sneltoetsen

Als 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+Pijl-omhoog (Mac) of Alt+Pijl-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+Omhoog (Mac) of Control+Shift+Page Up (Windows, Linux) om de waarde met 100 te verhogen.

Verlagen werkt ook. Vervang elke instantie van Omhoog die eerder is genoemd door Omlaag.

Lengtewaarden wijzigen

U kunt de cursor gebruiken om een property met een lengte te wijzigen, zoals breedte, hoogte, opvulling, marge of rand.

Zo wijzig je de lengte-eenheid:

1. Plaats de cursor op de naam van de eenheid. De naam is onderstreept.

2. Klik op de eenheidsnaam om een eenheid in het dropdownmenu te selecteren.

Zo wijzigt u de lengtewaarde:

1. Plaats de cursor op de eenheidswaarde. De cursor verandert in een horizontale pijl met 2 koppen.

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

Als je de waarde met 10 wilt aanpassen, houd je Shift ingedrukt terwijl je sleept.

Een klasse toevoegen aan een element

Zo voeg je een klasse toe aan een element:

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

Voorkeuren voor licht en donker thema nabootsen en automatische donkere modus aanzetten

Zo schakel je de automatische donkere modus of emuleer je de voorkeur van de gebruiker voor lichte of donkere thema's:

1. Klik op het tabblad Elementen > Stijlen op Veelvoorkomende rendering-emulaties schakelen.

2. Selecteer een van de volgende opties in het dropdownmenu:

   • 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 het donkere thema verkiest.
   • Automatische donkere modus. Toont je pagina in de donkere modus, zelfs als je deze niet hebt geïmplementeerd. Ook wordt prefers-color-scheme automatisch ingesteld op dark.

Dit dropdownmenu is een snelkoppeling voor de opties Mediafunctie prefers-color-scheme voor css emuleren en Automatische donkere modus aanzetten op het tabblad Weergave.

Een lesgroep aan- of uitzetten

Zo zet je een klasse aan of uit voor een element:

1. Selecteer het element in de DOM-boomstructuur.
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. Vink het selectievakje aan of uit naast de lesgroep die je wilt aan- of uitzetten.

Een stijlregel toevoegen

Zo voeg je een nieuwe stijlregel toe:

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

In het screenshot voegt DevTools de stijlregel h1.devsite-page-title toe nadat je op Nieuwe stijlregel hebt geklikt.

Kies aan welke stylesheet je een regel wilt toevoegen

Als u een nieuwe stijlregel toevoegt, houdt u Nieuwe stijlregel ingedrukt om te kiezen aan welk stijlblad u de stijlregel wilt toevoegen.

Een verklaring aan- of uitzetten

Zo zet je één declaratie aan of uit:

1. Selecteer een element.
2. Plaats de cursor op het tabblad Stijlen op de regel die de declaratie definieert. Er verschijnen selectievakjes naast elke declaratie.
3. Vink het selectievakje naast de verklaring aan of uit. Als u een declaratie wist, strepen de DevTools deze door om aan te geven dat deze niet meer actief is.

In het screenshot is de property color voor het geselecteerde element uitgezet.

De pseudoelementen ::view-transition bewerken tijdens een animatie

Ga naar het bijbehorende gedeelte in Animaties.

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

Rasteritems en hun content uitlijnen met de rastereditor

Ga naar het bijbehorende gedeelte in CSS-rasters inspecteren.

Kleuren wijzigen met de kleurkiezer

Ga naar HD- en niet-HD-kleuren inspecteren en fouten opsporen met de kleurkiezer.

De hoekwaarde wijzigen met de hoekklok

De Angle Clock biedt een GUI om <angle>'s in CSS-propertywaarden te wijzigen.

Zo open je de hoekklok:

1. Selecteer een element met een hoekdeclaratie.

2. Zoek op het tabblad Stijlen de declaratie transform of background die je wilt wijzigen. Klik op het vak Voorbeeld van hoek 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 cirkel Hoekklok te klikken of met de muis te scrollen om de hoekwaarde met 1 te verhogen / verlagen.

5. Er zijn meer sneltoetsen om de hoekwaarde te wijzigen. Ga naar Sneltoetsen voor het deelvenster Stijlen voor meer informatie.

Vak- en tekstschaduwen wijzigen met de schaduweditor

De Schaduweditor biedt een GUI om CSS-declaraties voor text-shadow en box-shadow te wijzigen.

Zo wijzigt u schaduwen met de schaduweditor:

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

2. Zoek op het tabblad Stijlen naar een schaduwicoon  naast de declaratie text-shadow of box-shadow.

   

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

   

4. Wijzig de schaduweigenschappen:

   • Type (alleen voor box-shadow). Kies Buiten of Binnen.
   • X- en Y-verschuivingen. Sleep de blauwe stip of voer waarden in.
   • Vervagen. Sleep de schuifregelaar of voer een waarde in.
   • Spreiding (alleen voor box-shadow). Sleep de schuifregelaar of voer een waarde in.

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

De timing van animaties en overgangen bewerken met de Easing-editor

De Easing-editor biedt een GUI om de waarden van transition-timing-function en animation-timing-function te wijzigen.

Zo opent u de Easing-editor:

1. Selecteer een element met een declaratie van een timingfunctie, zoals het element <body> op deze pagina.
2. Zoek op het tabblad Stijlen het paarse icoon  naast de declaraties transition-timing-function, animation-timing-function of de verkorte eigenschap transition.
3. Klik op het icoon om de Bewerkingseditor te openen:

Voorinstellingen gebruiken om de timing aan te passen

Als je de timing met één klik wilt aanpassen, gebruik je de voorinstellingen in de Easing-editor:

1. Klik in de Bewerkingseditor op een van de kiezerknoppen om een trefwoordwaarde in te stellen:
   • lineair
   • ease-in-out
   • ease-in
   • ease-out

2. Klik in de voorinstellingenkiezer op de knop of om een van de volgende voorinstellingen te kiezen:

   • Lineaire voorinstellingen: elastic, bounce of emphasized.
   • Voorinstellingen voor Cubic Bezier:

Zoekwoord voor timing	Vooraf ingesteld	Cubic Bezier
afnemen naar binnen/buiten	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, kubisch	cubic-bezier(0.65, 0.05, 0.36, 1)
	Snel uit, langzaam in	cubic-bezier(0.4, 0, 0.2, 1)
	In, uit, terug	cubic-bezier(0.68, -0.55, 0.27, 1.55)
afnemen naar binnen	In, sinus	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, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Snel uit, lineair in	cubic-bezier(0.4, 0, 1, 1)
afnemen naar buiten	Uit, sinus	cubic-bezier(0.39, 0.58, 0.57, 1)
	Uit, kwadratisch	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Uit, kubisch	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)

Aangepaste timing instellen

Als je aangepaste waarden voor timingfuncties wilt instellen, gebruik je de controlepunten op de lijnen:

• Voor lineaire functies klik je ergens op de lijn om een controlepunt toe te voegen en sleep je het. Dubbelklik om het punt te verwijderen.

  

• Voor kubieke Bézier-functies sleep je een van de controlepunten.

  

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

(Experimenteel) Css-wijzigingen kopiëren

Als dit experiment aanstaat, worden je CSS-wijzigingen groen gemarkeerd op het tabblad Stijlen.

Als je één wijziging in een css-declaratie wilt kopiëren, plaats je de cursor op de gemarkeerde declaratie en klik je op de knop Kopiëren.

Als je alle css-wijzigingen in alle declaraties tegelijk wilt kopiëren, klik je met de rechtermuisknop op een declaratie en selecteer je Alle css-wijzigingen kopiëren.

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