Labo-03
Doelen
- Een stylesheet koppelen aan een pagina, met normalize ervoor
- Kleuren kiezen in oklch() en het contrast controleren
- Element-, class-, id- en attribute-selectors gebruiken en verantwoorden
- In de devtools aflezen welke regel wint en waarom
- Uitleggen welke properties overerven en welke niet
- Een lettertype zelf hosten met @font-face, met een fallback
- Uitleggen waarom je een font niet bij Google ophaalt
Oplossing
Omschrijving
In dit labo hebben we een HTML-pagina opgemaakt met CSS. Eerst koppelden we normalize en daarna een eigen stylesheet. Daarin kozen we kleuren in oklch() en controleerden we het contrast met axe DevTools. Daarna gebruikten we de verschillende soorten selectors en onderzochten we wat er gebeurt als twee regels hetzelfde element aanspreken. Met een apart bestand conflicten.css zochten we in de devtools uit waarom bepaalde regels niet werkten. Tot slot hebben we het lettertype Fredoka zelf gehost met @font-face en de fallback getest.
Gerelateerde links
Antwoorden
Welke twee lightnesswaarden volstonden voor het contrast?
- Tekst: 0.25
- Achtergrond: 0.96
Het contrast is groot genoeg, want het is groter dan het minimum van 4.5:1. Het verschil in lightness (0.71) is bijna even groot als in het voorbeeld (0.74).
Wat zijn de drie oklch-waarden van #3a7bd5?
- Lightness: 0.586
- Chroma: 0.153
- Hue: 257.2
Licht of donker: eerder donker.
Witte tekst: niet voor gewone tekst, want het contrast is net te laag. Voor grote tekst kan het wel, daar moet het contrast maar 3:1 zijn.
Welke van de twee classes wint, en waarom?
Aangezien ze even specifiek zijn, wint de regel die als laatste in de stylesheet staat, waardoor .belangrijk wint.
Waarom doet de p-regel na de id-regel niets?
Een id is sterker dan een element. Daarom wint #intro, ook al staat de p-regel later.
Overerving
text-align: center op :root centreerde alle tekst, want text-align wordt overgeërfd. background-color wordt niet overgeërfd, daardoor verandert er niets.
Wat laat de licentie van Fredoka toe?
Je mag het gratis gebruiken, ook voor commerciële doeleinden, maar je mag het lettertype zelf niet verkopen.
De vier gevallen uit conflicten.css
- A: omdat de zwarte regel voor figcaption lager staat dan de groene.
- B: omdat de intro een id-selector (#intro) heeft. Die is sterker dan de elementselector p.
- C: omdat we een elementselector gebruiken voor iets dat een class-selector nodig heeft.
- D: omdat het groen een geërfde waarde is van :root. De lijstitems hebben een eigen CSS-regel (li).
Waarom geen fonts van Google?
Als een bezoeker een lettertype bij Google ophaalt, krijgt Google het IP-adres van die bezoeker. Om dit te vermijden hosten we het font zelf.
Reflectie
Het labo is groter dan verwacht, ik vind het niet gemakkelijk om een overzicht te bewaren van alle verschillende principes. Voor de rest verliep het labo vlot.