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.

Display the content of possible issues with the

ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s tags.

A comparison of translate, scale, rotate (that can use the turn unit)

I am definitely not a fan of this.

Applying a tons of classes (i.e. one for every css rule) feels wrong to me ! 😱

🤣

🤣

❤️

About CSS

You are the visual translation of information. What good is all the information in the world if we can’t easily understand it? You hold the keys to hierarchy and contrast and layout, the keys to visual communication.

Using <wbr> where it can break. It is useful for URLs.