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

« A digital museum of video game levels

CLICK AND DRAG to look around and use WASD to move the camera

Hold SHIFT to go faster, and use MOUSE WHEEL to fine tune the speed Z toggles the UI. »

Pourquoi ?!

Parce que...

À toutes fins utiles, je viens de mettre à jour ma page de bookmarklets en y ajoutant la recherche sur CanIUse.

Servez-vous... ou faites-en de nouveaux avec le générateur: http://outils.warriordudimanche.net/outils/bookmarklet_generator/ (plus d'infos là )

Petit rappel: il existe des dictionnaires libres, mis à jour à partir du Wiktionnaire, pour votre liseuse Kobo. Le projet semble encore actif.

Pour en installer un, copier juste le fichier téléchargé dans .kobo/custom-dict ou .kobo/dict selon votre firmware.

Liens:

• le projet sur github : https://github.com/reader-dict/monolingual
• Dictionnaire FR : https://www.reader-dict.com/fr/download/fr
• Dictionnaire ES : https://www.reader-dict.com/fr/download/es
• Dictionnaire EN: https://www.reader-dict.com/fr/download/en

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

Lol, le concept n'est pas con: insérer des caractères unicodes invisibles de largeur 0 entre les lettres d'un texte pour le rendre illisible aux IA...

Aaaahhh, le remplaçant de Print-a-brick qui avait disparu, victime d'une entreprise Lego jalouse de ses brevets. A vos imprimantes 3D !

[EDIT]

J'ajoute https://machineblocks.com/ qui permet même d'éditer les briques ! On peut changer les paramètres de largeur, longueur, hauteur forme etc en partant de briques existantes ! Le tout téléchargeable en plusieurs formats dont STL

glopglop !

Oui, avant tout recours à JS on devrait vérifier que ce n'est pas possible en CSS/HTML5 pur...

Le nesting est en effet un game changer, même si la dernière fois que j'ai voulu reprendre le CSS de mon appli de documents/exerciseur pour le collège, j'avais omis de compter avec le manque de mises à jours sur les ordis du boulot.

Au passage, je me note les possibilités du RGB() pour dériver une couleur d'une autre: à utiliser dans mon framework perso... plus simple que les multiplications de variables CSS... On ne garde qu'une variable pour la couleur de base et on calcule les autres couleurs nécessaires...

 /* remove blue from a color */
rgb(from #123456 r g 0);
/* make a color transparent */
rgb(from #123456 r g b / 0.5);
/* make a color lighter */
hsl(from #123456 h s calc(l + 10));
/* change the hue in oklch color space */
oklch(from #123456 l c calc(h + 10));
/* mix two colors in oklab color space */
color-mix(in oklab, #8CFFDB, #04593B 25%);

Et ça marche avec des variables CSS:

*{
--base-color:red;
}
/Ajouter de la transparence/
.transparent{
hsl(from var(--base-color) h s calc(l + 12));
}
/ désaturer une couleur de base/
.desat{
color: hsl(from var(--base-color) h calc(s + -50) l);
}
/ complémentaire/
.complementaire{
hsl(from var(--base-color) calc(h + 180) s l);
}
/ plus loin : primary, seconday, tertiary/
.primary{
hsl(from var(--base-color) calc(h + 90) s l);
}
.secondary{
hsl(from var(--base-color) calc(h + 180) s l);
}
.tertiary{
hsl(from var(--base-color) calc(h + 270) s l);
}

De plus, depuis un an, on peut centrer officiellement un block verticalement sans quitter le display:block; à l'aide de align-content: center; #youpi

Et que dire de @starting-style qui permet de se passer de keyframes ?

 .toast {
  transition: opacity 1s, translate 1s;
  opacity: 1;
  translate: 0 0;
  @starting-style {
    opacity: 0;
    translate: 0 10px;
  }
}

Heu... non, ce n'est pas ce qui est dit: il ne sert à rien d'héberger ses données chez une entreprise américaine même si elle est basée en Europe... mais rien de nouveau ici.

Si tu as tes données ailleurs que chez amazon & consorts, tu es tranquille. Les USA n'ont pas le droit de récupérer tes données stockées chez O2switch par exemple...

Outre le fait que c'est vraiment nien trouvé, c'est ABSOLUMENT hilarant tellement le concept d'UI mal foutue est poussé loin. Ce n'est plus de la dark pattern, c'est de la troll pattern

Insupportable !