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.

Het #-teken ken ik sinds vandaag ook. Deze wordt gebruikt om de stijl van een bepaald ID in je HTML te definieren. Dit kan ook handig zijn, als een speciaal ID iets meer moet opvallen als de rest. Zo kun je weer weer grote if-statements besparen in je code.

Het *-teken is ook wel handig. Dit wordt gebruikt om alle elementen van een bepaald type eenzelfde stijl te geven. Als je dit dus opgeeft voor een body-tag, krijgen alle body’s de stijl die bij het *-teken is gebruikt, ongeacht de klasse die ze hebben.

Ook kan het bijvoorbeeld zo worden gebruikt

* {
  margin:0;
  padding:0
}

Een mooiere uitleg met ander voorbeeld is hier te vinden: https://www.dustindiaz.com/css-asterisk-the-universal-rule/
Toch weer een leerzame dag geweest.