A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>In Loving Memory of Square Checkbox (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://tonsky.me/blog/checkbox/">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>In Loving Memory of Square Checkbox</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://tonsky.me/blog/checkbox/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-01-28
  72. </p>
  73. </nav>
  74. <hr>
  75. <p>This is a checkbox:</p>
  76. <figure>
  77. <img src="https://tonsky.me/blog/checkbox/checkbox@2x.png?t=1706441704"> </figure>
  78. <p>It’s square, it has a checkmark inside, and its distinguishing feature is that you can select any number of them at the same time:</p>
  79. <figure>
  80. <img src="https://tonsky.me/blog/checkbox/checkboxes@2x.png?t=1706441704"> </figure>
  81. <p>Different operating systems rendered them differently during their evolution:</p>
  82. <figure>
  83. <img src="https://tonsky.me/blog/checkbox/checkbox_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption> </figure>
  84. <figure>
  85. <img src="https://tonsky.me/blog/checkbox/checkbox_os_x_maverics@2x.png?t=1706441704"><figcaption>OS X Mavericks (2013)</figcaption> </figure>
  86. <figure>
  87. <img src="https://tonsky.me/blog/checkbox/checkbox_os_x_leopard@2x.png?t=1706441704"><figcaption>OS X Leopard (2007)</figcaption> </figure>
  88. <figure>
  89. <img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_9@2x.png?t=1706441704"><figcaption>Mac OS 9 (1999)</figcaption> </figure>
  90. <figure>
  91. <img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 7.5 (1994)</figcaption> </figure>
  92. <figure>
  93. <img src="https://tonsky.me/blog/checkbox/checkbox_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption> </figure>
  94. <figure>
  95. <img src="https://tonsky.me/blog/checkbox/checkbox_windows_8@2x.png?t=1706441704"><figcaption>Windows 8 (2012)</figcaption> </figure>
  96. <figure>
  97. <img src="https://tonsky.me/blog/checkbox/checkbox_windows_7@2x.png?t=1706441704"><figcaption>Windows 7 (2009)</figcaption> </figure>
  98. <figure>
  99. <img src="https://tonsky.me/blog/checkbox/checkbox_windows_xp@2x.png?t=1706441704"><figcaption>Windows XP (2001)</figcaption> </figure>
  100. <figure>
  101. <img src="https://tonsky.me/blog/checkbox/checkbox_windows_2000@2x.png?t=1706441704"><figcaption>Windows 2000 (2000)</figcaption> </figure>
  102. <figure>
  103. <img src="https://tonsky.me/blog/checkbox/checkbox_windows_95@2x.png?t=1706441704"><figcaption>Windows 95 (1995)</figcaption> </figure>
  104. <figure>
  105. <img src="https://tonsky.me/blog/checkbox/checkbox_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption> </figure>
  106. <p>As you can see, even the checkmark wasn’t always there. But one thing remained constant: checkboxes were square.</p>
  107. <p>Why square? Because that’s how you can tell them from radio buttons:</p>
  108. <figure>
  109. <img src="https://tonsky.me/blog/checkbox/radiobuttons@2x.png?t=1706441704"> </figure>
  110. <p>Their distinguishing feature is a single choice. If you select one, everything else is de-selected.</p>
  111. <p>I’m not sure when the distinction between square/round was introduced, but it seems to already exist in the 90-s:</p>
  112. <figure>
  113. <img src="https://tonsky.me/blog/checkbox/turbo_pascal@2x.png?t=1706441704"><figcaption>Turbo Pascal 7.0 (1992)</figcaption> </figure>
  114. <figure>
  115. <img src="https://tonsky.me/blog/checkbox/norton_commander_5@2x.png?t=1706441704"><figcaption>Norton Commander 5 (1993)</figcaption> </figure>
  116. <p>(Guess where <code>[x]</code> is used now? In Markdown! What a comeback, huh?)</p>
  117. <p>And since then, every major operating system followed this tradition. From Windows 3.11:</p>
  118. <figure>
  119. <img src="https://tonsky.me/blog/checkbox/radio_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption> </figure>
  120. <p>through Windows 95:</p>
  121. <figure>
  122. <img src="https://tonsky.me/blog/checkbox/radio_windows_95@2x.png?t=1706441704"> </figure>
  123. <p>to Windows 11:</p>
  124. <figure>
  125. <img src="https://tonsky.me/blog/checkbox/radio_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption> </figure>
  126. <p>from Mac OS 4:</p>
  127. <figure>
  128. <img src="https://tonsky.me/blog/checkbox/radio_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 4 (1987)</figcaption> </figure>
  129. <p>till macOS Sonoma:</p>
  130. <figure>
  131. <img src="https://tonsky.me/blog/checkbox/radio_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption> </figure>
  132. <p>There was a brief confusion up until 1986 when Apple used rounded rectangles instead of circles:</p>
  133. <figure>
  134. <img src="https://tonsky.me/blog/checkbox/radio_mac_os_3@2x.png?t=1706441704"><figcaption>Mac OS 3 (1986)</figcaption> </figure>
  135. <p>but it was quickly resolved.</p>
  136. <p>The point is, every major OS vendor has been adhering to the convention that checkboxes are square and radio buttons are round.</p>
  137. <p>Then the Web came. And when I say Web, I mean CSS. And when I say CSS, I mean Flash and then JavaScript.</p>
  138. <p>You see, people on the Web think conventions are boring. That regular controls need to be reinvented and redesigned. They don’t believe there are any norms.</p>
  139. <p>That’s why it’s common to see radio buttons containing checkmarks:</p>
  140. <figure>
  141. <img src="https://tonsky.me/blog/checkbox/twitter@2x.png?t=1706441704"><figcaption>Twitter (2024)</figcaption> </figure>
  142. <p>Or square radio buttons:</p>
  143. <figure>
  144. <img src="https://tonsky.me/blog/checkbox/radio_yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption> </figure>
  145. <p>Following the Web’s example, native apps introduced us to round checkboxes:</p>
  146. <figure>
  147. <img src="https://tonsky.me/blog/checkbox/telegram@2x.png?t=1706441704"><figcaption>Telegram for macOS (2024)</figcaption> </figure>
  148. <p>Sometimes people just don’t make distinctions anymore. For example, here the first group is single-choice, while the second one is multiple-choice:</p>
  149. <figure>
  150. <img src="https://tonsky.me/blog/checkbox/yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption> </figure>
  151. <p>Or here, one of those polls is single-answer, another is multiple-answer:</p>
  152. <figure>
  153. <img src="https://tonsky.me/blog/checkbox/telegram_polls@2x.png?t=1706441704"><figcaption>Telegram Web (2024)</figcaption> </figure>
  154. <p>How are people supposed to know?</p>
  155. <figure>
  156. <img src="https://tonsky.me/blog/checkbox/scooby@2x.jpg?t=1706441704"> </figure>
  157. <p>But despite all this chaos and temptation, operating system vendors knew better. To this day, they follow THE convention: checkboxes are square, radio buttons are round.</p>
  158. <p>Maybe it was part of their internal training. Maybe they had experienced art directors. Maybe it was just luck. I don’t know — it doesn’t really matter — but — somehow — they managed to stick to the convention.</p>
  159. <p>Until this day.</p>
  160. <p>Apple is the first major operating system vendor who had abandoned a four-decades-long tradition. Their new visionOS — for the first time in the history of Apple — will have round checkboxes.</p>
  161. <figure>
  162. <img src="https://tonsky.me/blog/checkbox/checkbox_vision@2x.png?t=1706441704"><figcaption><a href="https://developer.apple.com/design/resources/#visionos-apps" target="_blank">Apple Design Resouces — visionOS — Library</a></figcaption> </figure>
  163. <p>How should we even call these? Radio checks? Check buttons?</p>
  164. <p>Anyway, with Apple’s betrayal, I think it’s fair to say there’s no hope for this tradition to continue.</p>
  165. <p>I therefore officially announce 2024 to be the year when the square checkbox has finally died.</p>
  166. <figure>
  167. <img src="https://tonsky.me/blog/checkbox/rip@2x.jpg?t=1706441704"> </figure>
  168. <p>Kids these days will use a toggle anyway.</p>
  169. </article>
  170. <hr>
  171. <footer>
  172. <p>
  173. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  174. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  175. </svg> Accueil</a> •
  176. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  177. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  178. </svg> Suivre</a> •
  179. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  181. </svg> Pro</a> •
  182. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  183. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  184. </svg> Email</a> •
  185. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  186. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  187. </svg> Légal</abbr>
  188. </p>
  189. <template id="theme-selector">
  190. <form>
  191. <fieldset>
  192. <legend><svg class="icon icon-brightness-contrast">
  193. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  194. </svg> Thème</legend>
  195. <label>
  196. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  197. </label>
  198. <label>
  199. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  200. </label>
  201. <label>
  202. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  203. </label>
  204. </fieldset>
  205. </form>
  206. </template>
  207. </footer>
  208. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  209. <script>
  210. function loadThemeForm(templateName) {
  211. const themeSelectorTemplate = document.querySelector(templateName)
  212. const form = themeSelectorTemplate.content.firstElementChild
  213. themeSelectorTemplate.replaceWith(form)
  214. form.addEventListener('change', (e) => {
  215. const chosenColorScheme = e.target.value
  216. localStorage.setItem('theme', chosenColorScheme)
  217. toggleTheme(chosenColorScheme)
  218. })
  219. const selectedTheme = localStorage.getItem('theme')
  220. if (selectedTheme && selectedTheme !== 'undefined') {
  221. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  222. }
  223. }
  224. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  225. window.addEventListener('load', () => {
  226. let hasDarkRules = false
  227. for (const styleSheet of Array.from(document.styleSheets)) {
  228. let mediaRules = []
  229. for (const cssRule of styleSheet.cssRules) {
  230. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  231. continue
  232. }
  233. // WARNING: Safari does not have/supports `conditionText`.
  234. if (cssRule.conditionText) {
  235. if (cssRule.conditionText !== prefersColorSchemeDark) {
  236. continue
  237. }
  238. } else {
  239. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  240. continue
  241. }
  242. }
  243. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  244. }
  245. // WARNING: do not try to insert a Rule to a styleSheet you are
  246. // currently iterating on, otherwise the browser will be stuck
  247. // in a infinite loop…
  248. for (const mediaRule of mediaRules) {
  249. styleSheet.insertRule(mediaRule.cssText)
  250. hasDarkRules = true
  251. }
  252. }
  253. if (hasDarkRules) {
  254. loadThemeForm('#theme-selector')
  255. }
  256. })
  257. </script>
  258. </body>
  259. </html>