davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- 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>New HTML Control Lands in Safari (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)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- 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://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari">

<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>New HTML Control Lands in Safari</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://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <p>Native toggle switches landed in one browser. Safari introduced this new HTML control as part of the <a href="https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/">Safari Technology Preview 185 release</a> and then <a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-186#New-Features">expanded it in the 186 release</a>.</p>

<p>Creating a semi-native HTML toggle switch component is quite <em>hacky</em>. It involves using a checkbox, adding the "switch" ARIA role, removing its appearance with CSS, and adding styles to make it look like the classic switch or however we want —<a href="https://codepen.io/collection/aMPYMo">check this toggles collection</a>.</p>

<p>And even doing all that, some things cannot be avoided. For example, developers can still set the indeterminate attribute into the base checkbox using JavaScript, which would make the toggle switch invalid.</p>

<p>A native solution would prevent these problems and provide a better experience. Even when it's only an experiment on one browser and has some issues (as we'll describe soon), this attempt is welcomed, and I hope it gets traction.</p>

<h2 id="how-does-it-work">
  How does it work?
</h2>

<p>Safari's implementation is as straightforward as it can be. Just add the <code>switch</code> attribute to a regular checkbox, and you'll be done!</p>

<div class="highlight js-code-highlight">
<pre class="highlight html"><code><span class="c">&lt;!-- this will render a checkbox --&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="nt">/&gt;</span>

<span class="c">&lt;!-- this will render a toggle switch --&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>
</code></pre>
</div>

<p>It's really that simple. There is no need for additional CSS, JS, or anything complicated, and the browser will take care of the rest, including out-of-the-box interactions and styles.</p>

<figure>
  <p>
    <img src="https://alvaromontoro.com/images/blog/safari-toggle-1.webp" alt="Just add the switch attribute to a checkbox. There is some HTML code in a box: With arrows pointing to checkboxes (from the first line of code) and toggle switches (from the second line of code)" loading="lazy">
  </p>
  <figcaption>Just add the switch attribute to a checkbox!</figcaption>
</figure>

<p>The default visualization resembles the toggle switch of iOS, but as part of the feature, Safari includes two pseudo-elements <code>::track</code> and <code>::thumb</code> that make it easy to update the look and feel of the control. <a href="https://twitter.com/yisibl/status/1737739579418141116">@yisibl added a few examples of how they work</a> (you'll need Safari Technology Preview 185 or above to see them).</p>

<h3 id="thoughts-on-this-syntax">
  Thoughts on this syntax
</h3>

<p>Having a <code>switch</code> attribute in the checkbox makes it easy, but it also may be misleading as it looks like it equates toggle switches to checkboxes. While this may seem logical to many, it is unfair to the switch control, which becomes a "sub-control" <em>tightly coupled</em> to the checkbox.</p>

<p>They are not the same component: they have different values (checked/unchecked vs. on/off), one of them has an indeterminate state (checkbox, although it's not technically a state), and one is supposed to have an action associated on change (switch).</p>

<p>So why couple them? Just because they look the same or behave in a "similar way"? That's wrong. Following that logic, we shouldn't have inputs of the type <code>number</code>, <code>date</code>, <code>password</code>, <code>email</code>, <code>search</code>... because we already have the text input to handle all of them.<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight html"><code><span class="c">&lt;!-- We don't do this --&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">number</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">date</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">password</span> <span class="nt">/&gt;</span>

<span class="c">&lt;!-- So why do this? --&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>

<span class="c">&lt;!-- Wouldn't this make more sense? --&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"switch"</span> <span class="nt">/&gt;</span>
</code></pre>
</div>

<p>In my opinion, a toggle switch should be its own type of input. And not a "sub-type" or "sub-control" dependent on the checkbox.</p>

<h2 id="pros-and-cons">
  Pros and cons
</h2>

<p>As with every technology —especially a new one—, Safari's toggle switch has good and bad things. Here are some pros and cons of this component.</p>

<h3 id="pros">
  Pros
</h3>

<ul>
<li>
<strong>Provides native support for the control</strong>: no need for hacky or complex solutions that require too much code and may be error-prone.</li>
<li>
<strong>Straightforward interface</strong>: easy to implement (add an attribute!) and easy-to-follow new pseudo-elements (<code>::track</code> and <code>::thumb</code>).</li>
<li>
<strong>Easy styling in CSS</strong>: with the introduction of two pseudo-elements (<code>::track</code> and <code>::thumb</code>), changing the styles of the components would become simple.</li>
<li>
<strong>Accessibility out of the box</strong>: the control is announced correctly by the Voice Over screen reader without needing extra ARIA labels or roles. <a href="https://adrianroselli.com/2021/10/switch-role-support.html#Update02">Adrian Roselli ran tests and shared the results</a> over time.</li>
</ul>

<p>
  <img src="https://alvaromontoro.com/images/blog/safari-toggle-2.webp" alt="Summary of pros in image format" loading="lazy">
</p>

<h3 id="cons">
  Cons
</h3>

<ul>
<li>
<strong>Non-standard feature</strong>: this is a Safari proposal and hasn't been adopted by other browsers or taken into the standard.</li>
<li>
<strong>Safari-only feature</strong>: as it is a new suggestion by Safari, it will work only on Safari and only in the Technology Preview version of the browser (from version 185).</li>
<li>
<strong>Default styles are <em>sketchy</em></strong>: the toggle looks like the regular iOS toggle, but <a href="https://front-end.social/@alvaromontoro/111763578202895753">it presents some issues when scaling and applying zoom</a>.</li>
</ul>

<p>Considering those cons, it is safe to say that <strong>this is not a production-ready feature</strong>. At least not yet. It could be an excellent case for progressive enhancement approaches (maybe the reason why they made it an attribute instead of a full type: falling back into a checkbox if not supported), but waiting to see how the component moves forward is better. It is still too early.</p>

<p>
  <img src="https://alvaromontoro.com/images/blog/safari-toggle-3.webp" alt="Summary of cons in image format" loading="lazy">
</p>

<h2 id="final-thoughts">
  Final thoughts
</h2>

<p>Toggle switches are a great addition to a browser, and the Safari team did nicely adding it to the Technology Preview version. Still, the implementation feels a bit rushed —maybe Safari is trying to earn brownie points with developers while shaking the "The New IE Browser" label?</p>

<p>One of the things that is more counterintuitive is the used syntax. Having a <code>switch</code> attribute in the checkbox makes it easy, but it also unnecessarily associates both controls and doesn't follow the same notation that other form controls follow. I wouldn't be surprised if this is one thing that changes when —not if— this proposal moves forward. So beware of support and likely changes in the future.</p>

<p>As I said, this is a great addition to the form controls. I hope it triggers a deeper conversation about its addition to the standard. I look forward to what it becomes and the possibility of using it on any browser.</p>
</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>