davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Je n’ai pas eu le temps de faire plus court. (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.affordance.info/mon_weblog/2021/11/le-temps-de-faire-pus-court.html">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Je n’ai pas eu le temps de faire plus court.</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.affordance.info/mon_weblog/2021/11/le-temps-de-faire-pus-court.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>La question des formats sur le web est une chose fascinante. Comprendre l'émergence hier de Vine, et aujourd'hui de TikTok, c'est plonger dans l'histoire du web. De ce qui mena des premières pages "homepages" à la "statusphère" en passant par l'âge d'or puis le déclin des blogs (<a href="https://archivesic.ccsd.cnrs.fr/sic_00586027v2/document" rel="noopener" target="_blank">mon tout premier livre paru en 2008</a> ...) mais aussi l'imposition de la vidéo comme outil de captation attentionnelle semblant aujourd'hui indépassable.  </p>
<p><strong>Au commencement du web n'était que le texte</strong>. Les premiers navigateurs ne lisaient pas les images et dès que les images furent lues, il fallait de longues minutes avant de charger, ligne à ligne, un Gif mal dégrossi d'à peine quelques dizaines de kilos octets. Au commencement, donc, n'était que le texte. A l'époque déjà, on conversait pas mal sur IRC, l'ancêtre des Messenger et WhatsApp d'aujourd'hui. Et sur nos pages personnelles, sur nos "Homepages", si l'on pouvait faire long on se contentait bien souvent de faire court. Tout le monde faisait court. Les premières pages web des premiers sites marchands ou institutionnels en ligne se contentaient de courts paragraphes en texte noir sur fond gris. Avec parfois mais rarement, mais péniblement, quelques images en basse définition que l'on prenait des heures à regarder charger. <em><strong>Le format c'est le texte.</strong></em></p>
<p><strong>Au commencement du web c'était l'attente.</strong> On attendait. On attendait du texte. On attendait que les pages se chargent. On attendait que les images s'affichent. On attendait que la page suivant arrive. On attendait beaucoup. Et l'on était content lorsque l'attente cessait et que le texte s'affichait. Les débits augmentant (très très très mollement) et les forfaits des FAI (fournisseurs d'accès) devenant presque raisonnables (on parle quand même de plus de 30 euros par mois pour les premiers forfaits "illimités" avant quoi on était sur l'équivalent de 5 euros de l'heure !), on s'offrait la joie de payer pour poireauter. <strong><em>Le format c'était l'attente.</em></strong></p>
<p><strong>Petit à petit, tels des pionniers de canapé, quelque-un.e.s se lancèrent dans la création de leurs pages personnelles.</strong> Le web, ce web là en tout cas, devint une féérie chatoyante de mauvais goûts entremêlés où chacun se racontait sans se dire. <em><strong>Le format c'était le mauvais goût chatoyant et les premiers gifs animés jusqu'à la nausée.</strong></em></p>
<p><strong>Et puis il y eut, <a href="https://archivesic.ccsd.cnrs.fr/sic_00586027v2/document" rel="noopener" target="_blank">l'arrivée et l'explosion des blogs</a>.</strong> Nous sommes début 2002. Les blogs et les premières 'plateformes' (Typepad, Live Journal, Blogger, etc.) c'est la possibilité de faire long sans avoir pour autant à se coller la nécessité du code HTML et de l'hébergement via FTP. Vous vous souvenez du FTP ? Le "File Transfer Protocol" qui faisait de chacun de nous des Franc Tireurs et Partisans de l'avènement d'un web où <a href="https://www.laquadrature.net/2009/10/16/ecransfr-l-imprimerie-a-permis-au-peuple-de-lire-internet-va-lui-permettre-d-ecrire-benjamin-bayart/" rel="noopener" target="_blank">chacun, enfin, allait pouvoir écrire</a>. Si dès le début des blogs l'empan scriptural ne souffre théoriquement plus aucune limite y compris technique, les blogs vont pourtant s'affirmer comme la forme d'une nouvelle brièveté, une brièveté ante-chronologique : il y a des journaux intimes et puis il y a tout le reste, les experts, les anonymes, les blogueurs influents, esquisse des actuels influenceurs. Sur les blogs on <em>partage</em>, et oui, déjà, on <em>partage</em> des étonnements, des choses lues, des images, et des liens, beaucoup de liens. <em><strong>Le format c'est le partage et l'expression de soi.</strong></em> Cela paraît peut-être anecdotique mais pour la première fois, un média, le web, devient saturé d'intime et d'expressions privées. Ce n'est pas anecdotique.</p>
<p><strong>Youtube est créé en 2005 et racheté par Google en 2006.</strong> Lorsque c'est la vidéo qui devient le format de référence pour celles et ceux soucieux de conquêtes attentionnelles toujours plus vastes, la vidéo est souvent courte. En 2004 la 3G a débarqué en France. On peut commencer à naviguer en haut débit (pour l'époque) y compris sur des ressources et des formats excessivement gourmands en débit. Le streaming encore balbutiant au début des années 2000 va prendre définitivement son essor. En 2007 débarque le premier iPhone. 3G + smartphone + vidéo : plus rien, sur le web, ne sera jamais comme avant. <strong>Le format c'est du lourd.</strong> Lourd en poids, lourd en débit, lourd en équipement. </p>
<p><strong>Faire court c'est aussi le format imposé par les réseaux sociaux</strong>, Facebook en 2004 et Twitter en 2007. On ne publie plus des contenus, on publie des "statu(t)s", des "états" (d'âme) des "positions" (géographiques), on "dit" (ce qu'on écoute, ce qu'on regarde, etc.). En un nombre de signes limité : 140 pour Twitter, <a href="https://affordance.typepad.com/mon_weblog/2011/12/extension-du-domaine-de-la-statusphere.html" rel="noopener" target="_blank">160 sur Facebook</a>, avant extension (à 280 pour le premier, à ... 63 000 pour le second). <em><strong>Le format c'est "hic et nunc"</strong></em> : où je suis, ce que je fais, dans quel état, à quel endroit. <strong>Ici et maintenant et recommencement</strong>. Mais le web, fut-il celui des plateformes ne saurait être un étroit. Alors on ouvre et l'on peut insérer et partager des sons et des images, et comme par compensation de ce texte empêché en longueur, on peut en longueur "s'actualiser", et puis regarder les autres s'actualisant.</p>
<p>Vous vous souvenez du web où le format c'était l'attente ? Et bien on continue d'attendre. Mais on attend les autres cette fois, et non pas les pages. Et puisque c'est l'autre que l'on attend, et puisque l'on ne paie presque plus pour attendre, alors on ne supporte presque plus ... de l'attendre. Après la navigation, après la publication, <strong>le nouveau format c'est l'injonction</strong>. Cela peut paraître anecdotique, mais pour la première fois avec Facebook en 2004, on nous demande de dire quelque chose. C'est tout sauf anecdotique.  </p>
<p><strong>Le format c'est aussi celui du droit.</strong> Derrière chaque évolution, texte, image, vidéo, il y a des questions de droit. Des droits. Des droits d'auteur notamment. Alors <a href="https://scinfolex.com/2013/06/22/pourquoi-les-videos-font-six-secondes-sur-vine-et-pourquoi-facebook-prend-un-vrai-risque-en-passant-a-15/" rel="noopener" target="_blank">faire court ce fut aussi un temps, s'affranchir de risques de poursuite dans une économie du remix mondialisée</a>. A moindre coût. A moindre court. A moindre frais.</p>
<p><strong>Dans la capsule.</strong> C'est la dernière étape. Jusqu'à ce jour en tout cas. Complémentaire des précédentes. Le temps qui est celui de "l'encapsulage" et qui préfigure les médias sociaux mainstream actuels. Progressivement, la capacité comme la nécessité de faire lien, de déployer des hyperliens, cette capacité s'amenuise alors qu'il devient de plus en plus facile "d'encapsuler" un contenu dans un autre. On ne renvoie plus vers un ailleurs, on ramène vers un "à soi". Les "widgets", les <a href="https://affordance.typepad.com/mon_weblog/2006/06/mise_en_abyme_b.html" rel="noopener" target="_blank">trucs rigolos genre "Bitty Browser"</a>, Netvibes bien sûr en 2005, et plus globalement la page web, cette entité documentaire première <a href="https://affordance.typepad.com/mon_weblog/2011/03/de-quoi-page-web-est-le-nom.html" rel="noopener" target="_blank">qui ne cesse de se fracturer, de se fragmenter</a>. Or lorsque l'on arrête d'adresser des externalités, lorsque l'on ne fait plus qu'établir des internalités supposées se suffire à elles-mêmes, on cesse alors progressivement de naviguer, on s'habitue à faire défiler. Les réseaux sociaux arrivent et se déploient massivement dans ce contexte d'usage qui les précède et les prépare en un sens. Ils n'ont alors qu'à achever d'alléger la tâche d'encapsulage dans sa charge technique et cognitive, ils n'ont qu'à la rendre fluide pour qu'elle s'impose. </p>
<p><strong>Le rêve du web est mort.</strong> Il n'est plus question <a href="https://www.affordance.info/mon_weblog/2012/12/le-web-promesse-tenue.html" rel="noopener" target="_blank">d'un Homme, d'une page et d'une adresse</a>, mais que toute l'humanité (connectée) réside à la même adresse, qu'à cette adresse on ne trouve qu'une seule et même page changeant et se rechargeant tout le temps, et que, selon les âges de la vie, comme dans l'énigme du Sphinx, cette page s'appelle Tik-Tok, Instagram ou Facebook. L'énigme du Sphinx vraiment, presque littéralement : </p>
<blockquote>
<p><em>"Quel être, pourvu d'une seule voix, a d'abord quatre jambes le matin, puis deux jambes le midi, et trois jambes le soir ?"</em></p>
</blockquote>
<p>Le corps à 4 membres sur TikTok, 4 membres qui dansent. Deux jambes sur Instagram, celles de l'adolescence, de l'autonomie que l'on se construit dans le regard des autres, des siens, des "comme soi" ou des "comment l'on voudrait être soi". Et puis Facebook le soir, toujours nos deux jambes et cette canne conversationnelle, cette béquille cognitive.</p>
<p>Ce n'est pas la taille, c'est le temps qui compte. <strong>Durant toutes ces années, la question de la durée de ce que l'on partage est devenue secondaire, derrière la question du temps nécessaire pour établir ce partage</strong> ; question elle-même reléguée à l'arrière-plan de celle du temps qu'occupera la publicité dans la durée du partage comme du visionnage. Avez-vous remarqué qu'il n'est pas rare aujourd'hui de passer davantage de temps à regarder la ou les publicités conditionnant l'accès à un contenu que ce contenu lui-même ? Mais dans la cour principale des plateformes, l'essentiel demeure de faire court. <strong>Le format c'est la vitesse.</strong> Il faut publier vite. Il faut partager vite. Il faut visionner vite. Il faut vite passer au visionnage suivant. On attend toujours, mais on n'attend plus des pages, on n'attend plus des gens, <strong>on attend que se maintienne un rythme</strong>, une cadence, un enchaînement, <a href="https://recherche.esad-pyrenees.fr/phonecinema/sommaire/d-une-boucle-l-autre-tiktok-et-l-algo-ritournelle-performer-entre-rage-et-ennui-en-temps-de-pandemie" rel="noopener" target="_blank">une ritournelle</a>. </p>
<p><strong>Longtemps chacun cherchait son court.</strong> Un court billet de blog à lire. Une courte vidéo à regarder. Chacun cherchait son court mais chacun suivait son lien. Il y avait bien sûr déjà des attracteurs étranges qui l'on n'appelait pas encore "influenceurs", <a href="http://embruns.net/" rel="noopener" target="_blank">le capitaine Gloasguen d'Embruns</a> et quelques autres ; mais il n'y avait aucun mur sur l'océan et surtout il n'y avait aucune autre relance automatique que celle de notre propre curiosité ou du coût cognitif permettant de pallier notre ennui de surfeur dilettante en allant chercher un dernier lien, pour la route. </p>
<p>Tout est question de rythme. Sur le web et les plateformes aussi. 120 battements par minute pour la House des années 1990, celle des débuts du web. Et 24 images par seconde pour le cinéma. Et sur le web, tant d'autres formats. Mais toujours plus courts, 10 secondes, 15 secondes mais <a href="https://www.youlovewords.com/reseaux-sociaux-quels-formats-pour-vos-videos/#:~:text=Tous%20les%20formats%20vid%C3%A9o%20sur%20Facebook%20ont%20une%20limite%20d,%C3%AAtre%20encod%C3%A9s%20en%20codec%20H." rel="noopener" target="_blank">avec le plus souvent non plus 24 mais 30 images par seconde</a> (comme le réclame la norme <a href="https://fr.wikipedia.org/wiki/Images_par_seconde" rel="noopener" target="_blank">NTSC</a> en vigueur aux USA). Comme le nombre de signes de la statusphère, dire toujours plus mais avec toujours moins de texte. Des vidéos toujours plus courtes mais avec toujours plus d'images.</p>
<p>"<em>Less is More</em>" écrivait et prônait l'architecte Mies Van Der Rohe. Il ne s'agit plus ici d'une forme d'épure, mais d'une recherche de tout ce qui sature. </p>
<p>Comme une contraction, un Big Crunch qui serait en cours plus de 30 ans après le Big Bang initial du web ; comme si nous étions au coeur de cette contraction sans savoir ce qui en sortira vraiment : un métavers, un tyran populiste, ou le compte TikTok d'un tyran populiste dans le métavers. </p>
<p>Comme chercheur, comme enseignant, comme parent, comme usager du web, je regarde ce temps passé à dilater du pouce ou de l'index des fragments signifiants d'insignifiance. Ces distractions. Souvent seulement vues uniquement comme des "dys-tractions", des anomalies de ce qui nous meut, de ce qui nous tire et nous attire ; distractions et dys-tractions qui, si elles en sont souvent, ne sont pas uniquement cela. Regarder et essayer de comprendre ce qui s'y invente, ce qui s'y déploie, et ceux qui s'y replient, aussi. A se demander où est la fiction pour sortir de l'affliction.</p>
<p><strong>Jamais autant de gens n'ont raconté autant d'histoires. Et jamais autant d'histoires n'ont été aussi semblables.</strong> Communes ritournelles. La question est de savoir ce qui reste de la capacité de fiction quand toutes les histoires se publient sans friction et quand seules les frictions semblent capables de "faire  histoire" dans le débat public. </p>
<p>La forme courte, les formes courtes ont toujours été présentes dans nos espaces sociaux, dans nos espaces publics, dans nos horizons culturels : litotes, métonymies, syllogismes, haïkus, apophtegmes, aphorismes, épigrammes, maximes, proverbes, feuilletons et aujourd'hui séries ... Les formes narratives, poétiques ou même rhétoriques courtes ont toujours été un essentiel de nos sociétés. Elles sont aujourd'hui au coeur de l'essentiel de nos usages numériques.</p>
<p>Des brièvetés en concurrence comme en co-occurence : celle de la série qui se déploie dans la longueur des saisons qui la composent ; celle du Tweet qui s'articule en Thread ou se déploie sans le défilement infini des autres gazouillis ; celle de la vidéo TikTok de 15 secondes qui fait collection au milieu d'autres dont le visionnage nécessiterait bien plus qu'une seule vie. </p>
<p>Faire court. Imiter le court. Reproduire le court. Faire rythme. Ce défilement est avant tout un battement, une pulsation. <strong>Le format aujourd'hui c'est la pulsation</strong>. C'est pourquoi il importe de savoir comment en contrôler la vitesse. La vitesse de ces enchaînements déterminés algorithmiquement dans le seul but de fabriquer des routines d'aliénation scopique, cette capacité à ne valoriser le court que tant qu'il concourt à fabriquer de l'artificiellement long en continu, ce refus total et programmatique du discontinu, cela interroge aujourd'hui notre capacité plus globale, plus politique, à nous confronter à des régimes narratifs nécessitant d'articuler le temps long comme autre chose que la simple agrégation de séquences courtes.  </p>
<p>Je regardais mes étudiant.e.s faisant défiler leur compte TikTok. Je regardais mes enfants faire de même. J'avais envie d'écrire un billet. Je n'ai pas eu le temps de faire plus court. </p>
<p>"<em>Je n'ai fait [cette lettre] plus longue que parce que je n'ai pas eu le loisir de la faire plus courte.</em>"<br>Blaise Pascal, Les Provinciales, lettre 16.</p>
<p>Imaginer ce monde où un autre Blaise Pascal écrirait aujourd'hui :</p>
<blockquote>
<p><em>"Je n'ai fait ce Tweet plus court que parce que je n'ai pas eu le loisir de le faire plus long."</em> </p>
</blockquote>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>