A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 29KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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>
  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>Trump’s Executive Order Isn’t About Twitter (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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://www.theatlantic.com/technology/archive/2020/05/trumps-executive-order-isnt-about-twitter/612349/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Trump’s Executive Order Isn’t About Twitter</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.theatlantic.com/technology/archive/2020/05/trumps-executive-order-isnt-about-twitter/612349/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>As the United States enters a pandemic summer, with more than 100,000 Americans already dead, and as tear gas engulfed Minneapolis last night, following protests after yet another killing of a black man by a police officer, the president tweeted that the “shooting starts” when the “looting starts.” The tweet echoed <a href="https://www.nbcnews.com/politics/congress/where-does-phrase-when-looting-starts-shooting-starts-come-n1217676">a historic line</a> uttered by a police chief in Miami in 1967 during the civil-rights unrest that was <a href="https://www.businessinsider.com/trump-quotes-cop-sparked-race-riot-tweet-2020-">also widely condemned </a>at the time. Twitter <a href="https://www.nytimes.com/2020/05/29/technology/trump-twitter-minneapolis-george-floyd.html">hid</a> that tweet behind a message saying that it was “glorifying violence”—a violation of the site’s terms of service—though users could still choose to view it by clicking through. All of this was an escalation of the seeming conflict between the president and Twitter: Just two days ago, the social-media company added a fact-check link to one of Donald Trump’s tweets for the first time. The president responded by issuing an <a href="https://www.whitehouse.gov/presidential-actions/executive-order-preventing-online-censorship/">executive order</a> that is getting a lot of attention, but not the right kind.</p>
  69. <p>The president’s order targets Section 230 of the Communications Decency Act, which confers immunity to internet companies for content they host but is generated by their users—something without which they could not operate as they now do. We’ve already seen a flood of lengthy commentaries and expert analyses of the legislative basis of the order. Legal experts have derided it as “<a href="https://www.law.com/nationallawjournal/2020/05/28/unlawful-and-unenforceable-legal-experts-deride-trumps-attempt-to-target-social-media-companies/?slreturn=20200429065824">unlawful and unenforceable</a>.” A <em>Vice News</em> headline worried that it could “<a href="https://www.vice.com/en_us/article/935yz3/donald-trump-executive-order-twitter-social-media?utm_content=1590674057">ruin the internet</a>.” And a senior legislative counsel at the ACLU <a href="https://www.nytimes.com/2020/05/28/us/politics/trump-jack-dorsey.html">pointed out that</a> “ironically, Donald Trump is a big beneficiary of Section 230”—because it gives him unfettered access to the public through social media. A <em>New York Times</em> analysis similarly said that the order could “<a href="https://www.nytimes.com/2020/05/28/us/politics/trump-jack-dorsey.html">harm one person in particular”</a>: the president. </p>
  70. <p>In reality, Trump’s salvo on social-media companies has primarily an audience of one: Mark Zuckerberg. And it is already working. After the executive order was issued, Facebook’s CEO quickly gave an<a href="https://www.foxnews.com/media/facebook-mark-zuckerberg-twitter-fact-checking-trump"> interview to Fox News</a> in which he said, “I just believe strongly that Facebook shouldn’t be the arbiter of truth of everything that people say online.” He added, “Private companies probably shouldn’t be, especially these platform companies, shouldn’t be in the position of doing that.”</p>
  71. <p>It’s important to pay attention to what the president is doing, but not because the legal details of this order matter at all. Trump is unlikely to repeal Section 230 or take any real action to curb the power of the major social-media companies. Instead, he wants to keep things just the way they are and make sure that the red-carpet treatment he has received so far, especially at Facebook, continues without impediment. He definitely does not want substantial changes going into the 2020 election. The secondary aim is to rile up his base against yet another alleged enemy: this time Silicon Valley, because there needs to be an endless list of targets in the midst of multiple failures.</p>
  72. <p>Trump does very well on Facebook, as my colleagues Ian Bogost and Alexis Madrigal <a href="https://www.theatlantic.com/technology/archive/2020/04/how-facebooks-ad-technology-helps-trump-win/606403/">have written</a>, because “his campaign has been willing to cede control to Facebook’s ad-buying machinery”—both now, and in 2016. The relationship is so smooth that Trump said Zuckerberg congratulated the president for <a href="https://www.businessinsider.com/trump-mark-zuckerberg-dinner-number-one-facebook-2020-1">being “No. 1 on Facebook”</a> at a private dinner with him. Bloomberg has reported that Facebook’s own data-science team agreed, publishing an internal report concluding how much better Trump was in leveraging “<a href="https://www.bloomberg.com/news/articles/2018-04-03/trump-s-campaign-said-it-was-better-at-facebook-facebook-agrees">Facebook’s ability to optimize for outcomes</a>.” This isn’t an unusual move for Facebook and its clients. Bloomberg has reported that Facebook also offered its “<a href="https://www.bloomberg.com/news/features/2017-12-07/how-rodrigo-duterte-turned-facebook-into-a-weapon-with-a-little-help-from-facebook">white glove</a>” services to the Philippine strongman Rodrigo Duterte, to help him “maximize the platform’s potential and use best practices.” Duterte <a href="https://www.bloomberg.com/news/features/2017-12-07/how-rodrigo-duterte-turned-facebook-into-a-weapon-with-a-little-help-from-facebook">dominated political conversation</a> on the site the month before the Philippines’ May 2016 presidential election. And once elected, Duterte banned independent press from attending his inauguration, instead live-streaming it on Facebook—a win-win for the company, which could then collect data from and serve ads to the millions who had little choice but to turn to the site if they wanted to see their president take office. (Duterte has <a href="https://www.hrw.org/world-report/2019/country-chapters/philippines">since been accused</a> of extrajudicial killings, jailing political opponents, and targeting independent media.)</p>
  73. <p>Playing the refs by browbeating them has long been a key move in the right-wing playbook against traditional media. The method is simple: It involves badgering them with accusations of unfairness and bias so that they bend over backwards to accommodate a “<a href="https://www.cjr.org/the_media_today/both-sides-impeachment-trump.php">both sides</a>” narrative even when the sides were behaving <a href="https://pressthink.org/2016/09/asymmetry-between-the-major-parties-fries-the-circuits-of-the-mainstream-press/">very differently</a>, or when one side was not grounded in fact. Climate-change deniers funded by fossil-fuel companies <a href="https://journals.ametsoc.org/doi/pdf/10.1175/WCAS-D-19-0063.1">effectively used this strategy</a> for decades, relying on journalists’ training and instinct to equate objectivity with representing <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1808044/">both sides</a> of a story. This way of operating persisted even when one of the sides was mostly bankrolled by the fossil-fuel industry while the other was a near-unanimous consensus of independent experts and academics.</p>
  74. <p>Some right-wing groups quickly adapted that strategy to social media, specifically Facebook and Twitter, which have become outsize gatekeepers in the public sphere, with enormous decision-making power over what gets amplified and what gets buried. For Facebook, that gatekeeper is a single person, Mark Zuckerberg. Facebook’s young CEO is an emperor of information who decides rules of amplification and access to speech for billions of people, simply <a href="https://www.vox.com/technology/2018/11/19/18099011/mark-zuckerberg-facebook-stock-nyt-wsj">due to the way ownership of Facebook shares are structured</a>: Zuckerberg personally controls 60 percent of the voting power. And just like the way people try to get on or advertise on the president’s seemingly favorite TV show, <a href="https://www.nytimes.com/2020/01/23/us/politics/donald-trump-ads-michael-bloomberg.html"><em>Fox &amp; Friends</em></a>, merely to reach him, Trump is clearly aiming to send a message to his one-person target.</p>
  75. <p>Perhaps the most successful application of this playbook occurred in the months leading up to the 2016 U.S. presidential election. That season of social-media browbeating began with the “trending topics” controversy in May of that year, when the tech-news site <em>Gizmodo</em> published an <a href="https://gizmodo.com/former-facebook-workers-we-routinely-suppressed-conser-1775461006">article</a>, based mainly on a single anonymous source inside the tiny team, asserting that Facebook “routinely suppressed conservative news.”</p>
  76. <p>In reality, that controversy was a tempest in a teapot in a year that was full of real ones. For one thing, the trending-topics module was a tiny box on the site, dwarfed in importance by the central Facebook News Feed, which is algorithmically sorted and over which the trending-topics team had no impact. The vetting team was tiny, and its job was to keep false or misinformation or inappropriate content (like obscenities) from appearing in the box, and while the vetting might have been biased, another plausible explanation was that there were more right-wing sites spewing misinformation than left-wing ones. For that matter, academic research has found <a href="https://science.sciencemag.org/content/363/6425/374.abstract">that conservative-leaning, older people were more likely to engage with “fake news</a>.” The whole trending-topics module was so trivial that it wasn’t even visible on Facebook’s mobile app, which in 2016 was already the key means by which billions accessed Facebook.</p>
  77. <p>In 2016, there was no sign that conservative pages did badly on Facebook. To the contrary, they were the pages that got the most engagement on Facebook. They still are. These sites include Fox News but also <em>Breitbart News</em>, which, according to <em>Vice News</em>, is “<a href="https://www.vice.com/en_us/article/jgeqe7/how-breitbart-is-crushing-mainstream-media-on-facebook">crushing mainstream media</a>,” garnering more views and engagement on Facebook than “The New York Times, Washington Post, Wall Street Journal, and USA Today combined” and outpacing “each of the broadcast news networks, MSNBC, and CNN.” However, <em>Breitbart News</em> isn’t just a right-wing version of <em>The New York Times</em>; it was described by Steve Bannon, its former executive chairman, as “<a href="https://www.nytimes.com/2017/08/16/magazine/breitbart-alt-right-steve-bannon.html">the platform for the alt-right</a>,” and white supremacy and misogyny routinely flavor its coverage.<a href="#2">*</a> Until recently, <em>Breitbart</em> had a “<a href="https://www.splcenter.org/20180614/biggest-lie-white-supremacist-propaganda-playbook-unraveling-truth-about-%E2%80%98black-white-crime">black crime</a>” section for its stories, and published made-up stories, such as one claiming that an undocumented immigrant had started <a href="https://www.buzzfeednews.com/article/briannasacks/no-an-undocumented-immigrant-did-not-start-the-deadly#.fhYVDKoOPn">the deadly Sonoma, California, wildfires</a>. (When Facebook launched a news tab, it <a href="https://www.theverge.com/2019/10/25/20932653/facebook-news-breitbart-mark-zuckerberg-statement-bias">included <em>Breitbart</em></a> among its “trusted” news sources).</p>
  78. <p>The claim that Facebook is biased against conservatives is so egregious that, in 2016, even the conservative media personality Glenn Beck took <a href="https://medium.com/@glennbeck/what-disturbed-me-about-the-facebook-meeting-3bbe0b96b87f#.qd6aysa9g">to lamenting the fake controversy</a>, pointing out that his own page, which sometimes includes conspiracy theories, did very well on Facebook. Still, the trending-topics brouhaha led to a flurry of news coverage, culminating <a href="https://www.commerce.senate.gov/services/files/fe5b7b75-8d53-44c3-8a20-6b2c12b0970d">in a letter from Senator John Thune</a>, who was then the chairman of the Senate Commerce Committee, demanding prompt attention and answers from Facebook regarding these allegations of bias. The letter, according to <em>Wired</em>, put Facebook on “<a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">high alert</a>.” Staffers were immediately dispatched to meet with the senator. Seventeen “conservative thought leaders” were quickly invited to the company’s headquarters, in Menlo Park, California. “The company wanted to make a show of apologizing for its sins, lifting up the back of its shirt, and asking for the lash,” which came swiftly as the trending-topics “controversy” swirled in news media across the political spectrum. In response to the pressure, <em>Wired</em> <a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">reported</a>, Zuckerberg <a href="https://www.wired.com/story/inside-facebook-mark-zuckerberg-2-years-of-hell/">decided</a> “to extend an olive branch to the entire American right wing.”</p>
  79. <p>As a consequence, Facebook became cautious of taking actions that would make it look like it was holding back right-wing information machinery. That was the environment in which the country headed into the 2016 election—five months during which all stripes of misinformation went easily viral on Facebook, <a href="https://www.buzzfeednews.com/article/craigsilverman/viral-fake-election-news-outperformed-real-news-on-facebook#.bp90yKJ1W">including stories</a> that falsely claimed that the pope had endorsed Donald Trump, or that Hillary Clinton had sold weapons to the Islamic State. These stories were viewed millions of times on the platform, many of them outperforming traditional news sources. The pressure to keep Facebook friendly to the Trump campaign continued unabated after the election. When Facebook appeared to be considering changes to its microtargeting rules in 2019—for example, <a href="https://www.washingtonpost.com/technology/2019/11/20/trump-campaign-assails-facebook-over-potential-changes-political-ad-rules/">not allowing political campaigns to use the same level of microtargeting tools</a> that product advertisers can, a potential strike at “<a href="https://www.washingtonpost.com/technology/2019/11/20/trump-campaign-assails-facebook-over-potential-changes-political-ad-rules/">a major Trump ad strategy</a>”—the Trump reelection campaign swiftly <a href="https://www.businessinsider.de/international/team-trump-2020-attacks-facebook-fears-ad-targeting-changes-2019-11/">attacked the platform</a>, and the rules were left unchanged.</p>
  80. <p>Silicon Valley engineers and employees may well be overwhelmingly liberal, but Facebook is run by the algorithms they program, which optimize for the way the site makes money, rather than sifting through posts one by one. This is probably why the trending-topics controversy seemed like such a big hit: It took the one tiny section where humans had some minor input and portrayed the whole platform as working the same way. The employees may be liberal, but the consequences <a href="https://www.nytimes.com/2016/05/19/opinion/the-real-bias-built-in-at-facebook.html">of how social-media companies operate are anything but</a>. In 2016, for example, Facebook, Twitter, and Google all “<a href="https://www.politico.com/story/2017/10/26/facebook-google-twitter-trump-244191">embedded</a>” staffers with both campaigns, without charge, helping them use the sites better and get more out of the many millions of dollars they spent on the platforms. However, <a href="https://www.theatlantic.com/magazine/archive/2020/03/the-2020-disinformation-war/605530/">this was especially helpful to the Trump campaign</a>, an upstart with a bare-bones staff. Unsurprisingly, the “<a href="https://www.politico.com/story/2017/10/26/facebook-google-twitter-trump-244191">bulk of Silicon Valley’s hands-on campaign support went to Trump rather than to Clinton.</a>”</p>
  81. <p>Trump and his campaign understood the power of Facebook better than the Clinton campaign, and formed a mutually beneficial relationship. Trump spent $44 million on the site, compared with the Clinton campaign’s $28 million, but ad money is only part of the story. A key role of Facebook is promoting organic content: posts, not ads, written by people who may range from partisans to campaign operatives to opportunists who just want the clicks. Some of the authors of these viral pages are motivated by promoting their ideology. Others are just grifters, using Facebook to maximize their spread so that they can collect ad money from their own webpage—which probably uses Google’s industry-dominating ad infrastructure. It’s a complete circle of back-scratching that is rarely commented on or known outside of a small number of experts and industry practitioners.</p>
  82. <p>The Trump campaign also made better use of Facebook’s own artificial-intelligence tools, like “<a href="https://thenextweb.com/facebook/2018/04/04/facebook-confirms-trumps-ads-bested-clintons-during-presidential-bid/">lookalike audiences</a>”—<a href="https://www.theatlantic.com/technology/archive/2020/04/how-facebooks-ad-technology-helps-trump-win/606403/">a crucial functionality</a> that lets advertisers find many new people that Facebook <em>predicts </em>will act similarly to a small “custom” audience uploaded to the site. In other words, if you upload a list of a few thousand people who are open to your message, whether it is interest in a harmless hobby or incendiary claims against a political opponent, Facebook’s vast surveillance machinery, giant databases, and top-of-the line artificial-intelligence tools can help you find many, many more similar targets—which you can reach as long as you’re willing to pay Facebook. These are the kinds of advanced functions that Facebook makes easy to use, and staffers embedded with the Trump campaign would be able to explain and help with.</p>
  83. <p>As long as Facebook and other social-media platforms make money by increasing engagement without much regard to the content they algorithmically amplify, it doesn’t matter whether every last employee is an avowed liberal. In 2016, <a href="https://www.wsj.com/articles/facebook-knows-it-encourages-division-top-executives-nixed-solutions-11590507499">Facebook’s own internal research</a> team found that “64% of all extremist group joins are due to our recommendation tools” and, if left unchecked, Facebook would feed users “more and more divisive content in an effort to gain user attention and increase time on the platform.” The same research team also found that fake news, spam, clickbait, and inauthentic users inevitably included “a larger infrastructure of accounts and publishers on the far right than on the far left.” This conclusion echoed academic findings that political polarization in the United States <a href="https://www.cambridge.org/core/books/solutions-to-political-polarization-in-america/confronting-asymmetric-polarization/3966003B2517E22BF288796AC4985F34">is not symmetric</a>, and that the right-wing ecology is more prone to misinformation of various kinds. Efforts to heavily combat such misinformation, which would necessarily affect right-wing sites more, <a href="https://www.wsj.com/articles/facebook-knows-it-encourages-division-top-executives-nixed-solutions-11590507499">were nixed by Facebook’s leadership</a>. <em>The Wall Street Journal </em>reported that Facebook’s vice president for global public policy, Joel Kaplan (who had earlier attracted attention by being <a href="https://thehill.com/policy/technology/410457-facebook-executive-hosted-kavanaugh-confirmation-celebration">a vocal supporter</a> for Supreme Court Justice Brett Kavanaugh, sitting behind him during his confirmation hearings and <a href="https://thehill.com/policy/technology/410457-facebook-executive-hosted-kavanaugh-confirmation-celebration">even hosting a party</a> after the vote), had played an important role in this nixing, pointing out that such a move would upset that side of the political spectrum.</p>
  84. <p>This is all a win for the president, who can dredge up old tweets by Silicon Valley engineers that express disdain for him or for his followers, and have us focused on whether Silicon Valley is biased against conservatives and the right-wing information ecology because of its employees without examining the business model and the financial basis that makes it extra-friendly to them.</p>
  85. <p>There are already widespread news reports of how Trump is trying to “<a href="https://www.washingtonpost.com/technology/2020/05/28/trump-social-media-executive-order/">punish</a>” Twitter or Facebook. In reality, the former has given him an unfettered megaphone with no friction for years—only recently adding an extra click to one of his tweets—and the latter surely welcomes the <a href="https://www.nytimes.com/interactive/2019/05/21/us/politics/trump-2020-facebook-ads.html">millions</a> his campaign will spend on the forthcoming election. Facebook is also likely to continue algorithmically amplifying divisive, polarizing, or dubious content. Again and again, people tend to underestimate this president, whose grammar and punctuation may leave something to be desired but whose political instincts are keen. What else can you call his ability—in the middle of this summer of pandemic and as a major American city erupts in anger against yet another police killing—to have so many newspapers, analysts, and nongovernmental organizations spend so much time doing close readings of an executive order to assess its legality, coherence, or potential for becoming a law, as if any of that matters an iota. In the meantime, Trump remains focused on the only thing that matters: keeping Facebook in line until November 3, 2020.</p>
  86. </main>
  87. </article>
  88. <hr>
  89. <footer>
  90. <p>
  91. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  92. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  93. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  94. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  95. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  96. </p>
  97. <template id="theme-selector">
  98. <form>
  99. <fieldset>
  100. <legend>Thème</legend>
  101. <label>
  102. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  103. </label>
  104. <label>
  105. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  106. </label>
  107. <label>
  108. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  109. </label>
  110. </fieldset>
  111. </form>
  112. </template>
  113. </footer>
  114. <script type="text/javascript">
  115. function loadThemeForm(templateName) {
  116. const themeSelectorTemplate = document.querySelector(templateName)
  117. const form = themeSelectorTemplate.content.firstElementChild
  118. themeSelectorTemplate.replaceWith(form)
  119. form.addEventListener('change', (e) => {
  120. const chosenColorScheme = e.target.value
  121. localStorage.setItem('theme', chosenColorScheme)
  122. toggleTheme(chosenColorScheme)
  123. })
  124. const selectedTheme = localStorage.getItem('theme')
  125. if (selectedTheme && selectedTheme !== 'undefined') {
  126. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  127. }
  128. }
  129. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  130. window.addEventListener('load', () => {
  131. let hasDarkRules = false
  132. for (const styleSheet of Array.from(document.styleSheets)) {
  133. let mediaRules = []
  134. for (const cssRule of styleSheet.cssRules) {
  135. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  136. continue
  137. }
  138. // WARNING: Safari does not have/supports `conditionText`.
  139. if (cssRule.conditionText) {
  140. if (cssRule.conditionText !== prefersColorSchemeDark) {
  141. continue
  142. }
  143. } else {
  144. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  145. continue
  146. }
  147. }
  148. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  149. }
  150. // WARNING: do not try to insert a Rule to a styleSheet you are
  151. // currently iterating on, otherwise the browser will be stuck
  152. // in a infinite loop…
  153. for (const mediaRule of mediaRules) {
  154. styleSheet.insertRule(mediaRule.cssText)
  155. hasDarkRules = true
  156. }
  157. }
  158. if (hasDarkRules) {
  159. loadThemeForm('#theme-selector')
  160. }
  161. })
  162. </script>
  163. </body>
  164. </html>