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

<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

« 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...

<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

À 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à )

<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

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

<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

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

<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires