CSS-tips die nog steeds handig zijn

Door de jaren heen heb ik op deze site heel wat losse CSS-tips gezet. Een deel is achterhaald, maar veel is nog steeds bruikbaar. Hier de beste, opgefrist voor nu.

1. De font-shorthand

In plaats van alle font-eigenschappen apart te schrijven:

font-weight: bold;
font-style: italic;
font-size: 1rem;
line-height: 1.5;
font-family: Verdana, sans-serif;

kun je ze combineren in één regel:

font: italic bold 1rem/1.5 Verdana, sans-serif;

De volgorde is: stijl, gewicht, grootte/regelhoogte en het lettertype. Grootte en lettertype zijn verplicht. Let op: alles wat je weglaat, wordt teruggezet naar de standaardwaarde, dus ook een eerder ingestelde regelhoogte.

2. Twee classes tegelijk

Een element kan meerdere classes hebben, en je kunt een regel schrijven die alleen geldt als beide aanwezig zijn:

<p class="tekst uitgelicht">...</p>

.tekst.uitgelicht { font-weight: bold; }

3. Border-shorthand zonder kleur

Laat je bij border de kleur weg, dan krijgt de rand automatisch de tekstkleur van het element (currentColor). Handig voor knoppen die van kleur wisselen.

border: 2px solid;

4. Transparant en doorschijnend

Met background: transparent haal je een eerder ingestelde achtergrondkleur weg, bijvoorbeeld voor een variant van een onderdeel. Wil je een kleur half doorzichtig maken, gebruik dan de moderne kleurnotatie:

.artikel { background: rgb(255 220 0); }
.artikel.leeg { background: transparent; }
.overlay { background: rgb(0 0 0 / 50%); }

5. text-shadow

Met text-shadow geef je tekst een schaduw. Je geeft de horizontale en verticale verschuiving op, de vervaging en de kleur. Meerdere schaduwen scheid je met een komma.

text-shadow: 0 3px 5px rgb(20 20 20 / 50%);

/* ingeperst effect (deboss) */
.deboss {
  color: #cfd3d5;
  text-shadow: 0 -1px 1px rgb(0 0 0 / 40%), 0 1px 1px #fff;
}

Gebruik het met mate: te veel schaduw maakt tekst juist minder leesbaar, en let altijd op voldoende contrast.

6. border-image

Met border-image gebruik je een afbeelding of een kleurverloop als rand. Het overschrijft de gewone border-style, maar je moet wel een randbreedte opgeven. Vooral met een kleurverloop is het makkelijk:

.kader {
  border: 6px solid;
  border-image: linear-gradient(45deg, #3b53ef, #f39) 1;
}

7. Opmaak voor printen

Met @media print geef je een pagina een eigen opmaak als iemand hem afdrukt: menu en reclame weg, zwarte tekst op wit.

@media print {
  nav, .reclame { display: none; }
  body { color: #000; background: #fff; }
}

Een klassiek probleem: je logo is gemaakt voor het scherm en ziet er geprint wazig uit. Je kunt bij het printen een scherpere versie tonen:

.logo-print { display: none; }
@media print {
  .logo-scherm { display: none; }
  .logo-print { display: block; }
}

Nog beter: gebruik voor je logo een SVG. Die is op elk scherm en op papier haarscherp.

8. Tekst in plaats van afbeeldingen

Vroeger werd tekst in koppen vaak vervangen door een afbeelding met een mooi lettertype, met allerlei trucs om de tekst te verbergen. Dat is niet meer nodig: met webfonts kun je elk lettertype gewoon als tekst gebruiken. Dat is beter voor zoekmachines en voor schermlezers. Gebruik je toch een afbeelding, geef die dan een goede alt-tekst.

9. box-sizing: border-box

De oude truc om het afwijkende boxmodel van Internet Explorer te omzeilen, is vervangen door één regel. Met border-box tellen padding en rand mee in de breedte die je opgeeft, wat rekenen veel makkelijker maakt:

*, *::before, *::after {
  box-sizing: border-box;
}