Dans mon appli de documents, je voulais accentuer le document survolé dans la liste et diminuer les autres li. Ben ça se fait en ... un sélecteur CSS !
body:has(li:hover) li:not(:hover){
opacity:0.5;
transition: opacity 500ms;
}Les li non survolés alors qu'un li est survolé sur la page deviennent transparents à 50% mais si on ne survole aucun li, l'aspect est normal...
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 ?!
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);
}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;
}
}
Résume :
Amen.
(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.
