Notes from Day 6

Day 6 links to a video on why you shouldn't use ems for font-size, which I already watched. It also links to A Tale of `width` and `max-width` on CSS-Tricks.

Notes on the CSS-Tricks Article

It recommends putting the modal as a direct child of <body> to avoid inheriting styles from somewhere else.

It quotes another blog post about accessibility of modals:

For anyone who has ever tried to make a modal accessible you know that even though they seem pretty innocuous, modals are actually the boss battle at the end of web accessibility. They will chew you up and spit you out. For instance, a proper modal will need to have the following features:

Keyboard focus should be moved inside of the modal and restored to the previous activeElement when the modal is closed

Keyboard focus should be trapped inside of the modal, so the user does not accidentally tab outside of the modal (a.k.a. “escaping the modal”)

Screen readers should also be trapped inside of the modal to prevent accidentally escaping

The article mentions that these are the same. The purpose is to prevent 600px wide modals from extending beyond the edge of the screen on small screens.

width: 600px; max-width: 100%;

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, nihil ducimus. Ea consequuntur aliquam voluptatum, cupiditate velit non odio aspernatur officiis minima nobis consectetur, ex similique temporibus nesciunt veritatis dolores.

width: 100%; max-width: 600px;