Labo 3: CSS

Doelen van de oefening

Na dit labo kan je:

een stylesheet aan je pagina koppelen, met normalize ervoor CORE_3.1
kleuren kiezen in oklch() en het contrast ervan controleren CORE_4.1 CORE_7.1
element-, class-, id- en attribute-selectors gebruiken en je keuze verantwoorden CORE_3.2
in de devtools aflezen welke regel wint en waarom CORE_3.10
uitleggen welke properties overerven en hoe je dat gebruikt CORE_3.4
een lettertype zelf hosten met @font-face, met een fallback CORE_4.3
uitleggen waarom je een font niet bij Google ophaalt CORE_4.3

Oplossing

Omschrijving

In dit labo koppel ik een stylesheet aan een oefenpagina, met normalize ervoor. Daarna kies ik kleuren in oklch(), oefen ik met de verschillende soorten selectors, zoek ik in de devtools uit welke regel wint en host ik zelf een lettertype met @font-face.

Antwoorden op de vragen

Oefening 2: contrast

Mijn achtergrond heeft lightness 0.99 en mijn tekst lightness 0.25: oklch(0.99 0.003 260) en oklch(0.25 0.03 260). Dat geeft een contrast van ongeveer 15,6:1 en axe DevTools geeft geen meldingen.

Oefening 3: van hex naar oklch

#3a7bd5 is oklch(0.586 0.153 257.2): lightness 0.586, chroma 0.153 en hue 257.2 (blauw). Met een lightness van ongeveer 0.59 zit deze kleur in het midden: niet echt licht en niet echt donker. Witte tekst erop haalt maar 4,2:1 en dat is te weinig voor gewone tekst (minstens 4,5:1). Voor grote tekst (minstens 3:1) kan het net wel.

Oefening 5: twee classes

.belangrijk wint. .waarschuwing en .belangrijk hebben dezelfde specificity (één class), dus beslist de volgorde in de stylesheet: de regel die het laatst staat, wint. De volgorde van de classes in het class-attribuut in de HTML speelt geen rol.

Oefening 6: id selector

De p-regel doet niets omdat een id selector een veel hogere specificity heeft dan een element selector. Dan maakt het niet uit dat de p-regel later staat: volgorde telt pas bij gelijke specificity. Om de font-weight wel te overschrijven had ik een selector met minstens dezelfde specificity moeten schrijven, dus opnieuw #intro (of p#intro), en die onder de eerste regel zetten.

Oefening 8: overerving

Met text-align: center op :root schuift alle tekst naar het midden: koppen, paragrafen, lijsten, navigatie en footer, want text-align erft over. background-color erft niet over: in de devtools heeft een p zelf een doorzichtige achtergrond, en je ziet gewoon de achtergrond van :root erdoor.

Oefening 9: conflicten

A: beide regels hebben dezelfde selector en dus dezelfde specificity. Dan wint de regel die het laatst staat: de zwarte.
B: #intro is een id selector en die wint altijd van de element selector p. De andere paragrafen hebben geen id, dus voor hen geldt alleen de groene regel.
C: de punt ontbreekt. waarschuwing zonder punt is een element selector die naar een <waarschuwing>-element zoekt, en dat bestaat niet op de pagina.
D: de koppen hebben geen eigen color-regel en erven de groene kleur over van :root. De lijstitems hebben wel een eigen regel, en een regel die rechtstreeks op een element staat, wint altijd van een overgeërfde waarde. (In mijn eigen stylesheet geef ik h1 en h2 zelf een kleur, dus daar blijven de koppen ook niet groen.)

Oefening 10: licentie van Fredoka

Fredoka valt onder de SIL Open Font License: ik mag het lettertype gratis gebruiken, aanpassen en mee verspreiden, ook op een publieke website, zolang ik het lettertype zelf niet apart verkoop en de licentie erbij laat.

Oefeningen 11 en 12: zelf hosten en fallback

Door het variable font om te zetten naar .woff2 ging het van ongeveer 159 kB naar 87 kB. In het tabblad Network komt het bestand van mijn eigen project en is er geen verzoek naar fonts.googleapis.com of fonts.gstatic.com.

Met een fout pad valt de pagina terug op sans-serif en blijft ze leesbaar. Zonder sans-serif krijg je het standaardlettertype van de browser, meestal een serif zoals Times New Roman.

Een font haal ik niet bij Google op omdat de browser van elke bezoeker dan het IP-adres naar Google stuurt. Dat is een persoonsgegeven en daar heb je volgens de GDPR toestemming voor nodig. Zelf hosten lost dat op, en mijn site hangt dan ook niet af van een externe server.