Categoriearchief: CSS

Het boxmodel van CSS

Alles wat je op een webpagina ziet is een box. Het boxmodel van CSS regelt de opbouw van boxen en de interactie tussen boxen. Weten hoe het boxmodel werk is onmisbare CSS-basiskennis.

Lees verder Het boxmodel van CSS

Maak een schakelaar met CSS en HTML

Maak een schakelaar met CSS en HTML die er niet alleen als een schakelaar uitzien, maar die ook daadwerkelijk iets doet. Zo’n aan-uitschakelaar (toggle of switch) gebruik je bijvoorbeeld om je webformulier op te fruiten. Of je laat bezoekers van de website kiezen tussen een licht en een donker thema. Met een klein beetje JavaScript maak je een werkende themawisselaar van je schakelaar.

Het mooie is dat de basis van de schakelaar gewoon in je HTML-gereedschapskist zit: het element <input type="checkbox">. Het principe is dat je de in- en uitgeschakelde toestand van dit selectievakje gebruikt om de opmaak van de zelfgebouwde schakelaar te veranderen en om JavaScript-code te activeren. Het selectievakje zelf maak je onzichtbaar.

Het is een eenvoudig project en toch maak je kennis met een berg CSS-mogelijkheden. Op CodePen staat het resultaat en daarmee kun je vrijuit experimenteren.

See the Pen schakelaar by Peter Doolaard (@dool) on CodePen.dark

Lees verder Maak een schakelaar met CSS en HTML

Specificiteit in CSS, zo werkt het

Specificiteit in CSS is een belangrijke oorzaak van selectors die niet doen wat jij wilt. Specificiteit gaat over hoe zwaar een selector telt en of een concurrerende selector sterk genoeg is om hem te overschrijven. De oplossing begint met begrijpen hoe specificiteit werkt. Een goede tweede is: houd de specificiteit van je selectors zo laag als kan en zo hoog als nodig is.

Lees verder Specificiteit in CSS, zo werkt het

Leer werken met nieuwe pseudoklassen van CSS

Het assortiment selectors van CSS is uitgebreid. Leer werken met de nieuwe pseudoklassen :is(), :where() en :not(), maak kennis met :has() en controleer je focus met :focus-within en :focus-visible.

Voor een goed begrip van dit artikel is het handig als je weet wat specificiteit is. Kan je kennis een opfrisser gebruiken, lees dan ook het artikel Specificiteit in CSS, zo werkt het.

De pseudoklassen in het kort

Behalve :has() worden alle nieuwe pseudoklassen ondersteund door de belangrijke browser.

Tussen de haakjes van :is() en :where() zet je een lijst van selectors. Elke selector die overeenkomt met een element wordt opgemaakt. Alle soorten selectors en combinators zijn toegestaan. Foute selectors worden genegeerd, maar maken niet de complete selector ongeldig. Bij :is() is de specificiteit gelijk aan de selector met de hoogste specificiteit. Bij :where() is de specificiteit altijd 0.

Ook :not() krijgt een selectorlijst. Elementen die overeenkomen met een selector in de lijst worden juist niet opgemaakt. De specificiteit is gelijk aan de selector met de hoogste specificiteit.

:has() werkt als een ‘parent selector’. De selectorlijst is een voorwaarde, geen opmaakdoel. Het is erg onzeker of :has() daadwerkelijk wordt toegevoegd aan de specificatie.

:focus-within maakt het mogelijk om een voorouder op te maken van een element dat de focus kan krijgen.

:focus-visible laat de browser bepalen of het nodig is om de focusopmaak te tonen. Wel bij toetsenbordnavigatie, niet bij muisgebruik.

Lees verder Leer werken met nieuwe pseudoklassen van CSS

Toveren met CSS Grid Layout

CSS is de opmaaktaal voor websites en -apps. Met de bundel van drie boeken uit de Web Development Library over die onderwerp leer je alle mogelijkheden, waardoor je veel betere websites ontwerpt. In het boek CSS 3 van Doolaard en Kassenaar leer je werken met CSS-selectors, maateenheden, het box-model, kleurmodellen en meer. De vele oefeningen maken het tot een perfect (zelf-)studieboek. Ben je de basis voorbij? In CSS Flexbox & Grid Layout helpt Peter Doolaard je met het maken van lay-outs voor webpagina’s met Flexible Box Layout en CSS Grid Layout. Deze technieken zijn bedoeld om op een intuïtieve manier complete webpagina’s, apps en onderdelen van de gebruikersinterface in te delen. Met het boek Bootstrap 4 van Peter Kassenaar kunnen niet-designers hun websites snel op consistente en eenvoudige manier opmaken, terwijl ‘echte’ designers hun hart kunnen ophalen aan de vele mogelijkheden die het framework biedt om het naar eigen wens in te stellen. Vergroot je CSS-expertise en bestel deze drie boeken samen voor een voordelige prijs. Hieronder vind je een voorbeeld over het werken met CSS: Toveren met CSS Grid layout van de hand van Peter Doolaard.(H.F.)

Toveren met CSS Grid layout

Hoe bouw je met dezelfde HTML-codebasis een website met vier gezichten? Je leest het in dit artikel waarin we de website rollingstone.com namaken. De lay-out van deze website varieert van één tot vier kolommen waarbij de inhoud steeds net even anders wordt gepresenteerd. CSS Grid Layout en de nieuwe optie subgrid zorgen voor de magie.

Lees verder Toveren met CSS Grid Layout