Quelques trucs que je retiens pour moi :

counters

body {
  counter-reset: heading; /* init the counter for headings (you can give it any other name) */
}
h2 {
  counter-increment: heading; /* increments the counter on every <h1> tag */
  counter-reset: subheading;  /* here we init or reset the subheading */
  /* so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 */
}
h2:before {
  content: counter(heading) " - "; /* using :before selector and counter() function we can add the index to the heading */
}
h3 {
  counter-increment: subheading; /* increment the subheading counter on every <h2> tag */
}
h3:before {
  content: counter(heading) "." counter(subheading) " - ";
}

currentColor

.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}

image-rendering

.pixelated {
  -webkit-image-rendering: pixelated;
  image-rendering: pixelated;
}

img {
  width: 200px;
  height: 200px;
}

shape-outside

• Keyword values: none, margin-box, padding-box, border-box, padding-box
• Function values: circle(), ellipse(), inset(), polygon()

.-shape-outside {
  shape-outside: circle(50%);
  float: left;
}

.circle {
  width: 160px;
  height: 160px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 24px;
  overflow: hidden;
  border: 1px solid #eee;
  img {
    width: 100%;
    height: 100%;
  }
}

div {
  text-align: justify;
}

html, body {
  height: auto;
}

@supports

@supports (display: grid) {
  .container {
    display: grid;
  }
}            

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}


@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {

}

var()

:root {
  --primary-color: #cccccc;
}
body {
  color: var(--primary-color, #cccccc);/* le second est le fallback */
}

vh, vw, vmin, vmax

These values are used for sizing things relative to the viewport size. While width is alwasys relative to the parent container, vh or vw always use viewport size as a basis.

• vh: 1 vh is equal to 1/100 of viewport height
• vw: 1 vw is equal to 1/100 of viewport width
• vmin: it is the least value of vh and vw
• vmax: is the largest value of those two

For a browser window that has a viewport 1280x655px, 1vh is equal to 6.55 pixels, 1vw is equal to 12.8pixels, vmin is 6.55 pixels (smallest of the two values), and vmax is 12.8 pixels (largest of the two values).

writing-mode

.vertical-rl {
  writing-mode: vertical-rl;
}
.vertical-lr {
  writing-mode: vertical-lr;
}
```<div class="img_source"><a href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT9AE-gH-YzrjroQjQxh76bQIs_W94nTXX8C45nGCToFe9Dxz3S">Source image</a></div>