js:read-size

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision		 Révision précédente
js:read-size [2025/07/17 15:44] – créée avillepreuxjs:read-size [2025/07/17 16:05] (Version actuelle) – avillepreux
Ligne 1: Ligne 1:
  
 <html> <html>
 +
 <form class="read-size-ruler"> <form class="read-size-ruler">
-  <input type="radio" name="read-size"> +   
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size" checked> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size" checked> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size"> +    <input type="radio" name="read-size"> 
-  <input type="radio" name="read-size">+    <input type="radio" name="read-size"> 
 +    <input type="radio" name="read-size"> 
 +  
 </form> </form>
-<style> + 
-  .read-size-ruler { +  <style> 
-    :nth-child(1) { --n: 1 }; +    body:has([name="read-size"]:checked:nth-child(1) ) { --max-read-size-step:  1 } 
-    :nth-child(2) { --n: 2 }; +    body:has([name="read-size"]:checked:nth-child(2) ) { --max-read-size-step:  2 } 
-  }+    body:has([name="read-size"]:checked:nth-child(3) ) { --max-read-size-step:  3 } 
 +    body:has([name="read-size"]:checked:nth-child(4) ) { --max-read-size-step:  4 } 
 +    body:has([name="read-size"]:checked:nth-child(5) ) { --max-read-size-step:  5 } 
 +    body:has([name="read-size"]:checked:nth-child(6) ) { --max-read-size-step:  6 } 
 +    body:has([name="read-size"]:checked:nth-child(7) ) { --max-read-size-step:  7 } 
 +    body:has([name="read-size"]:checked:nth-child(8) ) { --max-read-size-step:  8 } 
 +    body:has([name="read-size"]:checked:nth-child(9) ) { --max-read-size-step:  9 } 
 +    body:has([name="read-size"]:checked:nth-child(10)) { --max-read-size-step: 10 } 
 +    body:has([name="read-size"]:checked:nth-child(11)) { --max-read-size-step: 11 } 
 +    body:has([name="read-size"]:checked:nth-child(12)) { --max-read-size-step: 12 } 
 +    body:has([name="read-size"]:checked:nth-child(13)) { --max-read-size-step: 13 } 
 +    body:has([name="read-size"]:checked:nth-child(14)) { --max-read-size-step: 14 } 
 +    body:has([name="read-size"]:checked:nth-child(15)) { --max-read-size-step: 15 } 
 +    body:has([name="read-size"]:checked:nth-child(16)) { --max-read-size-step: 16 } 
 +    body:has([name="read-size"]:checked:nth-child(17)) { --max-read-size-step: 17 } 
 +    body:has([name="read-size"]:checked:nth-child(18)) { --max-read-size-step: 18 } 
 +    body:has([name="read-size"]:checked:nth-child(19)) { --max-read-size-step: 19 } 
 +    body:has([name="read-size"]:checked:nth-child(10)) { --max-read-size-step: 10 } 
 +    body:has([name="read-size"]:checked:nth-child(21)) { --max-read-size-step: 21 } 
 +    body:has([name="read-size"]:checked:nth-child(22)) { --max-read-size-step: 22 } 
 +    body:has([name="read-size"]:checked:nth-child(23)) { --max-read-size-step: 23 } 
 +    body:has([name="read-size"]:checked:nth-child(24)) { --max-read-size-step: 24 } 
 +    body:has([name="read-size"]:checked:nth-child(25)) { --max-read-size-step: 25 } 
 +    body:has([name="read-size"]:checked:nth-child(26)) { --max-read-size-step: 26 } 
 +    body:has([name="read-size"]:checked:nth-child(27)) { --max-read-size-step: 27 } 
 +    body:has([name="read-size"]:checked:nth-child(28)) { --max-read-size-step: 28 } 
 +    body:has([name="read-size"]:checked:nth-child(29)) { --max-read-size-step: 29 } 
 +    body:has([name="read-size"]:checked:nth-child(20)) { --max-read-size-step: 20 } 
 +    body:has([name="read-size"]:checked:nth-child(31)) { --max-read-size-step: 31 } 
 +    body:has([name="read-size"]:checked:nth-child(32)) { --max-read-size-step: 32 } 
 +    body:has([name="read-size"]:checked:nth-child(33)) { --max-read-size-step: 33 } 
 +    body:has([name="read-size"]:checked:nth-child(34)) { --max-read-size-step: 34 } 
 +    body:has([name="read-size"]:checked:nth-child(35)) { --max-read-size-step: 35 } 
 +    body:has([name="read-size"]:checked:nth-child(36)) { --max-read-size-step: 36 } 
 +    body:has([name="read-size"]:checked:nth-child(37)) { --max-read-size-step: 37 } 
 +    body:has([name="read-size"]:checked:nth-child(38)) { --max-read-size-step: 38 } 
 +    body:has([name="read-size"]:checked:nth-child(39)) { --max-read-size-step: 39 } 
 +    body:has([name="read-size"]:checked:nth-child(30)) { --max-read-size-step: 30 } 
 + 
 +    p { 
 +        max-inline-size: calc(calc(50 + var(--max-read-size-step) * 10) * 1ch); 
 +    } 
 +     
 +    .read-size-ruler { 
 +      text-align: right; 
 +    }
 </style> </style>
 </html> </html>
  
  • js/read-size.1752759881.txt.gz
  • Dernière modification : 2025/07/17 15:44
  • de avillepreux