MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

In het laatste artikel van deze module, kijken we naar de basis van hoe je CSS kan debuggen, zoals kijken welke CSS er wordt toegepast op een pagina en andere tools die je fouten in je CSS code helpen vinden.

Vereisten: Algemene computervaardigheden, de basissoftware geïnstalleerd hebben, algemene kennis van hoe met files werken, en een basiskennis van HTML (bekijk Introductie tot HTML), en een idee hebben van hoe CSS werkt (bekijk de vorige artikelen in deze module.)
Doelstelling: De basis leren van hoe je CSS kan debuggen.

Net zoals HTML debuggen goed meevalt, is CSS debuggen niet zo moeilijk wanneer je het vergelijkt met het debuggen van veel andere soorten code.  We raden aan dat je debuggen is niet eng (her)leest voor je verder gaat.

CSS en debuggen

Net zoals HTML is CSS zeer toegeeflijk (lees toegeeflijke code  voor je verder gaat).  In het geval van CSS, zal de browser een ongeldige declaratie (als er een syntaxfout in zit, of als de browser een eigenschap niet ondersteunt) volledig negeren en gewoon de volgende declaratie nemen die het kan vinden.

Als een selector ongeldig is, dan wordt er niets geselecteerd en wordt de regel niet toegepast.  De browser zal gewoon verder doen met de volgende regel.

In veel gevallen is dit gedrag fantastisch.  Je inhoud zal nog steeds getoond worden aan je gebruikers, zelfs al is die niet goed gestijld.  Maar het is niet echt behulpzaam wanneer je een probleem probeert op te lossen en je zelfs geen foutboodschap krijgt die je kan helpen om de fout te vinden.  Het wordt pas echt een probleem als je inhoud niet zichtbaar is.  Soms wordt een kritieke stijlregel niet toegepast en gaat de layout daarom helemaal fout.

Gelukkig zijn er enkele tools die je kunnen helpen.  Laten we die nu verkennen.

De Dom en de CSS Inspecteren

Tegenwoordig bevatten alle browsers developpertools die gemaakt zijn om je te helpen webpagina's te inspecteren en begrijpen.  Er zijn twee tools die beschikbaar zijn in alle browsers: de DOM-inspecteur en de CSS editor.  In Firefox vind je die in de pagina-inspecteurtool.   We keken al naar de DOM-inspecteur in HTML Debuggen en hoe die kan gebruikt worden om HTML te inspecteren.  Hier zullen we zowel de DOM-inspecteur als de CSS Editor verkennen en zien hoe we die samen kunnen gebruiken om CSS problemen te debuggen.

Opmerking: In het volgende voorbeeld gebruiken we Firefox, maar alle browsers hebben soortgelijke tools, zij het misschien op een andere plaats. Lees ontdek browser developper tools om meer te leren over waar je die kan vinden in de verschillende browsers.

Voor je aan dit voorbeeld begint, zouden we graag hebben dat je ons CSS debugging-voorbeeld open doet in een nieuwe tab. Als je zelf alle fouten wil oplossen in de code, dan raden we je aan om een kopie te maken van de HTML en CSS files, en de oplossingen in die kopie aan te brengen.

De bedoeling is dat het een envoudige webpagina is die een eenvoudig artikel bevat in een éénkolom layout:

our example webpage with the problems fixed. The Firefox logo has been floated to the right, and the main heading and body text are now visible and well placed.

Momenteel is het echter nog een rommeltje:

Our example webpage in a broken state. There is a heading of My article in the middle and a Firefox logo, but everything else is small and not easily visible.

We beginnen de pagina te verkennen met de pagina-inspector. In Firefox kan je die openen met het commando Cmd/Ctrl + I (of via Tools > Web Developer > Inspector in het menu).  Dit opent een nieuw scherm onderaan je browser met een aantal tools:

The Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Als je op een element klikt in de DOM-inspecteur links, zal de CSS editor aan de rechterkant alle CSS regels tonen die van toepassing zijn op dat element.  Dit is zeer handig, zeker aangezien alle ongeldige eigenschappen doorstreept weergegeven worden met een klein waarschuwingssymbool ernaast.

