Expert talks | Defensive CSS: beter voorkomen dan genezen

Elke developer die ooit al CSS geschreven heeft, zal de volgende situatie wel herkennen: je creëert een layout of component die er op het eerste zicht goed uitziet, maar zodra je die gebruikt met verschillende teksten, afbeeldingen of schermbreedtes begint er plots vanalles mis te lopen. De afbeelding ziet er ineens uitgerokken uit, een stuk tekst blijkt veel meer plaats in te nemen dan je voorzien had, er verschijnt een ongewenste horizontale scrollbar op kleinere schermen, etc.

Als je deze situatie maar al te goed herkent, dan is dit een artikel voor jou!

Wat is defensive CSS?

“Defensive CSS” is een strategie om future-proof componenten en layouts te bouwen in CSS, waarmee je problemen reeds oplost voordat ze zich voordoen. De meeste problemen die je hiermee anticipeert, hebben te maken met dynamische content en responsiveness.

Enkele tips

1 — Hou rekening met dynamische content

Wanneer je een design nabouwt in CSS, zal je vaak de teksten overnemen die de designer initieel heeft gecreëerd. Dit is handig in het begin om een accurate kopie van een ontwerp te maken, maar vergeet zeker niet om ook andere teksten uit te proberen die een stuk langer of korter zijn dan wat er in het design staat.

Hetzelfde geldt voor afbeeldingen. Gebruik niet telkens dezelfde placeholder-afbeeldingen of exact dezelfde afbeeldingen als in het design. De layout die je bouwt, moet voorbereid zijn op afbeeldingen van eender welke grootte.

Kortom: maak vooral niet te veel assumpties over welke vorm de content kan aannemen.

2 — Vermijd vaste waarden

Stel: je maakt een bannercomponent met een kort stukje tekst en geeft deze een vaste hoogte. De klant vraagt om een andere tekst te gebruiken, maar de nieuwe tekst is een stuk langer dan de vorige waardoor het buiten de grenzen van de banner valt.

Hoe verleidelijk het ook is, het is zelden een goed idee om vaste waarden te gebruiken voor elementen die dynamische content bevatten. Een component zou rekening moeten houden met de grootte van zijn content, niet omgekeerd.

3 — Voorzie steeds een plan B

Wanneer een component of layout een afbeelding bevat, is het niet altijd gegarandeerd dat die afbeelding steeds beschikbaar zal zijn. Dit is bijvoorbeeld al het geval wanneer het simpelweg niet is gelukt om de afbeelding in te laden. De voorziene ruimte die normaal wordt ingevuld door de afbeelding, komt weg te vallen waardoor de layout niet langer lijkt te kloppen.

Dit kan je vermijden door het element van je afbeelding een minimale hoogte te geven. Geef je het element bovendien een achtergrondkleur, dan is er amper nog een verschil waar te nemen met een component waarvan de afbeelding wel is ingeladen. Die achtergrondkleur is trouwens ook nuttig voor afbeeldingen die wel beschikbaar zijn, maar even de tijd nodig hebben om in te laden. Zo geef je de gebruiker alvast een visuele indicatie van waar er nog een afbeelding tevoorschijn zal komen.

4 — Leer van je fouten

Dit spreekt voor zich, maar probeer de oplossingen die je voor bepaalde problemen vond ook consequent en preventief toe te passen in nieuwe projecten. Als je merkt dat je bepaalde fouten telkens opnieuw blijft maken, geef er dan wat extra aandacht aan bij je volgende projecten of documenteer ze voor jezelf én voor je team. Prevention is the best cure!

Conclusie

Als je één ding onthoudt van deze post, laat het dan dit zijn: hou rekening met alle “wat als” situaties. Wat als die tekst langer of korter blijkt dan wat er in het design stond? Wat als ik dit component bekijk op een smartphone scherm? Wat als deze afbeelding niet inlaadt?

Sommige situaties lijken misschien onwaarschijnlijk, maar dat maakt het extra pijnlijk wanneer het toch zou gebeuren.

Het concept van “defensive CSS” werd geïntroduceerd door UX-designer en front-end developer Ahmad Shadeed. Meer informatie, tips en voorbeelden kan je op de bijhorende website vinden: www.defensivecss.dev.