js:read-size

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
js:read-size [2025/07/17 15:55] – 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">
Ligne 20: Ligne 22:
     <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> + 
-    body:has([name="read-size"]:checked:nth-child(1) ) { --max-read-size-step:  1 }; +  <style> 
-    body:has([name="read-size"]:checked:nth-child(2) ) { --max-read-size-step:  2 }; +    body:has([name="read-size"]:checked:nth-child(1) ) { --max-read-size-step:  1 } 
-    body:has([name="read-size"]:checked:nth-child(3) ) { --max-read-size-step:  3 }; +    body:has([name="read-size"]:checked:nth-child(2) ) { --max-read-size-step:  2 } 
-    body:has([name="read-size"]:checked:nth-child(4) ) { --max-read-size-step:  4 }; +    body:has([name="read-size"]:checked:nth-child(3) ) { --max-read-size-step:  3 } 
-    body:has([name="read-size"]:checked:nth-child(5) ) { --max-read-size-step:  5 }; +    body:has([name="read-size"]:checked:nth-child(4) ) { --max-read-size-step:  4 } 
-    body:has([name="read-size"]:checked:nth-child(6) ) { --max-read-size-step:  6 }; +    body:has([name="read-size"]:checked:nth-child(5) ) { --max-read-size-step:  5 } 
-    body:has([name="read-size"]:checked:nth-child(7) ) { --max-read-size-step:  7 }; +    body:has([name="read-size"]:checked:nth-child(6) ) { --max-read-size-step:  6 } 
-    body:has([name="read-size"]:checked:nth-child(8) ) { --max-read-size-step:  8 }; +    body:has([name="read-size"]:checked:nth-child(7) ) { --max-read-size-step:  7 } 
-    body:has([name="read-size"]:checked:nth-child(9) ) { --max-read-size-step:  9 }; +    body:has([name="read-size"]:checked:nth-child(8) ) { --max-read-size-step:  8 } 
-    body:has([name="read-size"]:checked:nth-child(10)) { --max-read-size-step: 10 }; +    body:has([name="read-size"]:checked:nth-child(9) ) { --max-read-size-step:  9 } 
-    body:has([name="read-size"]:checked:nth-child(11)) { --max-read-size-step: 11 }; +    body:has([name="read-size"]:checked:nth-child(10)) { --max-read-size-step: 10 } 
-    body:has([name="read-size"]:checked:nth-child(12)) { --max-read-size-step: 12 }; +    body:has([name="read-size"]:checked:nth-child(11)) { --max-read-size-step: 11 } 
-    body:has([name="read-size"]:checked:nth-child(13)) { --max-read-size-step: 13 }; +    body:has([name="read-size"]:checked:nth-child(12)) { --max-read-size-step: 12 } 
-    body:has([name="read-size"]:checked:nth-child(14)) { --max-read-size-step: 14 }; +    body:has([name="read-size"]:checked:nth-child(13)) { --max-read-size-step: 13 } 
-    body:has([name="read-size"]:checked:nth-child(15)) { --max-read-size-step: 15 }; +    body:has([name="read-size"]:checked:nth-child(14)) { --max-read-size-step: 14 } 
-    body:has([name="read-size"]:checked:nth-child(16)) { --max-read-size-step: 16 }; +    body:has([name="read-size"]:checked:nth-child(15)) { --max-read-size-step: 15 } 
-    body:has([name="read-size"]:checked:nth-child(17)) { --max-read-size-step: 17 }; +    body:has([name="read-size"]:checked:nth-child(16)) { --max-read-size-step: 16 } 
-    body:has([name="read-size"]:checked:nth-child(18)) { --max-read-size-step: 18 }; +    body:has([name="read-size"]:checked:nth-child(17)) { --max-read-size-step: 17 } 
-    body:has([name="read-size"]:checked:nth-child(19)) { --max-read-size-step: 19 }; +    body:has([name="read-size"]:checked:nth-child(18)) { --max-read-size-step: 18 } 
-    body:has([name="read-size"]:checked:nth-child(10)) { --max-read-size-step: 10 }; +    body:has([name="read-size"]:checked:nth-child(19)) { --max-read-size-step: 19 } 
-    body:has([name="read-size"]:checked:nth-child(21)) { --max-read-size-step: 21 }; +    body:has([name="read-size"]:checked:nth-child(10)) { --max-read-size-step: 10 } 
-    body:has([name="read-size"]:checked:nth-child(22)) { --max-read-size-step: 22 }; +    body:has([name="read-size"]:checked:nth-child(21)) { --max-read-size-step: 21 } 
-    body:has([name="read-size"]:checked:nth-child(23)) { --max-read-size-step: 23 }; +    body:has([name="read-size"]:checked:nth-child(22)) { --max-read-size-step: 22 } 
-    body:has([name="read-size"]:checked:nth-child(24)) { --max-read-size-step: 24 }; +    body:has([name="read-size"]:checked:nth-child(23)) { --max-read-size-step: 23 } 
-    body:has([name="read-size"]:checked:nth-child(25)) { --max-read-size-step: 25 }; +    body:has([name="read-size"]:checked:nth-child(24)) { --max-read-size-step: 24 } 
-    body:has([name="read-size"]:checked:nth-child(26)) { --max-read-size-step: 26 }; +    body:has([name="read-size"]:checked:nth-child(25)) { --max-read-size-step: 25 } 
-    body:has([name="read-size"]:checked:nth-child(27)) { --max-read-size-step: 27 }; +    body:has([name="read-size"]:checked:nth-child(26)) { --max-read-size-step: 26 } 
-    body:has([name="read-size"]:checked:nth-child(28)) { --max-read-size-step: 28 }; +    body:has([name="read-size"]:checked:nth-child(27)) { --max-read-size-step: 27 } 
-    body:has([name="read-size"]:checked:nth-child(29)) { --max-read-size-step: 29 }; +    body:has([name="read-size"]:checked:nth-child(28)) { --max-read-size-step: 28 } 
-    body:has([name="read-size"]:checked:nth-child(20)) { --max-read-size-step: 20 }; +    body:has([name="read-size"]:checked:nth-child(29)) { --max-read-size-step: 29 } 
-    body:has([name="read-size"]:checked:nth-child(31)) { --max-read-size-step: 31 }; +    body:has([name="read-size"]:checked:nth-child(20)) { --max-read-size-step: 20 } 
-    body:has([name="read-size"]:checked:nth-child(32)) { --max-read-size-step: 32 }; +    body:has([name="read-size"]:checked:nth-child(31)) { --max-read-size-step: 31 } 
-    body:has([name="read-size"]:checked:nth-child(33)) { --max-read-size-step: 33 }; +    body:has([name="read-size"]:checked:nth-child(32)) { --max-read-size-step: 32 } 
-    body:has([name="read-size"]:checked:nth-child(34)) { --max-read-size-step: 34 }; +    body:has([name="read-size"]:checked:nth-child(33)) { --max-read-size-step: 33 } 
-    body:has([name="read-size"]:checked:nth-child(35)) { --max-read-size-step: 35 }; +    body:has([name="read-size"]:checked:nth-child(34)) { --max-read-size-step: 34 } 
-    body:has([name="read-size"]:checked:nth-child(36)) { --max-read-size-step: 36 }; +    body:has([name="read-size"]:checked:nth-child(35)) { --max-read-size-step: 35 } 
-    body:has([name="read-size"]:checked:nth-child(37)) { --max-read-size-step: 37 }; +    body:has([name="read-size"]:checked:nth-child(36)) { --max-read-size-step: 36 } 
-    body:has([name="read-size"]:checked:nth-child(38)) { --max-read-size-step: 38 }; +    body:has([name="read-size"]:checked:nth-child(37)) { --max-read-size-step: 37 } 
-    body:has([name="read-size"]:checked:nth-child(39)) { --max-read-size-step: 39 }; +    body:has([name="read-size"]:checked:nth-child(38)) { --max-read-size-step: 38 } 
-    body:has([name="read-size"]:checked:nth-child(30)) { --max-read-size-step: 30 };+    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 {     p {
         max-inline-size: calc(calc(50 + var(--max-read-size-step) * 10) * 1ch);         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.1752760505.txt.gz
  • Dernière modification : 2025/07/17 15:55
  • de avillepreux