A close up of the Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Opmerking: Elke eigenschap heeft een keuzevakje ernaast, dat je toelaat om die CSS eigenschap aan- of uit te zetten.  Dit is zeer handig om te experimenteren welke eigenschap een fout veroorzaakt.

Actief leren: zoek de fouten!

Nu we de basis van de tools kennen, kunnen we op zoek gaan naar de fouten.  Je moet telkens clicken op het element waar de fout is, om te zien welke CSS er toegepast wordt op dat element.

  1. Het <header> en <footer> element worden geacht om een achtergrondkleur te hebben, maar die verschijnt niet.
  2. De <h1> en de <p> in de footer zijn te hoog op de pagina.  Dit is overduidelijk voor de <h1> die bijna van het scherm is! Probeer te clicken op de <h1> en vink een aantal van de declaraties uit om te vinden welke declaratie de fout veroorzaakt.
  3. De <img> wordt geacht om rechts beneden te drijven zodat het rechts van wat tekst staat.  Maar nu staat de tekst er onder.
  4. De tekst in de <main> is veel te klein: de paragrafen en het lijstitem moeten een grotere tekstgrootte hebben.  Hint: deze is wat moeilijker, aangezien het probleem bij de selector ligt en niet bij de eigenschap.  Het kan zijn dat je de broncode moet bestuderen om dit te weten te komen.  Je kan die vinden in de Stijleditor in de Firefox developper tools.

Als je de fouten niet vindt, kan je kijken naar de oplossing op Github.

CSS validatie

We keken al eerder naar de W3C HTML Validator, maar ze hebben ook een CSS Validator. Die werkt op dezelfde manier: hij laat je toe om CSS te valideren via een URL, door een bestand op te laden of door CSS in te voeren.

a visual of the CSS Validation Service mentioned and linked to nearby

Actief leren: Valideer onze CSS

Probeer de CSS in de validator te plakken om te zien welke feedback je krijgt.

  1. Ga naar de CSS Validator en kies via directe invoer.
  2. Kopieer ons met fouten bezaaide CSS bestand in het tekstveld van de validator.
  3. Klik op de Controleer knop.

Je zal nu een overzicht krijgen van alle fouten.  Er worden er slechts twee gevonden:

The validator results as they appear on the CSS validation service.

Dit zijn zeer bruikbare foutmeldingen, zeker aangezien ze de regelnummers bevatten samen met de selector(en) voor die fout.  Laten we eens kijken hoe we die foutmeldingen moeten lezen:

  • Property background-colour doesn't exist : teal — dit vertelt ons dat de eigenschap niet bestaat, waardoor we ook weten hoe we dit moeten oplossen.
  • Value Error : float attempt to find a semi-colon before the property name. add it — dit zegt ons dat de puntkomma ontbreekt.  Door het regelnummer is het gemakkelijk te vinden waar dit gebeurt, zodat we het kunnen corrigeren.

Je zou kunnen stellen dat dit minder handig is dan de andere browser developper tools.  Het staat je niet toe naar de gerenderde code te kijken en tegelijk een referentie te leggen naar wat er fout is.  Het laat je ook niet toe om gevallen te vinden van foutieve selectoren, of gevallen waar de syntax juist is maar je een foutieve waarde koos voor je design.  Maar onze mening is dat het zeker voor grote stylesheets de moeite waard is om deze dienst eerst te gebruiken om simpele syntaxfouten op te lossen.  Daarna kan je vertrouwen op de browser developper tools om andere problemen op te lossen.

Opmerking: CSS Lint is een gelijkaardig hulpmiddel om CSS te valideren en fouten te vinden.  Ook hiermee kan je enkele nuttige hints en interessante waarschuwingen krijgen.

Samenvatting

Proficat met het succesvol beëindigen van de eerste CSS module!  Nu je hier gekomen bent, kan je proberen om onze CSS toets af te leggen, om erna de andere CSS en HTML modules te verkennen.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,