A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  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>Plus vite, plus haut … plus de vues. (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. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://www.affordance.info/mon_weblog/2021/08/plus-vite-plus-haut-plus-de-vues.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Plus vite, plus haut … plus de vues.</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.affordance.info/mon_weblog/2021/08/plus-vite-plus-haut-plus-de-vues.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <h2>Plus vite, plus haut, plus fort.</h2>
  71. <p>C'est la <a href="https://fr.wikipedia.org/wiki/Devise_olympique" rel="noopener" target="_blank">devise de l'olympisme moderne</a>. En latin : "Citius, Altius, Fortius". Depuis 2021 le CIO a d'ailleurs ajouté "ensemble" ('communiter'). Les jeux Olympiques de l'été 2021, au Japon et en pleine pandémie (sans public donc, jeux "olympidémiques"), se sont achevés en France sur la polémique de la non reconduction du Karaté comme discipline olympique à Paris 2024 au profit, de disciplines "<a href="https://www.franceinter.fr/sports/plus-de-karate-a-paris-en-2024-tony-estanguet-veut-des-sports-qui-cartonnent-sur-les-reseaux-sociaux" rel="noopener" target="_blank"><em>qui cartonnent sur les réseaux sociaux</em></a>" pour reprendre les mots de Tony Estanguet, ancien athlète multi-médaillé, membre du CIO et président du comité d'organisation des jeux de Paris 2024.</p>
  72. <p>Le <a href="https://www.francetvinfo.fr/les-jeux-olympiques/karate/video-pas-de-karate-aux-jo-de-paris-2024-tony-estanguet-prefere-des-sports-qui-cartonnent-sur-les-reseaux-sociaux_4732283.html" rel="noopener" target="_blank">verbatim complet de son interview à France Info est le suivant</a> : </p>
  73. <blockquote>
  74. <p>"<em>En allant chercher des sports urbains comme le skateboard et le break dance, on va chercher des sports qui cartonnent sur les réseaux sociaux et que les jeunes regardent énormément. Le surf et l’escalade apportent une dimension très spectaculaire et différente des sports déjà au programme."</em></p>
  75. </blockquote>
  76. <p>Surf, escalade, skateboard et breakdance donc. Mais pas de Karaté. La devise de Paris 2024 sera donc "Plus vite, plus haut, plus de vues". Citius, Altius, Visius.</p>
  77. <h2>Plus vite, plus haut, plus de vues, et (toujours) plus de polémiques.</h2>
  78. <p>En plus des polémiques conjoncturelles de chaque Olympiade liées entre autre à la situation géopolitique ou à des questions de dopage (<a href="https://www.franceinter.fr/sports/jo-de-tokyo-pourquoi-des-athletes-concourent-avec-les-anneaux-olympiques-plutot-que-leur-drapeau-national" rel="noopener" target="_blank">ou les 2 comme avec une partie de ces athlètes "apatrides"</a>), les JO sont depuis longtemps l'enjeu de scandales plus structurels. La question du pays hôte est le principal d'entre eux : dès lors qu'il s'agit d'un pays à la démocratie fragile ou absente (on citera pêle-mêle la Russie, la Chine, etc ...) ou même simplement économiquement instable et fragile (le Brésil) on observe - entre autres - une extrême violence et une grande précarité dans la vie des travailleurs exploités chargés de construire les infrastructures. Sans même avoir besoin de parler du désastre écologique de ces installations pharaoniques construites pour l'occasion et souvent ensuite laissées à l'abandon. Ou du moment gênant ou <a href="https://information.tv5monde.com/info/rio-2016-quand-jeux-paralympiques-riment-avec-polemiques-126910" rel="noopener" target="_blank">l'organisation des jeux de Rio se mit à piquer dans la caisse des jeux paralympiques pour renflouer celle ... des jeux olympiques</a>.</p>
  79. <p>L'autre grand scandale des Olympiades se joue au niveau du langage, au niveau de la langue elle-même. Lionel Maurel l'a souvent et brillamment chroniqué sur son blog. Dès 2012 en rappelant <a href="https://scinfolex.com/2012/07/27/comment-la-propriete-intellectuelle-a-transforme-les-jeux-olympiques-en-cauchemar-cyberpunk/" rel="noopener" target="_blank">comment les jeux olympiques de Londres s'étaient transformés en cauchemar cyberpunk</a>, en s'attaquant à la possibilité même de la langue via le cheval de Troie de la propriété intellectuelle et du droit des marques. Extrait : </p>
  80. <blockquote>
  81. <p><em>"Pour les JO de Londres, le CIO est parvenu à se faire transférer certains droits régaliens par l’Etat anglais, mais les romanciers de la vague cyberpunk n’avaient pas prévu que c’est par le biais de la propriété intellectuelle que s’opérerait ce transfert de puissance publique. (...) </em><em>L’Olympics Game Act met en place une véritable police du langage (...). Il est par exemple interdit d’employer dans une même phrase deux des mots "jeux", "2012", "Twenty Twelve", "gold", "bronze" ou "medal". Pas question également d’utiliser, modifier, détourner, connoter ou créer un néologisme à partir des termes appartenant au champ lexical des Jeux. Plusieurs commerces comme l’Olympic Kebab, l’Olympic Bar ou le London Olympus Hotel ont été sommés de changer de noms sous peine d’amendes.</em></p>
  82. <p><em>L’usage des symboles des jeux, comme les anneaux olympiques, est strictement réglementé. Un boulanger a été obligé d’enlever de sa vitrine des pains qu’il avait réalisés en forme d’anneaux ; une fleuriste a subi la même mésaventure pour des bouquets reprenant ce symbole et une grand-mère a même été inquiétée parce qu’elle avait tricoté pour une poupée un pull aux couleurs olympiques, destiné à être vendu pour une action de charité !</em></p>
  83. <p><em>Cette règle s’applique aussi strictement aux médias, qui doivent avoir acheté les droits pour pouvoir employer les symboles et les termes liées aux Jeux. N’ayant pas versé cette obole, la chaîne BFM en a été ainsi réduite à devoir parler de "jeux d’été" pour ne pas dire "olympiques". Une dérogation légale existe cependant au nom du droit à l’information pour que les journalistes puissent rendre compte de ces évènements publics. Mais l’application de cette exception est délicate à manier et le magazine The Spectator a été inquiété pour avoir détourné les anneaux olympiques sur une couverture afin d’évoquer les risques de censure découlant de cet usage du droit des marques. Cet article effrayant indique de son côté que plusieurs firmes anglaises préfèrent à titre préventif s’autocensurer et dire "The O-word" plutôt que de se risquer à employer le terme "Olympics"."</em></p>
  84. </blockquote>
  85. <p>On pourra aussi <a href="https://scinfolex.com/2017/10/09/les-jeux-olympiques-de-paris-sombreront-ils-dans-la-folie-de-la-propriete-intellectuelle/" rel="noopener" target="_blank">relire son article de 2017 à propos de l'obtention par Paris des JO de 2024</a>, visionner le remarquable <a href="https://www.youtube.com/watch?v=YYgy2lEbFmc&amp;t=2s" rel="noopener" target="_blank">documentaire de Datagueule daté de 2016 "Le JO : un esprit plus si sain dans un corset"</a>, et garder en mémoire la phrase glaçante et prémonitoire de l'historien <a href="https://www.lemonde.fr/jeux-olympiques/article/2012/07/24/a-londres-le-cio-joue-a-big-brother-au-service-de-ses-sponsors_1735959_1616891.html" rel="noopener" target="_blank">Patrick Clastres dans une interview au journal Le Monde en 2012</a> : </p>
  86. <blockquote>
  87. <p>"<em>Le CIO a besoin d’une dictature ou d’un pays ultra-libéral pour imposer ses règles.</em>"</p>
  88. </blockquote>
  89. <h2>Du pain et <span>des jeux</span> des vues.</h2>
  90. <p>Pendant que Tony Estanguet, le président du comité d'organisation des jeux de Paris 2024, explique donc vouloir donner la priorité aux disciplines "<em>qui cartonnent sur les réseaux sociaux</em>", on apprend <a href="https://www.lefigaro.fr/sports/jeux-olympiques/jo-la-nageuse-francaise-melanie-henique-privee-de-maillots-de-bain-car-pas-assez-populaire-sur-instagram-20210809" rel="noopener" target="_blank">la mésaventure de la capitaine de l'équipe de France de natation présente aux jeux de Tokyo</a> : </p>
  91. <blockquote>
  92. <p>"<em>Avant les Championnats d'Europe disputés au mois de mai où elle terminera 2e (sur 50m papillon), Mélanie Henique, capitaine de l'équipe de France de natation, a demandé à son équipementier de reconduire d'un an son contrat qui se terminait fin 2020 pour qu'elle ne change pas de maillot trois ou quatre mois avant les Jeux olympiques car c'est toujours compliqué de changer d'équipementier pour des questions de repères. C'est un contrat de dotation de produits, juste pour avoir quelques maillots de bain, a raconté sur RMC Sophie Kamoun. On lui a répondu : "on te reconduira ton contrat pour un an supplémentaire quand tu auras 10.000 followers sur Instagram''.</em>"</p>
  93. </blockquote>
  94. <p>La suite de l'histoire raconte qu'<a href="https://www.leparisien.fr/sports/JO/certaines-marques-preferent-un-sportif-influenceur-plutot-quun-medaille-olympique-sophie-kamoun-sinsurge-apres-laffaire-melanie-henique-09-08-2021-VAPWMNG7ONCFBP3S4CEF2XF7R4.php" rel="noopener" target="_blank">elle a du emprunter un maillot à une autre nageuse pour les jeux</a>.</p>
  95. <p>Le principal atout des systèmes toxiques est celui de leur cohérence intrinsèque. Qui peut-être reformulé comme suit : s'il faut aller chercher des disciplines qui cartonnent sur les réseaux sociaux, alors il faut que les représentants de ces disciplines cartonnent également en nombre d'abonnés. Et <a href="https://www.leparisien.fr/sports/JO/certaines-marques-preferent-un-sportif-influenceur-plutot-quun-medaille-olympique-sophie-kamoun-sinsurge-apres-laffaire-melanie-henique-09-08-2021-VAPWMNG7ONCFBP3S4CEF2XF7R4.php" rel="noopener" target="_blank">si l'on préfère des sportifs qui cartonnent sur les réseaux sociaux à des sportifs capables de gagner des médailles olympiques</a>, alors il faudra sans cesse aller chercher des sports parce qu'ils cartonnent sur les réseaux sociaux. On ne parle ici plus du tout de sport mais seulement de marketing et d'influence.</p>
  96. <p>N'étant ni totalement idiot ni d'ailleurs de quelque manière que ce soit spécialiste des contrats de sponsoring sportif, j'imagine bien sûr que les différents équipementiers n'ont pas attendu les déclarations de Tony Estanguet pour ajouter des clauses ou des primes de notoriété dans les contrats de sponsoring des athlètes. Mais cela me rappelle un peu, dans un autre genre bien sûr, le cynisme mortifère du "Mercy Market", ce <a href="https://affordance.typepad.com/mon_weblog/2017/04/toucher-les-fonds.html" rel="noopener" target="_blank">marché de la pitié dans lequel pour bénéficier de dons permettant d'accéder à des soins y compris vitaux, il ne suffit plus d'être malade, il faut en plus être populaire</a>. <strong>Aujourd'hui pour être un athlète de haut niveau, il semble qu'il ne soit plus suffisant d'être bon, il faut aussi être populaire.</strong></p>
  97. <p>Que certains sportifs soient des influenceurs en capacité de monnayer leur image est une chose. Mais que pour une grande majorité d'entre eux on subordonne leur capacité de vivre (souvent assez mal) de leur sport à leur capacité d'être des influenceurs, est tout à fait désolant, <em>a fortiori</em> dans le cadre encore un peu particulier qui est celui de l'olympisme moderne.</p>
  98. <h2>Le corps des athlètes. Et les réseaux sociaux.</h2>
  99. <p>Les olympiades, et le sport en général, sont du côté des spectateurs, au moins autant une fascination de la performance qu'une contemplation des corps. Une pulsion scopique qui comporte à l'évidence une part de voyeurisme, de sexualisation et d'érotisation assumée autant qu'héritée.</p>
  100. <blockquote>
  101. <p>"<em>Pourquoi les athlètes étaient-ils nus ? Les historiens s'arrachent encore les cheveux face à cette énigme. La nudité est pourtant au centre de l'olympisme ancien. Le mot gymnase vient de gymnos, "nu". Selon la légende, cette pratique remonterait à Orsippos, qui avait perdu son pagne en courant et emporté l'épreuve, en -720. Les historiens penchent vers une explication plus simple : les JO avaient une dimension religieuse mais aussi érotique. L'huile rendait les athlètes plus beaux. Les gymnases, fréquentés par l'élite, étaient des lieux où les hommes pouvaient venir se rincer l'oeil ou draguer de beaux éphèbes.</em>" <a href="https://www.liberation.fr/culture/2004/08/07/boston-a-jeux-nus_488578/" rel="noopener" target="_blank">Pascal Riché dans Libération en 2004</a>.</p>
  102. </blockquote>
  103. <p>Des représentations d'athlètes nus lors des olympiades antiques à la victoire de Cathy Freeman en combinaison intégrale à Sydney en 2000, en passant par la <a href="https://rmcsport.bfmtv.com/volley/le-bikini-n-est-plus-mini-dans-le-beach-volley_AN-201203280133.html" rel="noopener" target="_blank">grande histoire du string de Beach-Volley</a>, dès lors qu'il s'agit de corps féminins (bah oui ...) l'histoire de l'olympisme moderne est aussi une histoire de la place accordée ou tolérée au corps des athlètes (essentiellement féminines donc) en termes de dévoilement nécessaire, esthétique,  marketing ... ou les trois à la fois.</p>
  104. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0282e1190497200b-pi"><img alt="Capture d’écran 2021-08-15 à 12.17.54" class="asset asset-image at-xid-6a00d8341c622e53ef0282e1190497200b img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0282e1190497200b-500wi" title="Capture d’écran 2021-08-15 à 12.17.54"></a></p>
  105. <p>Tokyo 2020 fut encore l'occasion d'un grand nombre de <a href="https://www.france24.com/fr/sports/20210723-tokyo-2021-la-tenue-des-athl%C3%A8tes-f%C3%A9minines-un-combat-pol%C3%A9mique" rel="noopener" target="_blank">ces polémiques bien plus genrées que simplement vestimentaires</a>.  </p>
  106. <p>La question que je souhaitais poser en démarrant cet article s'articule donc autour des points suivants.  </p>
  107. <p>D'une part, le CIO et les comités d'organisation des jeux olympiques modernes se mettent explicitement en quête de sports et de disciplines olympiques "<em>qui cartonnent sur les réseaux sociaux</em>".</p>
  108. <p>D'autre part, le sponsoring sportif et les équipementiers multiplient les clauses de "popularité" et contraignent les sportifs et sportives à cartonner sur les réseaux sociaux ou à dégrader leurs performances (faute d'équipements ou de revenus financiers) et la possibilité même d'exercer leur sport indépendamment de tout critère d'excellence sportive.</p>
  109. <p>Sachant alors l'immensité des problèmes que la représentation des corps, notamment féminins et/ou n'entrant pas dans certains standards, pose précisément sur les réseaux sociaux qui cartonnent, n'y a-t-il pas un risque clair, manifeste et évident d'ajouter à l'Olympisme moderne une autre tyrannie et une autre entrave que celle de l'argent : celle d'une normalisation de "l'acceptable qui cartonne" laissée à l'entière discrétion de ces mêmes réseaux sociaux ?   </p>
  110. <p>Je le citais plus haut, "<em>le CIO a besoin d’une dictature ou d’un pays ultra-libéral pour imposer ses règles</em>", il est à craindre que les réseaux sociaux offrent à l'olympisme du 21ème siècle et au sport en général, la seule dictature ultra-libérale permettant d'accroître encore le modèle économique toxique sur lequel ils reposent désormais ... presqu'entièrement. </p>
  111. </article>
  112. <hr>
  113. <footer>
  114. <p>
  115. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  117. </svg> Accueil</a> •
  118. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  120. </svg> Suivre</a> •
  121. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  123. </svg> Pro</a> •
  124. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  125. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  126. </svg> Email</a> •
  127. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  129. </svg> Légal</abbr>
  130. </p>
  131. <template id="theme-selector">
  132. <form>
  133. <fieldset>
  134. <legend><svg class="icon icon-brightness-contrast">
  135. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  136. </svg> Thème</legend>
  137. <label>
  138. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  139. </label>
  140. <label>
  141. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  142. </label>
  143. <label>
  144. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  145. </label>
  146. </fieldset>
  147. </form>
  148. </template>
  149. </footer>
  150. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  151. <script>
  152. function loadThemeForm(templateName) {
  153. const themeSelectorTemplate = document.querySelector(templateName)
  154. const form = themeSelectorTemplate.content.firstElementChild
  155. themeSelectorTemplate.replaceWith(form)
  156. form.addEventListener('change', (e) => {
  157. const chosenColorScheme = e.target.value
  158. localStorage.setItem('theme', chosenColorScheme)
  159. toggleTheme(chosenColorScheme)
  160. })
  161. const selectedTheme = localStorage.getItem('theme')
  162. if (selectedTheme && selectedTheme !== 'undefined') {
  163. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  164. }
  165. }
  166. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  167. window.addEventListener('load', () => {
  168. let hasDarkRules = false
  169. for (const styleSheet of Array.from(document.styleSheets)) {
  170. let mediaRules = []
  171. for (const cssRule of styleSheet.cssRules) {
  172. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  173. continue
  174. }
  175. // WARNING: Safari does not have/supports `conditionText`.
  176. if (cssRule.conditionText) {
  177. if (cssRule.conditionText !== prefersColorSchemeDark) {
  178. continue
  179. }
  180. } else {
  181. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  182. continue
  183. }
  184. }
  185. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  186. }
  187. // WARNING: do not try to insert a Rule to a styleSheet you are
  188. // currently iterating on, otherwise the browser will be stuck
  189. // in a infinite loop…
  190. for (const mediaRule of mediaRules) {
  191. styleSheet.insertRule(mediaRule.cssText)
  192. hasDarkRules = true
  193. }
  194. }
  195. if (hasDarkRules) {
  196. loadThemeForm('#theme-selector')
  197. }
  198. })
  199. </script>
  200. </body>
  201. </html>