Top 60+ CSS-interviewvragen en -antwoorden (2026)
Emma Davis
Klaar voor een sollicitatiegesprek voor CSS? Het is tijd om je kennis van de basisprincipes en meer aan te scherpen. CSS-interview Vragen kunnen aan het licht brengen in hoeverre kandidaten de logica van ontwerpstructuur en stijl begrijpen.
Een carrière in CSS-ontwikkeling opent deuren naar diverse mogelijkheden, van front-end design tot responsieve webapplicaties. Met technische ervaring, domeinexpertise en sterke analytische vaardigheden kunnen professionals geavanceerde vaardigheden laten zien die teamleiders en managers waarderen. Deze vragen en antwoorden helpen beginnende, middenkader- en senior ontwikkelaars om sollicitatiegesprekken vol vertrouwen en effectief te doorlopen.
Deze gids is gebaseerd op inzichten van meer dan 85 professionals, waaronder technische leiders, managers en experts op het gebied van personeelswerving. De gids bevat betrouwbare interviewpraktijken voor verschillende sectoren, waardoor nauwkeurigheid, relevantie en geloofwaardigheid voor alle ervaringsniveaus worden gegarandeerd.
Top CSS-interviewvragen en -antwoorden
1) Leg de moderne CSS-cascade uit, inclusief @layer, specificiteit en bronvolgorde.
De cascade bepaalt welke regel 'wint' wanneer meerdere regels op hetzelfde element gericht zijn. De beslissing wordt genomen op basis van belangrijkheid ( !important ), oorsprong (user agent, gebruiker, auteur), dan laagvolgorde vanaf @layer, gevolgd door specificiteit en ten slotte bronvolgorde. @layer Hiermee kunt u voorspelbare niveaus definiëren, zoals reset, basis, componenten en hulpprogramma's, zodat hele groepen regels andere overschrijven zonder de selectorspecificiteit te verhogen. Het grootste voordeel is de onderhoudbaarheid; het grootste nadeel is dat een onjuiste laagvolgorde bugs kan verbergen. Geef de voorkeur aan klasseselectoren met een lage specificiteit, reserveer !important voor doelbewust beleid en zorg dat de architectuur leesbaar blijft.
Antwoord met voorbeelden
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
👉 Gratis PDF-download: CSS-interviewvragen
2) Hoe verschillen containerquery's van mediaquery's en waar zou je ze gebruiken?
Containerquery's reageren op de grootte of stijl van een bevattende element, waardoor componenten zelfbewust en herbruikbaar worden in verschillende contexten. Media queries reageren op uitkijk postje of apparaatkenmerken en glans voor globale lay-outverschuivingen. Containerquery's stellen kaarten, widgets en geneste modules in staat zich lokaal aan te passen; mediaquery's blijven ideaal voor sitebrede navigatie of shell-wijzigingen. Voordelen van containerquery's zijn onder andere een fijnere granulariteit en minder globale breekpunten; nadelen zijn onder andere de installatie via container-type en zorgvuldige selectie van grenzen.
Verschil tussen (vergelijkingstabel)
| Factor | Media Queries | Containerquery's |
|---|---|---|
| Trigger | Viewport-functies | Containergrootte of -stijl |
| strekking | Paginabreed | Component-lokaal |
| Setup | Geen buiten de vraag | Vereist container-type / optionele naam |
| Best voor | Globale breekpunten | Kaart- of widgetvarianten |
Antwoord met voorbeelden
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) Wat zijn de kenmerken en voordelen van :has(), en hoe verhoudt het zich tot :is() maximaliseren en :where() ?
De relationele pseudo-klasse :has() selecteert een element op basis van zijn nakomelingen of een daaropvolgend patroon, waardoor ouderlijke stijl mogelijk is zonder JavaScript. Dit is krachtig voor formuliervalidatiegroepen, navigatiestatussen of dichtheidsschakelaars. Daarentegen, :is() maximaliseren en :where() lange selectorlijsten vereenvoudigen; :where() draagt bij aan nul specificiteit, terwijl :is() draagt bij aan de specificiteit van zijn meest specifieke argument. Voordelen van :has() Inclusief contextuele styling en duidelijkere markup; nadelen zijn onder meer mogelijke prestatieproblemen bij gebruik met onbeperkte selectoren. Beperk het bereik en combineer het met klassen of attributen voor voorspelbaarheid.
Antwoord met voorbeelden
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) Waar zou je aangepaste CSS-eigenschappen voor thema's toepassen en wat zijn de voor- en nadelen ervan?
Aangepaste CSS-eigenschappen dragen waarden over via de cascade, erven op natuurlijke wijze en worden tijdens runtime verwerkt, wat ze ideaal maakt voor thema's, dichtheidsmodi en ontwerptokens. Ze maken het mogelijk om de donkere modus in of uit te schakelen of kleursystemen te verwisselen zonder assets opnieuw op te bouwen. Voordelen zijn onder andere dynamische updates, colocatie met componenten en compatibiliteit met @layerNadelen zijn onder andere indirecte verwijzing voor statische analysers en de noodzaak om fallbacks te ontwerpen. Gebruik root-scoped tokens voor globale semantiek en component-scoped tokens voor varianten, en houd namen stabiel om onderhoud op de lange termijn mogelijk te maken.
Antwoord met voorbeelden
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) Welk layoutsysteem past bij welk probleem: Flexbox, Grid of Subgrid?
Flexbox is optimaal voor eendimensionale uitlijning en verdeling langs één as, Grid blinkt uit in tweedimensionaal plaatsing en expliciete trackcontrole, en Subgrid laat onderliggende elementen bovenliggende gridtracks overnemen voor consistente uitlijning over geneste componenten. De keuze voor het juiste systeem vermindert het aantal overschrijvingen en verbetert de leesbaarheid. Een veelgebruikt patroon is Grid voor paginaframes en dashboards, Flexbox voor werkbalken en chiplijsten, en Subgrid voor het uitlijnen van interne elementen, zoals kaartmetadata, met buitenste kolommen.
Types en verschillen tussen (vergelijkingstabel)
| Use Case | Flexbox | Raster | Subraster |
|---|---|---|---|
| Afmeting | 1-D | 2-D | 2-D via geërfde sporen |
| Sterkte | Distributie, uitlijning | Expliciete gebieden, herhaalbare tracks | Uitlijning van kruiscomponenten |
| Setup | minimaal | Rijen/kolommen definiëren | Bovenliggend raster vereist |
| Voorbeeld | Navigatiebalken, pillen | Galerij, dashboards | Kaartvoetteksten uitgelijnd op paginaraster |
Antwoord met voorbeelden
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
6) Verbeteren logische eigenschappen de internationalisatie? Leg de voor- en nadelen uit.
Logische eigenschappen vervangen fysieke richtingen zoals links en rechts door stroomrelatieve termen zoals inline en blokstart of -einde. Dit zorgt ervoor dat één stijlblad zich aanpast aan talen die van rechts naar links worden geschreven en verticale schrijfmodi zonder vertakkingsregels. De voordelen zijn betere globalisatie, minder duplicatie van regels en veerkrachtigere componenten. De nadelen zijn onder andere een mentale verschuiving tijdens de implementatie en incidentele hiaten in long-tail eigenschappen. Voordeel margin-inline, padding-blocken inset-inline-start voor spaties en positionering om consistente lay-outs op alle locaties te verkrijgen.
Antwoord met voorbeelden
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) Wanneer zou je gebruiken clamp() en moderne viewport-eenheden ( svh, lvh, dvh ) voor vloeistoftype en -afstand?
Gebruik clamp(min, preferred, max) Wanneer u waarden wilt die soepel meeschalen met de groei van de viewport, maar nooit de gewenste limieten overschrijden. Dit is ideaal voor typografie, opvulling en hero-secties. Moderne viewport-eenheden zijn afgestemd op de Chrome-gebruikersinterface van mobiele browsers en bieden stabiele hoogtes voor secties op volledig scherm. De voordelen zijn onder andere minder mediaquery's, een consistent ritme en een verbeterde toegankelijkheid in combinatie met remHet nadeel is dat er tests op meerdere apparaten moeten worden uitgevoerd om de visuele intentie en veilige tikdoelen te bevestigen.
Antwoord met voorbeelden
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) Wat is een stapelcontext en hoe creëren of isoleren z-index- en positioneringsfactoren deze?
Een stapelcontext is een geïsoleerde schilderij-scope waarin z-indexvergelijkingen alleen worden gemaakt tussen verwante elementen binnen dezelfde context. Nieuwe contexten ontstaan vanuit het root-element, gepositioneerde elementen met z-index dan auto, en bepaalde eigenschappen zoals transform, opacity < 1, filteren position: fixed. Begrip hiervan verklaart veelvoorkomende problemen met "z-index werkt niet", waarbij een kind inhoud buiten de context niet kan overzien. Het voordeel is inkapseling; het gevaar is onbedoelde isolatie die beoogde overlays verhindert.
Antwoord met voorbeelden
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) Is native CSS-nesting klaar voor productie, en hoe zou je overstappen van preprocessors?
Native nesting wordt breed ondersteund en vermindert herhaling door regelrelaties te coloceren en selectoren kort te houden. Bij migratie moeten componenten eerst prioriteit krijgen, waarbij diepe afstammelingenketens worden vervangen door één of twee niveaus van nesting en preprocessor-only constructies zoals mixins worden verwijderd. Voordelen zijn onder andere kleinere bundels en verbeterde DevTools-mapping; nadelen zijn onder andere de verleiding om te veel te nesten, wat de specificiteit verhoogt en hergebruik belemmert. Stel barrières in: beperk de diepte, behoud klassegebaseerde hooks en combineer met @layer om de override-volgorde te bepalen.
Antwoord met voorbeelden
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) Kun je container-stijl query's gebruiken en wat zijn de praktische voordelen ervan?
Stijlquery's stellen componenten in staat zich aan te passen aan berekende stijlen van hun container, zoals een dichtheidstoken of themavariant, zonder extra klassenamen door de DOM te hoeven leiden. Dit stelt ontwerpsystemen in staat om te schakelen tussen compacte en comfortabele modi of lichte en donkere accenten per container. De voordelen zijn ontkoppelde componenten en duidelijkere grenzen; nadelen zijn onder andere de noodzaak van zorgvuldige tokennaamgeving, gedocumenteerde fallbacks en een weloverwogen containerconfiguratie. Gebruik ze om status uit te drukken als data in plaats van als kwetsbare structurele selectoren.
Antwoord met voorbeelden
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) Welke prestatiefactoren zijn belangrijk voor CSS en hoe voorkom je dat de lay-out wordt verstoord?
De CSS-prestaties zijn afhankelijk van hoe vaak de browser opnieuw moet berekenen stijl, berekenen lay-out, en opnieuw schilderen of samengesteld Lay-out thrashing treedt op wanneer interleaved lees- en schrijfbewerkingen naar eigenschappen die de lay-out beïnvloeden, herhaaldelijke reflows afdwingen. Een gedisciplineerde aanpak is om de selectorcomplexiteit te minimaliseren, de specificiteit laag te houden en alleen compositor-vriendelijke eigenschappen te animeren. Batch DOM-leesbewerkingen vóór schrijfbewerkingen en maak gebruik van containment om de blastradius te beperken.
Antwoord met voorbeelden
- Verkiezen
transformmaximaliseren enopacityvoor animaties; vermijd animerenwidth/height/top/left. - Toepassen
content-visibility: autonaar off-screen secties en biedencontain-intrinsic-size. - Gebruik
will-changespaarzaam, om lagen alleen te promoten bij langlopende animaties. - Vervang diepe afstammelingselectoren door hooks voor één klasse om het opnieuw berekenen van de stijl te verminderen.
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
12) Welke CSS-functies ondersteunen direct toegankelijkheid? Geef voordelen en voorbeelden.
CSS kan semantische HTML of ARIA niet vervangen, maar het verbetert focus zichtbaarheid, bewegingsveiligheiden contraststrategieën. De :focus-visible De pseudo-klasse onthult de focus wanneer de toetsenbordmodaliteit wordt gedetecteerd, waardoor visuele ruis voor muisgebruikers wordt voorkomen en signalen voor toetsenbordgebruikers behouden blijven. Mediafuncties zoals prefers-reduced-motion maken respectvolle terugvalpatronen mogelijk, terwijl een zorgvuldig ontwerp van kleurtokens voldoende contrast ondersteunt. Het voordeel is de standaardinstellingen voor verschillende gebruikersvoorkeuren; de beperking is dat semantiek en toetsenbordnavigatie moeten worden verzorgd door markup en scripting.
Antwoord met voorbeelden
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) Verschillende manieren om CSS te gebruiken en de voor- en nadelen van elke aanpak.
Er bestaan meerdere inclusiestrategieën, elk met eigen kenmerken die van invloed zijn op caching, kritieke pad en onderhoudbaarheid. Externe stylesheets houden aandachtspunten gescheiden en maken gebruik van browsercaching; inline <style> is geschikt voor kritieke regels die met de HTML moeten worden geladen; inline style="" Attributen hebben de hoogste prioriteit, maar belemmeren hergebruik en verhogen de specificiteit. Het selecteren van het juiste type vermindert duplicatie van de payload en behoudt tegelijkertijd de ergonomie van de ontwikkelaar.
Voordelen versus nadelen (vergelijkingstabel)
| Methode | Voordelen | Nadelen | Typisch gebruik |
|---|---|---|---|
| Extern stijlblad | Browsercaching; gedeeld over pagina's | Extra HTTP-verzoek | Globaal ontwerpsysteem |
In lijn <style> |
Verwijdert verzoeken; ideaal voor kritische CSS | Moeilijker te beheren op schaal | Boven-de-vouw-stijlen |
In lijn style="" |
Directe en hoogste specificiteit | Geen hergebruik; ruisende HTML | Eenmalige overrides |
Antwoord met voorbeelden
<link rel="stylesheet" href="/nl/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) Wat is het verschil tussen relative, absolute, fixeden sticky Positionering? Geef richtlijnen voor use cases.
Positionering bepaalt hoe elementen in de flow worden geplaatst en hoe ze interacteren met scrollen en voorouders. relative behoudt de natuurlijke stroom, maar compenseert het visuele kader; het wordt vaak gebruikt om een verankerende context te creëren. absolute verwijdert een element uit de stroom en positioneert het ten opzichte van de dichtstbijzijnde gepositioneerde voorouder, wat precisie biedt ten koste van de responsiviteit. fixed koppelt elementen aan het venster, wat ideaal is voor permanente balken, maar rekening moet houden met toetsenborden op het scherm en veilige gebieden. sticky schakelt tussen statisch en vast, afhankelijk van de scroll-drempels, en biedt sectiekopteksten en indexen op de pagina.
Antwoord met voorbeelden
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) Welke factoren bepalen een onderhoudbare CSS-architectuur (BEM, ITCSS, hulpprogramma's, lagen) en wat is de levenscyclus van een componentstijl?
Een onderhoudbare architectuur zorgt voor evenwicht specificiteit discipline, voorspelbaar gelaagdheiden stabiel naamgevingBEM biedt expliciete hooks, ITCSS-orderregels van resets op laag niveau tot hulpprogramma's op hoog niveau, utility-first-benaderingen versnellen iteratie met beperkte primitieven, en @layer formaliseert de volgorde van overrides in de codebase. De levenscyclus van een component begint doorgaans met de definitie van een token, gaat verder met basis- en componentregels, voegt varianten en statussen toe en eindigt met afkeuringsbeleid dat wijzigingen voorkomt die de code verstoren. Het voordeel is consistent gedrag binnen teams; de afweging is planning en governance vooraf.
Antwoord met voorbeelden
- Tokens in
:root(afstand, kleur, straal). - Componenten geplaatst in
@layer componentsmet selectoren voor één klasse. - Varianten via data-attributen of container-stijlquery's voor meer duidelijkheid.
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) Welke invloed heeft de Shadow DOM op de scope van CSS en wat zijn de verschillende manieren om onderdelen te stylen?
Shadow DOM encapsuleert markup en styling, voorkomt onbedoelde lekkage en garandeert de stabiliteit van componenten. Auteurs kunnen oppervlakken opzettelijk blootstellen: ::part() doelen op benoemde onderdelen die door het onderdeel worden geëxporteerd, terwijl ::slotted() stijlen toegewezen light-DOM-knooppunten in slots. De voordelen zijn onder andere robuuste inkapseling en voorspelbare thema-oppervlakken; nadelen zijn onder meer een beperkt bereik in de interne onderdelen, tenzij de componentontwerper onderdelen levert, en de noodzaak om die onderdelen voor consumenten te documenteren.
Antwoord met voorbeelden
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) Wat zijn de kenmerken van het CSS-boxmodel en waarom? box-sizing: border-box er toe doen?
Het boxmodel beschrijft hoe de totale grootte van een element wordt afgeleid van inhoud, opvulling, randen marge. Met de standaard content-box, verklaard width sluit opvulling en randen uit, wat kan leiden tot verrassingen bij overloop en complexe berekeningen. border-box Inclusief opvulling en rand binnen de aangegeven breedte en hoogte, waardoor rasterberekeningen en componentgroottes beter voorspelbaar zijn. Het voordeel is eenvoudigere mentale modellen en minder lay-outfouten; het nadeel is dat het combineren van modellen binnen een systeem verwarrend kan zijn voor bijdragers. Standaardiseer vanaf de basis en documenteer uitzonderingen openlijk.
Antwoord met voorbeelden
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) Waar zou je het gebruiken? @supports voor progressieve verbetering, en wat zijn de voordelen?
@supports maakt featuredetectie in CSS mogelijk, waardoor een basislijn overal kan functioneren met voorwaardelijke verbeteringen waar beschikbaar. Dit patroon verlaagt het risico bij het implementeren van moderne features zoals containerquery's. :has(), of subgrid. De belangrijkste voordelen zijn een soepele degradatie en duidelijkere migratiepaden; nadelen zijn onder meer het tijdelijk handhaven van dubbele codepaden. Structureer eerst het basisgedrag en verpak vervolgens het geavanceerde gedrag in doelgerichte @supports blokken zodat oudere omgevingen niet achteruitgaan.
Antwoord met voorbeelden
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) Welke CSS-eenheden moet je kiezen en wat is het verschil ertussen?
De gekozen eenheid heeft invloed op de schaal, leesbaarheid en toegankelijkheid. rem schaalt mee met de basislettergrootte, waardoor het ideaal is voor globaal lettertype en spaties; em schaalt mee met het huidige element, wat handig is binnen componenten, maar onverwacht samengesteld kan worden. ch geeft de breedte van het teken “0” weer en is uitstekend geschikt voor het meten van (lijnlengte). px is het apparaat pixel-uitgelijnd en veilig voor haarlijnen, maar reageert niet op gebruikersvoorkeuren. Eenheden voor regelhoogte zoals lh maximaliseren en rlh Help het verticale ritme te behouden door de spatiering aan het typografische raster te koppelen.
Antwoord met voorbeelden
- Gebruik
max-width: 65chvoor leesbare paragrafen. - Globale afstand instellen als veelvouden van
remom de voorkeuren van de gebruiker te respecteren. - Gebruik
emvoor componentinterne onderdelen zoals pictogramknoppen die meeschalen met de lettergrootte.
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) Helpen CSS-tellers bij gestructureerde inhoud, en wat zijn hun voor- en nadelen?
CSS-tellers zorgen voor automatische nummering zonder de semantische HTML te wijzigen, wat handig is voor koppen, figuren en juridische documenten. De voordelen zijn onder andere een overzichtelijke opmaak en flexibiliteit in de presentatie over verschillende landinstellingen of secties heen. Nadelen zijn mogelijke hiaten in de toegankelijkheid als de nummering een essentiële betekenis overbrengt die niet wordt weerspiegeld in de DOM-structuur of wordt aangekondigd door ondersteunende technologie. Gebruik tellers voor presentatienummering en zorg er tegelijkertijd voor dat de onderliggende hiërarchie correct en navigeerbaar is.
Antwoord met voorbeelden
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) Wanneer moet je animeren met CSS en welke eigenschappen zijn het veiligst voor de prestaties?
Animaties zijn het meest veerkrachtig wanneer ze werken met compositorvriendelijke eigenschappen die relayout en repaint vermijden. CSS excelleert in declaratieve, state-gedreven overgangen waarbij de browser frameplanning kan optimaliseren. De veiligste keuzes zijn transform maximaliseren en opacity, die doorgaans op de compositor-thread draaien en het werk van de hoofdthread minimaliseren. Gebruik CSS voor micro-interacties, hover-overgangen en eenvoudige ingangseffecten. Vermijd het animeren van eigenschappen die de lay-out beïnvloeden, zoals width, height, topen left omdat ze een herberekening van de lay-out activeren. Wanneer geometriewijzigingen essentieel zijn, overweeg dan transformatie-gebaseerde illusies of combineer zachte max-height overgangen met overloopbeheer en zorgvuldige toegankelijkheidsopties.
Antwoord met voorbeelden
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) Kan CSS responsieve afbeeldingen ondersteunen, en wat zijn de verschillende manieren om dit aan te pakken?
HTML bezit intrinsieke beeldselectie via srcset maximaliseren en sizes, maar CSS blijft belangrijk voor decoratieve beelden, de artistieke richting van achtergronden en het passend maken van objecten. Gebruik image-set() om meerdere resoluties voor achtergrondafbeeldingen te leveren en de voorkeur te geven object-fit maximaliseren en object-position om vervangen elementen binnen hun kaders te beheren. Combineer deze met container- of mediaquery's om uitsnedes, dichtheid of focuspunten aan te passen. Het voordeel is nauwkeurige visuele controle zonder overmatige markup; het nadeel is dat CSS-achtergrondafbeeldingen geen intrinsieke onderhandeling over de grootte hebben en niet worden aangekondigd door ondersteunende technologieën, dus contentafbeeldingen moeten in HTML blijven.
Voordelen versus nadelen (vergelijkingstabel)
| Aanpak | Kenmerken | Voordelen | Nadelen | Typisch gebruik |
|---|---|---|---|---|
HTML srcset/sizes |
Intrinsieke selectie | Correcte semantiek; beste prestaties | Vereist markupwijzigingen | Inhoudelijke beelden |
CSS image-set() |
Achtergrondresolutie-sets | Eenvoudige wissel per breekpunt | Geen intrinsieke maatvoering | Decoratieve achtergronden |
object-fit / position |
Box inperkingscontrole | Consistente bijsnijding | Niet voor achtergrondafbeeldingen | Miniaturen, avatars |
Antwoord met voorbeelden
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23) Is een JavaIs een scriptvrije donkere modus haalbaar en welke factoren maken deze robuust?
A JavaEen scriptvrije donkere modus is mogelijk door aangepaste eigenschappen te combineren met de prefers-color-scheme mediafunctie en een optioneel HTML-attribuut voor gebruikersoverschrijvingen. Definieer semantische tokens aan de root, bied donkere varianten binnen een mediaquery en sta een [data-theme] Override om expliciete gebruikerskeuze of bedrijfsbranding te respecteren. Deze aanpak minimaliseert de complexiteit, vermindert flikkering en zorgt ervoor dat de cascade gezaghebbend blijft. De beperking is de afhankelijkheid van systeemvoorkeuren wanneer er geen expliciete override aanwezig is. Documenteer de tokens, zorg voor voldoende contrast en test focuscontouren en -statussen in beide modi.
Antwoord met voorbeelden
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) Zijn er nadelen verbonden aan diepe selectornesting en hoge specificiteit, en wat zijn de voordelen van een aanpak met lage specificiteit?
Diep nesten en hoge specificiteit maken stijlen broos, vertragen refactors en verhogen het risico op onbedoelde overschrijvingen. Dergelijke selectors koppelen CSS nauw aan de documentstructuur, wat de onderhoudskosten verhoogt wanneer de markup evolueert. Een aanpak met lage specificiteit geeft de voorkeur aan hooks voor één klasse, een platte architectuur en @layer Bestellen om overschrijvingen voorspelbaar te beheren. De voordelen zijn onder andere een duidelijker eigenaarschap, snellere rendering dankzij eenvoudigere matching en een eenvoudigere samenstelling tussen teams. Stel limieten in voor de nestdiepte, vermijd het kwalificeren van klassen met elementnamen wanneer dit niet nodig is en bied hulpmiddelen voor nooduitgangen.
Antwoord met voorbeelden
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) Welke methodologie – BEM, ITCSS of utility-first – is geschikt voor verschillende teams, en wat zijn de voor- en nadelen?
De selectie van de methodologie hangt af van de grootte van het team, de beoordelingscultuur en de volatiliteit van het product. WELL levert expliciete, leesbare haken die schaalbaar zijn in grote teams. ITCSS organiseert de codebase van low-level resets via objecten en componenten tot hulpprogramma's, in lijn met de cascade. Nut eerst Versnelt de levering met beperkte primitieven en geeft de voorkeur aan compositie boven aangepaste selectoren. Hybriden komen vaak voor: ITCSS voor orde, BEM voor naamgeving waar nodig, en hulpprogramma's voor eenmalige aanpassingen. De afwegingen hebben te maken met verbosity (BEM), upfront planning (ITCSS) en potentiële klassenproliferatie (utility-first).
Verschillen (vergelijkingstabel)
| Methode | Kenmerken | Voordelen | Nadelen | Beste pasvorm |
|---|---|---|---|---|
| WELL | .block__elem–mod naamgeving | Voorspelbare haken | Uitgebreide selectoren | Grote teams, ontwerpsystemen |
| ITCSS | Gelaagde architectuur | Override-order wissen | Planningsoverhead | Multi-team monorepo's |
| Nut eerst | Atomic-klassen | Snelheid, consistentie | Risico op klassenverloop | Snelle prototyping, apps |
26) Leg de levenscyclus van spatie- en typografietokens uit, van ontwerp tot code, aan de hand van voorbeelden.
De levenscyclus van tokens begint in het ontwerp met schaalkeuzes, verhoudingen en toegankelijkheidsdoelen. Deze worden benoemde, versiegebonden aangepaste eigenschappen die semantische informatie vertegenwoordigen. types (bijvoorbeeld, --space-2, --font-scale-1 ) in plaats van ruwe waarden. Tokens stromen door naar basisstijlen, vervolgens naar componenten en varianten, en worden uiteindelijk verouderd of omgeleid via aliassen naarmate systemen evolueren. Voordelen zijn onder andere een consistent ritme, kleinere verschillen en verbeterde platformonafhankelijke pariteit; nadelen zijn onder andere initiële governance-overhead en de noodzaak van duidelijke documentatie. Behandel tokens als openbare API's: definieer bereiken, koppel ze aan gebruiksrichtlijnen en zorg voor migratienotities.
Antwoord met voorbeelden
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) Hoe :focus-visible, :focus-withinen :target verschillen ze, en welke voordelen biedt elk van hen?
Deze selectoren richten zich op verschillende interactie- en navigatiekenmerken. :focus-visible geeft alleen de focus weer als de invoermethode toetsenbordnavigatie suggereert. Hierdoor worden afleidende ringen voor muisgebruikers verminderd en wordt de toegankelijkheid ondersteund. :focus-within komt overeen met een container wanneer een van de afstammelingen de focus heeft, waardoor gegroepeerde markering voor samenstellingen zoals formuliervelden mogelijk wordt. :target komt overeen met het element waarnaar het URL-fragment verwijst, waardoor skip-links en navigatie binnen de pagina zonder scripts mogelijk zijn. Doordacht gecombineerd verbeteren ze de oriëntatie, verminderen ze de cognitieve belasting en ondersteunen ze efficiënte toetsenbordworkflows.
Antwoord met voorbeelden
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) Wat zijn de voor- en nadelen van content-visibility en CSS-containment in grote documenten?
content-visibility: auto Stelt het renderen van off-screen elementen uit totdat ze zich in de buurt van de viewport bevinden, waardoor de initiële renderkosten voor lange feeds aanzienlijk worden verlaagd. Extra containment ( contain: layout paint style ) beperkt de impact van een subboom op de rest van de pagina, waardoor de reflow-scope kleiner wordt en herhaalde updates sneller verlopen. De voordelen zijn een verbeterde responsiviteit en minder geheugengebruik; nadelen zijn onder andere mogelijke pop-in-effecten als de intrinsieke grootte onbekend is en de complexiteit wanneer JavaHet script moet de maten meten. Beperk dit door te voorzien in contain-intrinsic-size en alleen meten als het nodig is.
Antwoord met voorbeelden
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) Hoe bouw je een responsief raster met minimale breekpunten met behulp van minmax() maximaliseren en auto-fit/auto-fill?
Een veerkrachtige lay-out kan worden bereikt door flexibele rails te definiëren die uitzetten tot een maximale breedte en zich vervolgens automatisch omwikkelen. repeat(auto-fit, minmax(min, 1fr)) creëert zoveel kolommen als er passen, waarbij lege tracks worden samengevouwen om lastige gaten te voorkomen. Dit vermindert de afhankelijkheid van expliciete breekpunten, terwijl de harmonieuze dichtheid over alle schermformaten behouden blijft. Deze aanpak is ideaal voor galerijen, kaarten en productlijsten. Zorg voor comfortabele minimumwaarden (bijvoorbeeld 16rem ) en vertrouwen op de tussenruimte om het ritme te behouden.
Antwoord met voorbeelden
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) Welke factoren bepalen wanneer u moet kiezen? gap versus marges voor de afstand tussen items?
gap is een flow-bewuste spatiëring die native werkt met Flexbox en Grid, waarbij symmetrische scheiding wordt toegepast zonder dat de marges instorten. Het is ideaal voor in-component spatie omdat het geen invloed heeft op de uitlijning van het eerste/laatste kind en geen richtingsaanpassingen vereist in lay-outs van rechts naar links. Marges zijn beter voor extern Spatiëring die deel uitmaakt van de openbare API van een component of wanneer spatiëring moet interacteren met niet-Flex/Grid-contexten. Kies op basis van scope, eigenaarschap en layoutsemantiek om verrassende overlappingen te voorkomen en het aantal override-regels minimaal te houden.
Verschillen (vergelijkingstabel)
| Criterium | gap |
Marges |
|---|---|---|
| strekking | Intern aan lay-outcontainer | Extern tussen broers en zussen en buren |
| Directionality | Logisch en symmetrisch | Kan RTL-aanpassingen vereisen |
| Instortend gedrag | Niet van toepassing | Onderhevig aan instorting van de marge |
| Beste gebruik | Flex/Grid-kinderafstand | Component-buitenafstand en lay-outcontracten |
Antwoord met voorbeelden
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) Welke nadelen brengt het vertrouwen op !important, en wat zijn veiligere alternatieven?
overmatig gebruik !important omzeilt de natuurlijke levenscyclus van de cascade, waardoor de intentie wordt verhuld, legitieme overschrijvingen worden geblokkeerd en toekomstige bijdragers worden gedwongen de specificiteit nog verder te verhogen. Het ondermijnt ook de testbaarheid, omdat regels immuun worden voor ordening en @layer strategieën. Het professionele alternatief is het ontwerpen van voorspelbare override-paden: verminder de selectorspecificiteit, plaats beleid in een speciale hulpprogrammalaag of herschik bronnen met @layer in plaats van verklaringen als wapen te gebruiken. !important voor opzettelijk door de gebruiker aangestuurde gevallen, zoals hulpprogramma's met een hoog contrast of gedwongen zichtbaarheid die fungeren als een gedocumenteerde nooduitgang.
Antwoord met voorbeelden
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) Welke typen selectoren moeten worden vermeden vanwege de prestaties of onderhoudbaarheid, en waarom?
Selectoren die zich sterk binden aan de documentdiepte of kenmerken in de gehele DOM zijn riskant. Lange afstammelingenketens verhogen de matchingkosten en creëren kwetsbare afhankelijkheden van markup. Brede kenmerkselectoren zoals [class*="btn"] or [data-*] zonder scoping kan grote subbomen scannen. Overgekwalificeerde selectoren zoals ul.nav > li > a.link Verminder herbruikbaarheid en compliceer overschrijvingen. Een onderhoudbare aanpak geeft de voorkeur aan single-class hooks, statusattributen met duidelijke contracten (bijvoorbeeld [data-state="open"] ), en korte relaties ( > , + ) binnen componentgrenzen. Dit verbetert de leesbaarheid, vermindert cascadeconflicten en versnelt refactorings.
Antwoord met voorbeelden
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) Wanneer moet je kiezen @layer hulpprogramma's versus componentvarianten, en wat zijn de voordelen?
Nutsbedrijven express eenmalige aanpassingen zoals spatie, weergave of uitlijning die moet worden overschreven zonder de specificiteit te verhogen. Componentvarianten drukken herhaalbare toestanden of modi die behoren tot de component-API. Hulpprogramma's blinken uit tijdens het componeren in applicatiecode omdat ze voorspelbaar zijn en geen bewerking van de stijlpagina van de component vereisen. Varianten zijn superieur wanneer dezelfde status terugkeert en moeten worden gedocumenteerd en getest als onderdeel van het ontwerpsysteem. Een gebalanceerde architectuur plaatst hulpprogramma's laat in de laagvolgorde en zorgt ervoor dat componentvarianten een lage specificiteit hebben binnen de componentenlaag.
Antwoord met voorbeelden
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) Kan Grid al het Flexbox-gebruik vervangen, of zijn er verschillen tussen de twee opties om ze allebei te behouden?
Grid en Flexbox lossen orthogonale problemen op. Grid biedt tweedimensionale controle met expliciete trackdefinities, waardoor complexe paginaframes, dashboards en kaartgalerijen eenvoudig te maken zijn. Flexbox blinkt uit in distributie over één as, intrinsieke grootte langs de hoofdas en uitlijning binnen rijen of kolommen, wat ideaal is voor werkbalken, menu's en chips. Pogingen om Grid overal te forceren, brengen ergonomische uitlijning in gevaar, terwijl het forceren van Flexbox voor macro-indeling broze wrappers introduceert. Volwassen systemen combineren beide doelbewust, soms binnen hetzelfde onderdeel, en selecteren de engine waarvan de kenmerken overeenkomen met het probleem.
Verschillen (vergelijkingstabel)
| Criterium | Raster | Flexbox |
|---|---|---|
| Afmeting | Tweedimensionale sporen | Eendimensionale stroming |
| Sterkte | Expliciete gebieden, gaten, subraster | Distributie, uitlijning, herordening |
| Beste gebruik | Paginaframes, dashboards | Werkbalken, navigatie, chiplijsten |
Antwoord met voorbeelden
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) Wat zijn de voor- en nadelen van het gebruik van aspect-ratio versus opvulhacks?
aspect-ratio Biedt een declaratieve, zelfdocumenterende manier om vormen voor kaarten, media en miniaturen te onderhouden zonder wrapper-elementen of pseudo-element-hacks. Het integreert naadloos met objectfitting en werkt voorspelbaar in Grid- en Flex-layouts. De belangrijkste nadelen zijn de gaten in oudere browsers in oudere omgevingen en de noodzaak om eerdere hack-gebaseerde CSS te heroverwegen. Padding-top hacks blijven een terugvaloptie voor zeer oude engines, maar verhogen de DOM-complexiteit en verminderen de duidelijkheid. Geef de voorkeur aspect-ratio voor onderhoudbaarheid, en sluit het af met @supports alleen als er contractueel een oude dekking vereist is.
Antwoord met voorbeelden
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) Hoe zou je een veerkrachtige, kleverige header bouwen die rekening houdt met veilige gebieden en mobiele viewports?
Een veerkrachtige header zorgt voor evenwicht position: sticky voor sectieniveau-ankers met position: fixed alleen wanneer het ontwerp wereldwijde persistentie vereist. Veilige-gebied-inzetstukken voorkomen overlapping met de systeem-UI op apparaten met inkepingen en moderne viewport-eenheden zoals dvh Voorkom dat de browser inklapt wanneer Chrome wordt weergegeven of verborgen. De strategie omvat het toewijzen van een duidelijke stapelcontext, het reserveren van ruimte om lay-outverschuivingen te voorkomen en het bieden van bewegingsvoorkeuren voor ingangseffecten. Testen op toetsenborden en in liggende stand is cruciaal, aangezien virtuele toetsenborden vaste elementen kunnen overlappen als ze niet worden gebruikt.
Antwoord met voorbeelden
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
Overwegingen (snelle tabel)
| Factor | Aanbeveling |
|---|---|
| Veilige gebieden | Gebruik env(safe-area-inset-*) |
| Uitkijk postje | Verkiezen dvh voor regio's op volledige hoogte |
| Z-index | Maak één overlay-schaal en documenteer deze |
37) Wat is het verschil tussen dichtheidsschaling en grootteschaling in componenten, en wanneer moet elk worden gebruikt?
Dichtheidschaling wijzigt spaties, tussenruimten en regelhoogte terwijl de lettergroottes constant blijven, waardoor compacte, comfortabele of ruime varianten ontstaan zonder de typografische hiërarchie te veranderen. De grootteschaling verandert de typografische schaal zelf, het verschuiven van koppen, hoofdtekst en bedieningselementen naar grotere of kleinere stappen. Gebruik dichtheidsschaling voor zakelijke gebruikersinterfaces waar de informatiedichtheid per taak varieert; gebruik grootteschaling om te reageren op de afstand tot het apparaat, toegankelijkheidsbehoeften of merkvereisten. Behandel beide als tokens met gedocumenteerde bereiken om consistentie op alle oppervlakken te garanderen.
Antwoord met voorbeelden
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) Welke nadelen ontstaan er door grootschalige wereldwijde resets, en wat zijn veiligere alternatieven?
Agressieve resets kunnen onbedoeld nuttige standaardinstellingen verwijderen, zoals focuscontouren, lijstsemantiek en formulierbeheermogelijkheden. Dit schaadt de toegankelijkheid en dwingt tot redundante herimplementatie van native gedrag. Veiligere alternatieven zijn onder andere: moderne normalisaties die inconsistenties temmen terwijl de semantiek behouden blijft, en scoped resets toegepast via @layer naar componenten die echt een schone lei nodig hebben. Documenteer het resetbeleid, herstel expliciet kritieke functies zoals :focus-visibleen vermijd het op nul zetten van elementen waarvan de standaardwaarden betekenis overbrengen, zoals b, strongen em.
Antwoord met voorbeelden
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) Hoe debug je complexe cascade-problemen effectief met behulp van DevTools en moderne CSS-functies?
Effectief debuggen begint met het isoleren van het element in DevTools en het inspecteren van de berekende om de uiteindelijke eigenschapswaarden en hun bronnen te bekijken. Controleer vervolgens de Stijlen de regelvolgorde en specificiteit van Pane om te begrijpen waarom een regel heeft gewonnen, waarbij aandacht wordt besteed aan @layer volgorde en of een nieuwe stapel- of containercontext interfereert. Toggle-regels om hypothesen te valideren en gebruik de cascadelaagweergave (waar beschikbaar) om de voorrang van lagen te visualiseren. Voeg tijdelijke debug-overzichten toe en overweeg feature flags via @supports om problemen in tweeën te splitsen door geavanceerde paden selectief uit te schakelen.
Antwoord met voorbeelden
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) Welke plaats nemen afdrukstijlen en media queries in een professionele CSS-pijplijn in, en wat zijn hun voor- en nadelen?
Afdrukstijlen blijven essentieel voor documentatierijke producten, facturen en juridische artefacten. Een professionele pijplijn omvat een minimale @media print Sectie die niet-essentieel chroom verwijdert, een leesbare maatstaf instelt en ervoor zorgt dat kleurgebruik leesbaar is op grijstintenapparaten. Voordelen zijn onder andere een verbeterde archiefkwaliteit en gebruikersvertrouwen; nadelen zijn extra onderhoud en de noodzaak om content te controleren die normaal gesproken interactief is. Houd afdrukregels tokengestuurd, vermijd absolute positionering behalve voor kop- en voetteksten, en test veelgebruikte browsers en PDF-generators om paginaafwijkingen te voorkomen.
Antwoord met voorbeelden
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) Welke strategie levert een voorspelbaar overlaysysteem op, en hoe moet u een z-index schaal?
Een voorspelbaar overlaysysteem behandelt gelaagdheid als een gedocumenteerd contract in plaats van ad-hoc getallen. Definieer een kleine, benoemde schaal (bijvoorbeeld basis, verhoogd, overlay, modaal, toast) en wijs componenten toe aan lagen via variabelen of utility-klassen. Houd elke overlay alleen binnen zijn eigen stapelcontext wanneer isolatie vereist is, en vermijd incidentele contexten. transform or filter Tenzij opzettelijk. Het belangrijkste voordeel is dat ingenieurs zonder trial-and-error over conflicten kunnen redeneren; het nadeel is een bescheiden taxonomie vooraf. Combineer de schaal met ontwerptokens en lint voor waarden die buiten het bereik vallen om drift te voorkomen.
Overlay-schaal (vergelijkingstabel)
| rij | Doel | Typisch z-index |
Notes |
|---|---|---|---|
| Base | Regelmatige inhoud | 0 | Vermijd het creëren van nieuwe contexten |
| Verheven | Plakkerige headers, lades | 10-100 | Blijf consistent binnen de shell |
| Bedekking | Achtergronden, oefenwedstrijden | 900 | Klikschild op volledige pagina |
| Modaal | Dialogen, pickers | 1000 | Functie fixed; val focus |
| Toast | Meldingen | 1100 | Niet-blokkerend; verwijdering op tijd |
Antwoord met voorbeelden
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) Hoe moeten native form controls op verantwoorde wijze worden vormgegeven, en wat zijn de voor- en nadelen van gangbare technieken?
Verantwoorde formulierstijlen respecteren de semantiek en verbeteren tegelijkertijd de mogelijkheden. Begin met het behouden van het gedrag van het toetsenbord en de schermlezer en breid deze vervolgens uit met verbeteringen in lagen: gebruik accent-color voor controleerbare invoer om aan te sluiten bij het merk zonder de controles te vervangen; toepassen appearance spaarzaam om inconsistente gebruikersinterfaces te normaliseren; en uploadcontroles te targeten via ::file-selector-buttonHet voordeel is toegankelijke, consistente controles met minimale JavaScript; nadelen zijn onder andere browseronafhankelijke nuances en de verleiding om besturingselementen volledig te vervangen. Documenteer focusstatussen, foutstatussen en uitgeschakelde statussen als onderdeel van de component-API om ad-hoc overschrijvingen te voorkomen.
Antwoord met voorbeelden
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) Welke strategieën bestaan er voor kritische CSS en codesplitsing, en wat zijn de voor- en nadelen?
Kritische CSS verbetert Largest Contentful Paint door regels die nodig zijn voor content boven de vouw in te voegen, terwijl de rest wordt uitgesteld. Codesplitsing verdeelt de stylesheet per route, feature of component. Een gemeten aanpak combineert een kleine kritieke slice met gelaagde externe bundels voor onderhoudbaarheid. De voordelen zijn een snellere waargenomen belasting en kleinere initiële payloads; nadelen zijn onder andere de bouwcomplexiteit en het risico op duplicatie indien niet gededupliceerd tijdens compile-time. Geef de voorkeur aan deterministische gelaagdheid ( @layer ) en naamgevingsconventies om overschrijvingen stabiel te houden in verschillende delen.
Laadstrategieën (vergelijkingstabel)
| Strategie | Voordelen: | Nadelen | Typisch gebruik |
|---|---|---|---|
Inline kritisch <style> |
Snellere LCP; geen verzoek | Moeilijker te onderhouden | Boven-de-vouw shell |
| Asynchrone externe CSS | Cachebaar; modulair | Risico op flitsen van onopgemaakte inhoud | App-routes |
| Media-split bundels | Voorwaardelijke belasting | Complexiteit; testoverhead | Afdrukken, hoge dpi, donkere modus |
Antwoord met voorbeelden
<link rel="preload" href="/nl/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/nl/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) Wat zijn moderne CSS-kleuropties ( color-mix, relatieve kleurensyntaxis, perceptuele ruimtes) en wanneer moeten ze worden gebruikt?
Moderne CSS ondersteunt het samenstellen van kleuren tijdens runtime met color-mix() en het aanpassen van componenten via relatieve kleurensyntaxis, waardoor dynamische thema's mogelijk zijn zonder precompilatie. Perceptuele kleurruimten zoals OKLCH of Lab bieden uniformere helderheids- en chroma-aanpassingen dan sRGB, waardoor hellingen en statussen (hover, uitgeschakeld) consistenter zijn. Het belangrijkste voordeel is voorspelbaar contrast en tintverschuivingen tussen thema's; nadelen zijn onder andere gedeeltelijke ondersteuning in oudere engines en de noodzaak om merkconformiteit te verifiëren. Gebruik runtime-mixing voor hover- of nadrukstatussen en sla canonieke tokens waar mogelijk op in een perceptuele ruimte, en gebruik indien nodig sRGB.
Antwoord met voorbeelden
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) Welke technieken creëren veerkrachtige, responsieve typografie en verticaal ritme?
Veerkrachtige typografie combineert leesbare regellengte, schaalbare lettergroottes en consistente regelafstand. Begin met een basislettergrootte die rekening houdt met de voorkeuren van de gebruiker en gebruik vervolgens clamp() om vloeiende stappen te definiëren die begrensd zijn door zintuiglijke grenzen. Stel een verticaal ritme vast met lh of een vaste wortellijnhoogte, en beperk alinea's tot ch-gebaseerde maatregelen. text-wrap: balance kan de koppen verbeteren door de pauzes gelijkmatiger te verdelen, terwijl hyphens: auto en taalmetadata verminderen rafelranden. De voordelen zijn leesbaarheid en toegankelijkheid in alle viewports; nadelen zijn onder meer de noodzaak om ligaturen te testen en het gedrag in balans te brengen met merklettertypen.
Antwoord met voorbeelden
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) Hoe werken scroll snapping en scroll padding/marges samen om de navigatie te verbeteren?
Scroll snapping creëert deterministische rustposities voor carrousels en sectie-indelingen, terwijl scroll-padding maximaliseren en scroll-margin Zorg ervoor dat de doelen correct worden uitgelijnd onder de sticky headers. Gebruik scroll-snap-type op de container en scroll-snap-align op items om gedrag te sturen. De voordelen zijn onder meer een consistent gevoel en verbeterde toetsenbordnavigatie met tabindex en ankers; nadelen zijn mogelijke frustratie als snap points te agressief zijn of niet zijn afgestemd op momentum op touchscreen-apparaten. Zorg voor logische opvulling bovenin de viewport om te voorkomen dat content verborgen raakt onder een sticky UI, en valideer met toetsenbord- en aanwijzerinteracties.
Antwoord met voorbeelden
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) Welke CSS-patronen maken tooltips en popovers veerkrachtig, en wanneer is JavaIs het script nog steeds nodig?
CSS kan eenvoudige, richtinggevende tooltips verwerken met behulp van position, logische offsets, en ::after pijlen, geactiveerd door :hover maximaliseren en :focus-visible. Gebruiken inset en transformeert voor nauwkeurige plaatsing en @layer Hulpprogramma's voor z-ordening. Voor complexe popovers – botsingsdetectie, pijlherpositionering of focustrapping –JavaScript blijft noodzakelijk, maar CSS definieert nog steeds de presentatietokens. Het voordeel van CSS-first patronen is de lage overhead en een soepele degradatie; het nadeel is de beperkte aanpasbaarheid aan viewportranden zonder logica. Zorg er altijd voor dat tooltips bereikbaar zijn via het toetsenbord en dat ze geen essentiële bedieningselementen blokkeren.
Antwoord met voorbeelden
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) Hoe ontwerpt u responsieve, leesbare datatabellen zonder dat u complexe herschrijfbewerkingen hoeft uit te voeren?
Responsieve tabellen behouden de semantiek en bieden tegelijkertijd bruikbare weergaven op smalle schermen. Begin met horizontaal scrollen binnen een beperkte wrapper om te voorkomen dat headers en relaties opnieuw worden geplaatst. Schakel voor sleutel-waardegegevens over naar een gestapelde lay-out met display: grid met benoemde gebieden, of voeg kolomzichtbaarheidsopties toe voor progressieve openbaarmaking. De voordelen zijn onder andere behoud van toegankelijkheid en eenvoudig onderhoud; nadelen zijn beperkte schermruimte en de noodzaak van zorgvuldige overloopstyling. Documenteer welke kolommen essentieel zijn bij elk breekpunt en geef de voorkeur aan text-overflow met tooltips voor lange waarden.
Benaderingen (vergelijkingstabel)
| Techniek | Voordelen: | Nadelen | beste voor |
|---|---|---|---|
| Horizontale scroll wrapper | Behoudt semantiek | Vereist overloopstyling | Brede, dichte tafels |
| Gestapelde sleutel-waarde-indeling | Zeer leesbaar | Verliest native tabelfuncties | Mobiele specificaties, facturen |
| Kolom wisselt | Op maat gemaakte dichtheid | Vereist JS-bedrading | Beheerdersdashboards |
Antwoord met voorbeelden
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) Wanneer bieden overvloeimodi, filters en maskers praktische waarde, en wat zijn de voor- en nadelen?
Overvloeimodi ( mix-blend-mode, background-blend-mode ), filteren ( blur, grayscale, drop-shadow ), en maskers ( mask-image, mask-composite ) maken effecten zoals glasmorfisme, duotonen en niet-rechthoekige onthullingen mogelijk zonder rasterbewerking. Ze schitteren in marketingoppervlakken en data-visualisatie-accenten waar art direction van belang is. De voordelen zijn een verminderde proliferatie van assets en dynamische thema's; nadelen zijn onder andere prestatiekosten op apparaten met een laag energieverbruik en mogelijke toegankelijkheidsproblemen bij verminderd contrast. Reserveer zware effecten voor niet-kritieke oppervlakken, test de impact op de GPU en zorg voor een voorkeursgereduceerde fallback.
Antwoord met voorbeelden
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) Welke rol spelen color-scheme en hoe de thema's van de systeem-UI bijdragen aan een samenhangende stijl in alle browsers?
De color-scheme De eigenschap declareert de beoogde lichte en donkere paletten, zodat user-agentcomponenten (formulierbesturingselementen, schuifbalken in sommige engines) worden weergegeven met bijpassende achtergronden en tekstkleuren. Dit vermindert de behoefte aan aangepaste skins voor besturingselementen en voorkomt storende verschillen wanneer de donkere modus actief is. Het voordeel is coherentie met minimale code; het nadeel is dat de pariteit tussen engines evolueert en aangepaste branding mogelijk nog steeds overrides vereist. Combineren color-scheme met aangepaste eigenschappen voor tokens en sta expliciete overschrijvingen door de gebruiker toe om te voorkomen dat gebruikers vast komen te zitten in een systeemvoorkeur die ze niet hebben gekozen.
Antwoord met voorbeelden
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 Top CSS-interviewvragen met realistische scenario's en strategische antwoorden
1) Wat is het verschil tussen inline, inline-blocken block elementen in CSS?
Verwacht van kandidaat: De interviewer wil testen of u de eigenschappen van elementweergave begrijpt en hoe deze de lay-out en boxmodellen beïnvloeden.
Voorbeeld antwoord:
“In mijn vorige functie had ik vaak te maken met inconsistenties in de lay-out, veroorzaakt door het verkeerd begrijpen van de weergavetypen. block element neemt de volledige beschikbare breedte in beslag en begint op een nieuwe regel. Een inline element neemt alleen zoveel breedte in beslag als de inhoud en begint niet op een nieuwe regel. Een inline-block Met dit element kun je de breedte en hoogte instellen zoals bij een blokelement, maar het loopt in de tekstlijn zoals bij tekst. Door deze verschillen te begrijpen, kon ik responsieve ontwerpen verfijnen en een consistente uitlijning behouden.
2) Hoe pak je het oplossen van CSS-problemen in complexe lay-outs aan?
Verwacht van kandidaat: De interviewer wil weten hoe u systematisch lay-outfouten identificeert en oplost.
Voorbeeld antwoord:
In een vorige functie hanteerde ik een gestructureerde aanpak voor het debuggen van CSS. Ik gebruikte tools voor browserontwikkelaars om berekende stijlen en boxmodellen te inspecteren, conflicterende selectoren te isoleren en regels uit te schakelen. Ik gebruikte ook browserspecifieke prefixen en testte op meerdere apparaten. Dit methodische debugproces verminderde problemen met de front-end lay-out aanzienlijk.
3) Kunt u uitleggen hoe de CSS-cascade en -specificiteit werken?
Verwacht van kandidaat: De interviewer wil graag weten hoeveel kennis u heeft over de manier waarop browsers bepalen welke CSS-regels voorrang hebben.
Voorbeeld antwoord:
De CSS-cascade is het proces dat definieert welke regels van toepassing zijn wanneer meerdere selectors hetzelfde element targeten. Specificiteit bepaalt de prioriteit, waarbij inline-stijlen de hoogste prioriteit hebben, gevolgd door ID's, klassen, pseudo-klassen en tot slot elementen. De bronvolgorde is ook van belang als de specificiteit gelijk is. Door dit te weten, voorkom je dat stijlen onbedoeld worden overschreven en zorg je voor schonere code.
4) Beschrijf hoe u responsief ontwerp aanpakt zonder te veel afhankelijk te zijn van frameworks.
Verwacht van kandidaat: De interviewer wil uw begrip van CSS-flexibiliteit en het gebruik van media query's toetsen.
Voorbeeld antwoord:
“In mijn laatste rol heb ik responsieve lay-outs ontworpen met behulp van vloeiende rasters, relatieve eenheden zoals em maximaliseren en rem, en mediaquery's om lay-outs aan te passen aan verschillende schermbreedtes. Ik heb ook CSS Grid en Flexbox gebruikt voor flexibele lay-outs. Deze aanpak vermeed onnodige afhankelijkheden van frameworks, terwijl het ontwerp schaalbaar en onderhoudbaar bleef.
5) Hoe optimaliseer je CSS voor prestaties en onderhoudbaarheid?
Verwacht van kandidaat: De interviewer wil nagaan in hoeverre u op de hoogte bent van de beste werkwijzen voor schaalbaarheid en prestaties.
Voorbeeld antwoord:
Bij mijn vorige baan optimaliseerde ik CSS door ongebruikte stijlen te verwijderen, bestanden te combineren om het aantal HTTP-verzoeken te verminderen en CSS-variabelen te implementeren voor onderhoudbaarheid. Ik heb ook BEM-naamgevingsconventies overgenomen om de code overzichtelijk en schaalbaar te houden. Daarnaast gebruikte ik moderne tools zoals PostCSS en minificatie om de prestaties te verbeteren.
6) Vertel eens over een keer dat je moest samenwerken met ontwikkelaars of ontwerpers om een stijlconflict op te lossen.
Verwacht van kandidaat: De interviewer wil teamwerk en communicatieve vaardigheden zien in cross-functionele omgevingen.
Voorbeeld antwoord:
In een eerder project ontstond er een conflict tussen de ontwerpverwachtingen en de implementatie van een dynamisch formulier door de ontwikkelaar. Ik plande een snelle synchronisatie met beide partijen, presenteerde het visuele probleem met screenshots en stelde aanpassingen voor aan CSS-variabelen om de consistentie van het ontwerp te behouden. Deze proactieve samenwerking zorgde voor een visueel afgestemd resultaat zonder de prestaties te beïnvloeden.
7) Welke uitdagingen kwam je tegen bij het implementeren van CSS-animaties of -overgangen en hoe heb je deze overwonnen?
Verwacht van kandidaat: De interviewer wil graag uw kennis van prestatie-optimalisatie en browserrendering beoordelen.
Voorbeeld antwoord:
"In één project veroorzaakten animaties haperingen door problemen met de reflow. Ik ontdekte dat bepaalde CSS-eigenschappen, zoals top maximaliseren en left veroorzaakten herberekeningen van de lay-out. Ik ben overgestapt op het gebruik van transform maximaliseren en opacity, die GPU-versneld zijn, wat zorgt voor vloeiendere overgangen. Ik heb ook de animatieduur geoptimaliseerd voor een natuurlijk gevoel.”
8) Hoe zou je CSS structureren voor een grootschalige applicatie?
Verwacht van kandidaat: De interviewer wil graag inzicht krijgen in uw aanpak van organisatie, schaalbaarheid en onderhoudbaarheid.
Voorbeeld antwoord:
Ik zou een modulaire architectuur gebruiken zoals BEM, SMACSS of CSS-modules om stijlen logisch te structureren. Elk onderdeel zou zijn eigen scoped styles hebben om conflicten te voorkomen. Ik zou ook een stijlgids en naamgevingsconventies hanteren om consistentie tussen teams te behouden en CSS-opzwelling te voorkomen naarmate het project groeit.
9) Stel dat een klant klaagt dat de pagina-indeling in Internet Explorer 11 niet werkt. Welke stappen zou u ondernemen om dit op te lossen?
Verwacht van kandidaat: De interviewer wil testen in hoeverre u zich kunt aanpassen aan de problemen van oudere browsers.
Voorbeeld antwoord:
Ik zou het probleem eerst reproduceren met dezelfde browserversie. Vervolgens zou ik niet-ondersteunde CSS-functies identificeren met behulp van browser-ontwikkeltools en de compatibiliteit controleren met behulp van hulpmiddelen zoals MDN of Can I Use. Daarna zou ik indien nodig fallbacks of polyfills implementeren. Ik zou de oplossing ook documenteren voor toekomstig onderhoud.
10) Hoe zorgt u ervoor dat uw CSS-projecten compatibel zijn met meerdere browsers?
Verwacht van kandidaat: De interviewer wil graag weten of u op de hoogte bent van de test- en compatibiliteitsnormen.
Voorbeeld antwoord:
Ik zorg voor compatibiliteit met meerdere browsers door vroegtijdig en regelmatig te testen op belangrijke browsers met tools zoals BrowserStack. Ik volg CSS-standaarden en vermijd niet-standaard eigenschappen. Ik gebruik ook PostCSS met Autoprefixer om leveranciersprefixes automatisch te verwerken. Consistente validatie en tests tijdens de ontwikkeling voorkomen grote problemen na de lancering.
