http ting til HF2

# Nice to Know http:// ## ting at forholde sig til --- ### Nu er I på HF2 - det er tid :) Her er listen * MediaQueries - kender I jo godt * Den nye måde at skrive dem på :thinking_face: * Picture Tag * Brug den som en mediaQ :astonished: --- * WebP * Det er jo loco som det kan :fire: * WAI-ARIA * Web Accessibility Initiative - Accessible Rich Internet Applications * Verdens længste specifikation :100: --- ## Media Queries Sådan finder man dem på w3schools ``` @media (min-width: 35em) and (max-width: 50em) {...} ``` --- ## The 'new' way ``` @media (width > 35em){...} ``` Meen det er stadig undervejs.... --- ## Picture Tag ``` <picture> <source srcset="/media/thumb/surfer-50-50.jpg" media="(min-width: 800px)" type="image/jpg"> <img src="/media/medium/surfer.jpg" alt="" /> </picture> ``` --- ## WebP ``` <picture> <source srcset="https://unsplash.it/800?image=61" media="(min-width: 800px) type="image/webp"> </picture> ``` [WebP Eksempler](https://developers.google.com/speed/webp/gallery2) --- ## Hej Ven :sandwich: ``` <video width="123" height="123" controls > <source src="thefilename.webm" type='video/webm; codecs="vp8, vorbis"'> </video> ``` --- ## WAI-ARIA - A11Y Auditory disabilities Motor disabilities Cognitive disabilities Semantik - html5 Dark Mode Basics [wai-aria](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics) --- ## Semantik - Yeah :guitar: RockOn! ``` <nav> <header> <footer> <input type="date"> <input type="range"> ``` --- #### Hvad er der så ellers? role="navigation" (nav) or role="complementary" (aside), Men der er også til sidestrukturen:, som role="banner", role="search", role="tablist", role="tab", som ofte er en del af UIs. --- ### Lige et par links [WAI-ARIA Best practices](https://www.w3.org/TR/wai-aria-practices-1.2/) [Kursus ?](https://www.w3.org/WAI/fundamentals/foundations-course/) [En snak med Ashlee Boyer](https://www.youtube.com/watch?v=qr0ujkLLgmE) [A11Y](https://www.a11yproject.com/)