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.
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.
B
on si on voyait un peu comment styler la balise A sans forcément utiliser des classes pour en différencier l'aspect selon la cible, le type etc... ?
Si c'est possible... et c'est par là que ça se passe...
Ben voilà, on s'évertue à pondre un joli design avec de belles couleurs puis l'utilisateur s'amuse à sélectionner la page pour avoir des fonds bleus...
Sont-ils taquins ces utilisateurs...
Si d'aventure, vous avez envie d'éviter ça, voilà une chtite classe css et pis crossbrowser s'il vous plaît...
Pas que je sois fan des hacks css (ça fait pas super propre, c'est le moins qu'on puisse dire ) mais bon, ça peut rendre service... 