Un floating label en pur css ! \o/ Merci Timo !

<label>

    <input type="text" id="name" placeholder=" ">

    <span>Name</span>

</label>

<label>

    <input type="password" id="password" placeholder=" ">

    <span>Password</span>

</label>

 label {

  position: relative;

}



input {

    padding: 10px;

    border: 1px silver solid;

}

span {

  position: absolute;

  transition: all 200ms;

  opacity: 0.5;

  left: 0px;

  padding: 10px;

  transform-origin: top left;

}



input:not(:placeholder-shown) + span {

  transform: translateY(-100%) scale(.75);

  opacity: 1;

  padding: 0 10px;

}

Un bookmarklet pour recharger les css de la page. Signé Lea Verou, donc, bon

Utiliser le double-clic via CSS uniquement... astucieux

Une réflexion intéressante que je garderai en mémoire: ne réserver les classes css que pour styler, pas pour cibler en js.
Donc en résumé, au lieu de

<article class="article"><br />
</article><br />
<br />
et <br />
<br />
$(".article") <br />
```<br />
<br />
Préférer:<br />
<br />
```<br />
<article class="article" data-hoverable><br />
</article><br />
<br />
et <br />
<br />
$("[data-hoverable]")<br />
```<br />
<br />
On sépare ainsi les classes (styling) des attributs data-* (scripting js)<br />
<br />
<br/><br/><div class="img_source"><a href="https://www.inetsolutions.org/wp-content/uploads/2016/03/JavaScript-And-CSS-Includes-Do-Overload-Googles-Fetch-And-Mobile-Testing-Tools-1030x644.jpg">Source image</a></div>

C'est juste... beau.

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}