Tijdens het werk zat ik weer eens in een CSS bestand wat wijzigingen aan te brengen. Hier stuitte ik ineens op een regel met

@media screen
{
_css stuff_
}

Zoiets had ik nog nooit gezien en vroeg me dan ook af wat dit betekende. De ontwikkelaar in kwestie wist ook niet meer precies wat dit deed, dus heb ik even gezocht naar dit soort statements.
Blijkbaar kun je in CSS aangeven welk type ‘scherm’ welke stijl moet hebben. Zo kun je bijvoorbeeld voor een projector, beeldscherm, printer en pocket pc hetzelfde CSS-bestand gebruiken, maar met andere waarden. Dit is wel enorm gaaf.

Door bijvoorbeeld dit te gebruiken:

p { color: green; }
@media screen, projection, tv {
  #foo { position: absolute; }
}

@media print {
  #navi { display: none; }
}

@media handheld {
  #foo { position: static; }
}

Heb je de p-tag voor een handheld, printer, scherm, beamer en televisie anders gedefinieerd.

Je moet wel uitkijken dat je geen idioot moeilijke en onoverzichtelijke code aan het maken bent, maar dit biedt toch potenties. Volledige uitleg is op deze website te vinden https://www.howtocreate.co.uk/tutorials/css/mediatypes/

Behalve de leuke media-types kun je ook nog gebruik maken van een *, # en .-teken.
Het .-teken was bij mij al bekend. Dit heeft volgens mij betrekking op de namen van de klassen.