Je n'ai pas forcément compris toutes les explications mais l'article est vraiment intéressant.

J'imagine qu'il me faudrait réfléchir pour remplacer mon usage des media queries façon patch à la pelle de chantier des trucs qui foirent quand on change la taille du viewport... si je pouvais me passer des breakpoints...

Mais bon, j'ai déjà bossé à un refacto du css de mon appli de documents/exercices pour les élèves en modernisant le code à coups de nesting et de variables pour les couleurs... résultat, certains navigateurs au collège affichent de la merde parce qu'ils ne sont pas mis à jour

Je ne sais pas pour vous amis codeurs, mais de mon côté, si je n'ai pas un problème concret pour intégrer des nouveautés,impossible de les comprendre vraiment...

Je me note quelques astuces intéressantes. Toutefois, une remarque en passant... ARRÊTEZ DE FAIRE DES VIDÉOS DE PROGRAMMATION... à quoi ça rime ? on ne peut pas faire de copier coller, pas de récup auto de snippets, pas de tests... à part faire grimper votre popularité sur les raizosocio... pfff.

Oui, je sais qu'en description il a mis les snippets : mais il pouvait les inclures dans une page de blog, non ? Ou alors plus personne ne sait lire à part moi et on ne m'a rien dit ?!

un effet glow ou une ombre qui suit le background de la div.

L'astuce consiste à utiliser des pseudo éléments héritant du background de la div et à les blur.

.gradient-shadow {
  background: linear-gradient(
    45deg,
    hsl(var(--clr-orange)),
    hsl(var(--clr-blue))
  );
  position: relative;
  isolation: isolate;
}

.gradient-shadow::before,
.gradient-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  /*   border: 10px dotted white; */
}

.gradient-shadow::before {
  filter: blur(0.75em);
}

.gradient-shadow::after {
  opacity: 0.5;
  filter: blur(2em);
}

Faire en sorte que la répartition du texte sur plusieurs lignes soit meilleure

En gros, le navigateur essaie de couper le texte de façon plus homogène

// pour les titres (peu de lignes) 
h1{ text-wrap: balance;}
// pour les paragraphes etc (beaucoup de lignes): pas d'orphelin sur la dernière ligne
p{text-wrap:pretty;}

Je me note quelques astuces à tester ou retenir :

/* empêcher les navigateurs mobiles d'ajuster la taille du texte */
-webkit-text-size-adjust: none;
text-size-adjust: none;

/* le body prend tout le viewport */
html{ block-size: 100%; }
body{ min-block-size: 100%; }

/* empêcher les medias de déborder */
img,
iframe,
audio,
video,
canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

svg {
    max-inline-size: 100%;
}

/* overflow horizontal */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* rendre le disabled plus visible */
:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

Donc on PEUT styler les boutons radio sans casser l'accessibilité ni recourir à des libs ou frameworks hippopotamesques.

Hop, dans mon snippetvamp.

La lecture de l'article est intéressante.

input[type="radio"] {
  /* Disable the browser's default radio button styles */
  appearance: none;
  margin: 0;
/ Recreate the circle container /
border: 1px solid black;
background: white;
border-radius: 50%;
/ Center our dot in the container /
display: inline-grid;
place-content: center;
/ Use a pseudo-element to display our "dot" /
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/ And display it when the radio button is checked /
&:checked::before {
background: black;
}
}

via https://www.devenet.eu/links/?_X-l9g

Résume :

Amen.

• On définit le but : est-ce que c'est pour expliquer, guider, ou juste faire plaisir ?
• On pense à la fréquence : plus c'est utilisé, moins ça doit bouger
• On reste rapide, toujours sous les 300 ms
• On donne le contrôle, en respectant toujours les préférences de la personne qui utilise l'interface.

(oui, l'image de titre est bien un troll )

Styler les inputs radio/checkboxes de façon sémantique, accessible, moderne, customisable et vanilla, c'est possible !

Avec un mélange de variables css et appearance.

Superbe, simple, ergonomique...

Bon article sur la façon d'afficher les citations en HTML.

Je retiens une façon de mettre l'apostrophe en retrait

/* Fallback */
blockquote {
  text-indent: -0.45em;
}
/ If there's support, erase the indent and use the property instead /
@supports ( hanging-punctuation: first) {
blockquote {
text-indent: 0;
hanging-punctuation: first;
}
}

Quelques idées d'effets de focus simples...

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;
}

Une lib pour faire des checkboxes en pur css. C'est bôôôôô

J'ai la flemme de résumer, mais je capture

Face aux problèmes de webdesign que posent certains navigateurs selon leurs versions, je vous ai déjà proposé plusieurs "solutions"  : les hacks que tout le monde connaît, charger une feuille de style spécifique au navigateur et détecter les supports mobiles...

Aujourd'hui, je vous propose une autre possibilité, que j'ai utilisée à maintes reprises pour cibler un navigateur ou une page spécifique dans les CSS.

(...)

Combien de fois on peut se prendre le front ou se gratter le menton pendant des heures sans piger vraiment le pourquoi du comment des réactions de css...
Un peu comme si on n'avait pas le droit d'avoir les avantages d'une balise sans ses inconvénients .

La balise <pre> est de celles-là: servant surtout à présenter des portions de code dans le navigateur afin de les rendre plus lisibles, on se heurtait au problème de la ligne interminable qui dépasse au lieu de se couper proprement (saleté)

Voilà la solution et pis cross browser en plus.

(...)