CSS
Talen & Formaten
Cascading Style Sheets
CSS is de stylesheet-taal voor de visuele vormgeving en layout van HTML-elementen. Je definieert kleuren, lettertypen, spacing, positionering en animaties. CSS3-modules brachten flexbox, grid, transforms, transitions en animations. De cascade bepaalt welke styles gelden bij conflicten.
Andere termen met deze tag:
Critical CSS
AA
Performance
Critical CSS
Critical CSS plaatst essentiële stijlen voor above-the-fold content inline in de <head>. De rest laad je asynchroon. Zo verminder je render-blocking CSS en versnel je de eerste weergave. Let op de balans: te veel inline CSS vergroot de HTML, te weinig veroorzaakt FOUC.
AA
Performance
Render-blocking
AA
Performance
Render-blocking resources
Render-blocking resources zijn CSS- en JavaScript-bestanden die de browser dwingen het renderen van de pagina te pauzeren totdat ze geladen en verwerkt zijn. CSS in de <head> blokkeert altijd — scripts zonder async of defer ook. Dit vertraagt de First Contentful Paint. Oplossingen: inline critical CSS, defer/async voor scripts en preload voor kritieke resources.
AA
Performance
Tailwind CSS
AA
Frontend
Tailwind Cascading Style Sheets
Tailwind is een utility-first CSS-framework waarbij je classes zoals 'flex', 'pt-4' en 'text-center' direct in HTML gebruikt. Het is eenvoudig aan te passen via een configbestand en verwijdert ongebruikte CSS met tree-shaking. Het levert snelle ontwikkeling op, maar maakt de HTML voller.
AA
Frontend
Prettier
AA
Tools
Prettier
Prettier is een codeformatter die een consistente stijl afdwingt zonder eindeloze discussies. Het formatteert automatisch bij opslaan of committen en ondersteunt JS, TS, CSS, HTML, JSON en Markdown. Minimale configuratie is benodigd.
AA
Tools
FOUC
AA
Performance
Flash of Unstyled Content
FOUC is een korte flits waarbij ongestylede HTML zichtbaar is voordat CSS en webfonts zijn toegepast. Oorzaken zijn late CSS-load, async CSS, trage fonts of client-side rendering. Voorkom dit met critical CSS inline in de <head>, preload overige CSS non-blocking, minimaliseer render-blocking resources en gebruik font-display: swap/optional.
AA
Performance
Compression
A
Performance
Compression
Compressie verkleint bestanden voor snellere overdracht tussen server en client. Dit gebeurt server-side voor tekstbestanden zoals HTML, CSS, JS en JSON. De browser decomprimeert automatisch. Veelgebruikte algoritmes zijn Gzip en Brotli.
A
Performance
FCP
AA
Performance
First Contentful Paint
FCP is het moment waarop de eerste tekst of afbeelding in beeld komt. Het laat zien wanneer een gebruiker 'iets' ziet. Verbeter dit met critical CSS, een snelle serverrespons, minder render-blocking JS/CSS en geoptimaliseerde fonts.
AA
Performance
Webpack
AA
Tools
Webpack
Webpack is een krachtige modulebundler die JavaScript, CSS, afbeeldingen en andere assets analyseert, transformeert en bundelt. Het ondersteunt code splitting, tree shaking, loaders en plugins. De configuratie is complex, maar erg flexibel. Vite is een modern en sneller alternatief.
AA
Tools
W3C
A
Concepten
World Wide Web Consortium
Het W3C is een internationale gemeenschap die webstandaarden en protocollen ontwikkelt, zoals HTML, CSS, SVG en richtlijnen voor toegankelijkheid. Omdat de leden het samen eens worden, werken websites goed in verschillende browsers en op verschillende apparaten.
A
Concepten
Shadow DOM
AAA
Concepten
Shadow DOM
Shadow DOM is een browserstandaard voor het afschermen van markup, styles en gedrag binnen een component. Dit voorkomt style-lekkage en naamconflicten en levert voorspelbaar gedrag op. Het wordt gebruikt met web components en biedt shadow roots, slots en scoped CSS.
AAA
Concepten
BEM
AA
Frontend
Block Element Modifier
BEM is een manier om CSS-namen te geven zodat je overzicht houdt en code makkelijk opnieuw kunt gebruiken.: block__element--modifier. Je hoeft minder precies te zijn met CSS en maakt styles voorspelbaar en onderhoudbaar omdat de structuur in de naamgeving verwerkt is. Werkt met vanilla CSS, preprocessors zoals SASS en SCSS en CSS Modules.
AA
Frontend
Minification
A
Performance
Minification
Minificatie verkleint code door whitespace, comments en andere niet-essentiële tekens te verwijderen en soms namen te verkorten. Dit reduceert bestandsgrootte vaak met 30-60% zonder functionaliteit te wijzigen. Tools zijn Terser (JS) en cssnano (CSS).
A
Performance
SCSS
AA
Talen & Formaten
Sassy Cascading Style Sheets
SCSS is een CSS-preprocessor-syntax die programmeerfeatures toevoegt: variabelen (bijv. $primary-color), nesting, mixins, functies en imports. De syntax is een superset van CSS, dus alle CSS is geldige SCSS. Je compileert naar standaard CSS - handig voor grote stylesheets.
AA
Talen & Formaten
Bootstrap
A
Frontend
Bootstrap CSS Framework
Bootstrap is een populair CSS-framework met een responsive grid, kant-en-klare componenten (buttons, cards, modals, navbars) en JavaScript-plugins. Het is mobile-first en aanpasbaar via Sass-variabelen. Ideaal voor snelle prototypes en consistente designs zonder diepe CSS-kennis.
A
Frontend
SVG
AA
Talen & Formaten
Scalable Vector Graphics
SVG is een XML-gebaseerd vectorformaat dat oneindig schaalt zonder kwaliteitsverlies. Het is perfect voor logo's, iconen, illustraties en grafieken. Het is tekstgebaseerd (te bewerken als code), te animeren met CSS/JS en klein voor simpele graphics. Niet geschikt voor foto's.
AA
Talen & Formaten
CDN
A
Netwerk
Content Delivery Network
Een CDN is een wereldwijd netwerk van servers dat content vanaf de dichtstbijzijnde locatie levert. Voordelen zijn: snellere laadtijden, minder origin-load, DDoS-mitigatie en wereldwijde dekking. Het cachet vooral statische assets zoals afbeeldingen, CSS, JS en video's.
A
Netwerk
Preprocessor
AA
Frontend
CSS-preprocessor / code-preprocessor
Een preprocessor is een tool die een uitgebreide syntax omzet naar standaard CSS of JavaScript. CSS-preprocessors zoals SASS en SCSS voegen variabelen, nesting, mixins, functies en imports toe aan CSS. JavaScript-preprocessors zoals TypeScript en Babel voegen typing of moderne syntaxis toe die worden gecompileerd naar browser-compatibele code.
AA
Frontend
Grid
A
Frontend
CSS Grid Layout
CSS Grid is een tweedimensionaal layoutsysteem voor complexe ontwerpen met rijen en kolommen. Je definieert grids met grid-template-columns/rows en plaatst items met grid-area. Grid is geschikt voor paginalayouts en wordt vaak gecombineerd met Flexbox.
A
Frontend
Progressive Enhancement
AAA
Frontend
Progressive Enhancement
Progressive enhancement begint met een solide basis die overal werkt. Eerst lever je content met HTML, daarna presentatie met CSS en vervolgens interactie met JavaScript. Zo krijgt iedereen toegang, met extra's voor moderne browsers.
AAA
Frontend
Svelte
AAA
Frontend
Svelte JavaScript Framework
Svelte is een innovatief framework dat op compile-time werkt. Er is geen virtual DOM: frameworkcode verdwijnt in de build-stap. Dit levert kleine bundles en een snelle runtime op. Componenten combineren HTML, CSS en JS in .svelte-bestanden. SvelteKit lijkt qua rol op Next.js.
AAA
Frontend
LESS
AA
Talen & Formaten
LESS
LESS is een CSS-preprocessor vergelijkbaar met Sass. Het biedt variabelen (@), nesting, mixins en functies. Minder populair dan Sass. De compiler is JavaScript-gebaseerd en compileert naar .css.
AA
Talen & Formaten
SASS
AA
Talen & Formaten
Syntactically Awesome Style Sheets
Sass is een CSS-preprocessor met twee syntaxes: de ingesprongen SASS-syntax (zonder brackets en semicolons) en de CSS-achtige SCSS-syntax. Beide bieden variabelen, nesting, mixins en overerving. SCSS is het populairst en compileert naar gewone CSS.
AA
Talen & Formaten
Viewport
A
Frontend
Viewport
De viewport is het zichtbare gebied van de browser-pagina. De viewport-metatag vertelt de browser hoe de pagina geschaald wordt op mobiele apparaten, met als standaardwaarden width=device-width en initial-scale=1. Zonder deze tag zoomt een mobiele browser uit op de desktopbreedte. De CSS-viewport-units vw, vh, vmin en vmax zijn gebaseerd op de viewport-afmetingen.
A
Frontend
400 kaartjes
Een uitgebreide collectie begrippen voor elk niveau
12 categorieen
Van HTML & CSS tot databases en security
3 niveaus
Geschikt voor beginners en gevorderden
Voor teams & klassen
Ideaal als lesmateriaal of teambuilding tool
Offline oefenen
Fysiek aan de slag, zonder scherm