TL;DR but still interesting. In case I need it, I know how to find it

I bookmark this post especially for this code snippet:

body {
    margin: 0 auto;
    max-width: 40rem; // can be bigger but not too much ! (<= 80 I think)
    font-size: 1.2rem;
}

It makes a HTML website directly readable :)

Now I understand how it is useful 👍‍

A minimal CSS reset with every line explained.

Why would I use this?

If you just want to launch already.
An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.

Solution: Using 1 subgrid per element inside a grid.

Codepen: https://codepen.io/michellebarker/pen/JjGNdNY

In the console: $0.offsetParent → $0 is the currently set element.

Then we can use the offsetParent object property to find the closest ancestor to that element that has its position set to something other than static.

Solutions:

1. styling it manually through CSS :

   input:focus {
   outline: 2px solid deeppink;
   }

2. A keyup tab event listener. Think about adding the class through JS, that way the focus will still be accessible if JS fails to load.

3. the property ::focus-visible

The background color of checkboxes will be the one determined by accent-color. Nice !

And the surrounding stays accessible whatever this color is as the webbrowsers have their own implementation of this.

When to use the drop-shadow filter:

• on a non-rectangular shadow (or clipped elements)
• on a group of box

Limitation: it does not have the spread parameter.

A code snippet is provided for it. Well done.

A curated list of CSS named colors.

mBarker84 made a list with these names only on Github

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))); → maybe too clever as the line is hard to understand.

and

grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));

This is a great snippet, but there is absolutely zero chance I’m going to remember how to write it every time.

Another trick is to use a toggle value stored in a css variable.

Water.css is a drop-in collection of CSS styles to make simple websites like this just a little bit nicer.

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

and 100 more bytes:

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}

Ok why not ? But is this needed ?

To let the animation to the GPU in practice: will-change: transform.

will-change is a property that allows us to hint to the browser that we're going to animate the selected element, and that it should optimize for this case.

A lot of important notions about animations with the transition property!

There is a @media (prefers-reduced-motion: reduce) too.

👍

Research has shown that the ideal line length is about 65 characters. Anywhere between 45 and 85 is generally seen as acceptable, in the context of a roman alphabet.

The solution:

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

ch is a unit, like px or rem. It corresponds to the width of the 0 character in the current font, for the specified font size.

Why even use shadows ?

Shadows imply elevation, and bigger shadows imply more elevation. If we use shadows strategically, we can create the illusion of depth, as if different elements on the page are floating above the background at different levels.

Here's the first trick for cohesive shadows: every shadow on the page should share the same ratio. [...] To ensure consistency, each shadow should use the same ratio between these horizontal and vertical offsets.

By matching the hue and lowering the saturation/lightness, we can create an authentic shadow [same color style] that doesn't have that “washed out” grey quality.

Ideas are:

1. Creating a cohesive environment by coordinating our shadows.
2. Using layering to create more-realistic shadows.
3. Tweaking the colors to prevent “washed-out” gray shadows.

I will think about it the next time I will have an interface to build.