https://www.youtube.com/watch?v=2IV08sP9m3U

Using de min() function

Inplaats van dit:

Dit:

padding: min(5em, 8%);

5em is een fixed unit en met de komma is de 8% een tweede waarde. Dit is nu een relatieve eenheid. This function will calculate welke of values is smaller. on a desktop screen wat is realy wide 5em is smaller dan 8^% paren element en dat is in this case the body. dus 8% van screen maar als je resize window smaller design er is een punt dat 8% van screeen is smaller dan 5em dus min function swtich en kiest 8& voor de padding en omdat 8% een relevant unit is wordt het smaller en smaller als het scherm smaller wordt

dont use px maar rem

rem = "The root element font-size"

font-=size: 1.5ren; is 16px x 1,5 = 24px

10vw skates the font size to 10% of the viewport

maar als je dit toepast is 10% op dekstop heel groot en op mobiel weer veelste klein dus hebben we een minimum size nodig en de beste oplossing daarvoor is een clamp function

met clamp you can provide three values

1. minium valjue - 1.8rem
2. prefend value - 10vw
3. max value - 5rem

clamp funtion will always use 10vw width as long as our minimum of maximum value is mot reached

er is alleen een probleem zodra je gaat inzoomen en uitzoomen met je muis bijv dan schaalt hij niet mee groot of klein omdat viewport is based on the viewport en nothing else other untis like rem and pixels for example they can zoom in. dus om dit te fixen moeten we vw combineren met een zoomable unit zoasl rem bijv. Daarvoor gebruik je de Calc function in CSS.

by default html img are not responsive. je zou dan je img een max widtg 100% geven maar de img zal dan dunner mee stretchen or disort en dat is vanwege de height and width attribute in html for SE) reasons is het toegestaan om to defind de heigth en widt in HTML.

\\

aspect-ratio:

aspect-ratio: 1/1

aspect-ratio: 16/9

aspect-ratio 9/16

bij de laatste gaan de fotos zien de fotos er stretched uit omdat ze de ruimte willen vullen. als dit gebeurt moet je de object-fit gebruiken.

maar dan gebeurt er dit met "contain" omdat de aspect-radio 9/16 is .

als je object-fit: cover; gebruikt gaat het wel goed. maar als je dan 1/1 doen zoomt hij wel de foto in en snijd hij dingen af

100vh

als je dit invult "height: 100vh" wordrt het hele scherm bedenkt.

maar het probleem is als je op mobiel kijkt je naar beneden moet scrollen. hier is het element groter dan het beeldscherm. je kan dit alleen testen en zien op een echte telefoon, want in browser development ziet het er goed uit. Dit gebeurt omdat mobiele browsers reserve space voor de UI elementen zoals de addres bar en die is niet accounted bij de 100 viewport.

om dit te fixen heeft CSS iets nieuws "dvh = dynamic viewport height" Je kan ziet dat de blauwe border nu te zien is ook onderin.

als je twijfelt over browser compatibility kan je altijd ze beide opschrijven en de browser zal degene negeren dat niet werkt.

dit is een tool voor je hamburger menu.

normaal zet je je memus op hidden zodat je ze niet zien, maar voor toegangelijkheid is dit niet handig want de tab zal er alsnog doorheen zien.

hidden elements are stil table and remain the accessibility tree. oplossing je kan <nav inert> gebruiken.

make sure in javascript to add or remove the inert attribute whenever you hide or show the element.

this is a more advanced techniek. om een goed en gebruikvriendelijke hamburger menu te maken check deze video!

https://www.youtube.com/watch?v=m7YDWNz65iI