Changez le avec le dernier contrôle HTML —

Le Web n’est pas étranger à l’utilisation d’éléments HTML et à leur transformation pour qu’ils ressemblent, agissent et se sentent comme quelque chose de complètement différent. Un exemple courant de ceci est le composant interrupteur, ou bascule. Nous cacherions une case à cocher sous plusieurs couches de styles, définirions le rôle ARIA comme « commutateur », puis expédierions. Cependant, cette approche posait certains problèmes d’utilisabilité autour des états indéterminés et semblait toujours plutôt dégueulasse. Après tout, comme on dit, le meilleur ARIA n’est pas ARIA.

Eh bien, il y a un nouvel espoir qu’un commutateur HTML natif fasse son chemin.

Safari Technology Preview (TP) 185 et Safari 17.4 publiés avec une fonctionnalité discrète, un contrôle de commutateur HTML natif. Il évolue à partir de l’approche des cases à cocher cachées et vise à rendre plus cohérente l’accessibilité et la convivialité du contrôle.

<!-- This will render a native checkbox --//>
<input type="checkbox" />

<!-- Add the `switch` attribute to render a switch element --//>
<input type="checkbox" switch />
<input type="checkbox" checked switch />

Note: D’après le blog WebKit, nous pouvons utiliser @supports(::thumb) pour vérifier la prise en charge du navigateur. Cela dit, ::thumb est une fonctionnalité expérimentale qui nécessite le « ::thumb et ::track pseudo-éléments » comporte un indicateur activé dans Safari. Sinon, vous risquez de voir un faux positif à l’endroit où l’avis d’assistance est affiché dans la démo.

Sans surprise, les styles par défaut dans Safari ressemblent à un commutateur iOS. Heureusement, en plus du nouveau switch attribut, nous avons également droit à de nouveaux pseudo-éléments pour styliser notre commutateur afin qu’il soit le plus joli commutateur du Web.

Styliser avec des pseudo-éléments

Parallèlement au déploiement du switch l’attribut vient en charge du nouveau ::thumb et ::track pseudo-éléments. Nous pouvons utiliser ces pseudo-éléments non seulement pour styliser notre mais également pour vérifier conditionnellement la prise en charge en CSS. Mais n’allons pas trop vite, une chose à la fois.

Coiffant.

Le contrôle du commutateur prend en charge par défaut le accent-color et color-scheme propriétés. Cela nous donne déjà un bon support thématique qui sort des sentiers battus. Mais nous pouvons obtenir un contrôle total sur le commutateur en stylisant ses pseudo-éléments.

Styles d’entrée de base

Vous devez ajouter appearance: none à l’interrupteur avant de procéder au coiffage.

input[type="checkbox"][switch] {
  appearance: none;
}

Une fois l’apparence supprimée, nous pouvons désormais contrôler le style aussi loin que notre imagination nous mène. Bien entendu, un grand pouvoir implique de grandes responsabilités. En supprimant l’apparence, nous sommes également responsables du positionnement des pièces pour les états marche et arrêt.

Les styles que nous appliquons à l’entrée de base peuvent être traités comme les styles de conteneurs pour les pseudo-éléments. Mais soyez prudent, car les styles appliqués ici deviendront probablement les styles de secours dans les environnements non pris en charge.

input[type="checkbox"][switch] {
  /* Required to override and style the switch */
  appearance: none;

  display: inline-grid;
  position: relative;
  background-color: var(--color-aux-400);
  block-size: 2rem;
  inline-size: 4rem;
  border-radius: var(--border-radius-pill);
  transition: background 0.25s ease;
  padding-inline: var(--spacing-1x);
}

Ajoutant plus de flexibilité au mixage, le style du contrôle lui-même nous permet d’accéder au sien ::after et ::before également des pseudo-éléments.

Le ::thumb Pseudo-élément

Le nouveau ::thumb le pseudo-élément nous permet de styliser la poignée du commutateur. Il s’agit généralement de l’élément avec lequel une personne interagit lorsqu’elle active le contrôle. Un pouce circulaire est peut-être le plus courant, mais nos styles ne s’y limitent pas. Mais encore une fois, concentrons-nous sur une chose à la fois.

input[type="checkbox"][switch] {
  appearance: none;
  display: inline-grid;
  position: relative;
  background-color: var(--demo-color-aux-400);
  block-size: 2rem;
  inline-size: 4rem;
  border-radius: var(--demo-border-radius-pill);
  transition: background 0.25s ease;
  padding-inline: 0.25rem;
  
  /* Style the thumb */
  &::thumb {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    border-radius: var(--border-radius-circle);
    background: var(--color-aux-600);
    transition: translate 0.25s ease;
  }
  
  /* Define styles for the 'on' state of the switch */
  &:checked {
    background: var(--color-blue-400);
  }
  
  &:checked::thumb {
    /* We are responsible for moving the thumb between states */
    translate: 2rem 0;
  }
}

Cette démo expérimente l’application de transitions et d’animations au ::thumb élément. Parce que postuler appearance: none nous rend responsable du positionnement du pouce pour ses différents états, nous avons également la liberté de passer d’un état à l’autre comme nous le souhaitons.

Le ::track Pseudo-élément

Bien que similaire au style du contrôle lui-même, le ::track le pseudo-élément peut servir de piste de fond le long de laquelle le pouce se déplace. Bien sûr, à la manière classique du Web, ce morceau ne avoir être stylé en tant que tel, et cet élément supplémentaire peut être utilisé de manière créative d’autres manières.

Certes, ces exemples sont plutôt basiques. Mais l’espoir est que le potentiel soit visible dans l’immense contrôle de style dont nous disposons désormais pour ce contrôle. Bien sûr, tout ce style est merveilleux, mais nous devons d’abord vérifier le support avant de mettre tous nos œufs dans le même panier proverbial.

Le détecter pour la prise en charge du commutateur

Comme pour toutes les nouveautés intéressantes, il y a des considérations moins que cool. Dans ce cas, le switch L’attribut n’est pris en charge que par Safari. S’il se répand, nous verrons cet élément se frayer un chemin dans d’autres navigateurs majeurs, mais d’ici là, nous devons détecter si nous pouvons restituer le commutateur avant de nous y engager.

Détection avec CSS

Nous pouvons utiliser CSS pour détecter la prise en charge du switch attribut, mais pas aussi directement que je le préférerais. Parce que l’élément de commutation est livré avec le ::thumb et ::track pseudo-éléments, nous pouvons vérifier leur prise en charge pour ensuite déduire si le commutateur lui-même est pris en charge.

@supports selector(::thumb) {
  /* The switch is supported. Style away! */
}

Ou, si vous souhaitez utiliser par défaut les styles pris en charge par les commutateurs, vous pouvez vérifier conditionnellement l’inverse en utilisant l’option not mot-clé.

@supports not selector(::thumb) {
  /* The switch is _not_ supported. Fallback styles go here. */
}

Détection avec JavaScript

Il peut s’avérer nécessaire de détecter l’utilisation du switch attribut en dehors de CSS. Pour cela, nous pouvons créer un élément d’entrée et vérifier le switch attribut broche JavaScript. Si l’attribut existe, nous ajouterons ultérieurement une classe à l’élément racine du document pour le style CSS.

function checkForSwitchSupport() {
  const input = document.createElement('input');
  input.type="checkbox"
  
  if ('switch' in input) {
    return true;
  }

  return false
}

if (checkForSwitchSupport()) {
  document.documentElement.classList.add('has-switch');
}


.has-switch input\[type="checkbox"\][switch] {
  accent-color: var(--brand-color-accent-primary);
}

Considérations relatives au changement

Avec toute nouvelle fonctionnalité, il y a une période pendant laquelle nous devons apprendre comment elle fonctionne et comment l’utiliser. Lorsque cette fonctionnalité est particulièrement expérimentale et uniquement prise en charge par l’un des principaux navigateurs, il y a un peu plus de nuances à découvrir et à comprendre.

Cases à cocher : les mêmes mais différentes

Ajout d’un switch L’attribut à une entrée de case à cocher est agréable et pratique, mais il comporte certaines hypothèses. Au fond, je crois que cette syntaxe implique qu’un commutateur et une case à cocher sont la même chose, mais visuellement différents. Mais ce n’est tout simplement pas le cas.

Il existe deux différences fondamentales de balisage entre les deux entrées.

1. Une case à cocher peut être définie sur un état indéterminé – un interrupteur ne le peut pas.
2. Un interrupteur peut être marqué comme requis – une case à cocher ne peut pas.

Étant donné que les deux contrôles peuvent être créés avec la même entrée, il est inévitable que ces attributs se mélangent et fonctionnent de manière inattendue.

Les différences ne s’arrêtent cependant pas aux conventions de balisage. La manière dont les technologies d’assistance communiquent les cases à cocher et les commutateurs est également différente. L’état des cases à cocher est communiqué comme « coché » ou « décoché ». Pendant ce temps, un commutateur est communiqué comme « sur » ou « désactivé ». Cela ne semble peut-être pas être une grande différence – et ce n’est peut-être pas le cas – mais le regroupement de ces deux contrôles laisse place à l’ambiguïté. Cela est évident dans notre style lorsque nous ciblons les interrupteurs « on » avec le :checked pseudo-sélecteur. C’est une distinction subtile, mais néanmoins une distinction.

Les commutateurs et les cases à cocher sont similaires, oui, mais le couplage de ces deux contrôles est-il la bonne approche ?

Accessibilité (A11y) : Comprendre les différences

Chaque fois que nous stylisons une case à cocher pour créer un commutateur, nous attachons (espérons-le) également role="switch" au composant. Cela permet traditionnellement aux technologies d’assistance de mieux comprendre le contrôle. Alors, comment se passe le nouveau le contrôle des interrupteurs interprété par les technologies d’assistance ?

Dans cette vidéo, nous apprenons comment VoiceOver communique le contrôle du commutateur lors de l’utilisation de Safari sur Mac. Mais VoiceOver n’est qu’un lecteur d’écran – et pas exactement le plus représentatif – et les tests peuvent et doivent être effectués avec d’autres.

Adrian Roselli a déjà publié une série de tests approfondis de différentes combinaisons de navigateurs et de lecteurs d’écran à partir de 2022, mais maintenu avec des mises à jour de la plateforme en cours de route. Alerte spoil: Les résultats sont totalement mitigés et le commutateur devrait rester hors production pour le moment. Adrian propose un contexte plus approfondi :

« Pour plus de contexte, un élément de commutation a été proposé avec WHATWG HTML en 2018, Google y a travaillé pendant un momentavec le quelques discussions WIGGpuis l’a abandonné. Open-UI a lancé une discussion en 2021mais à part un commentaire sur cas d’utilisation valides et indéterminésy est pour la plupart mort.

Puis en juillet 2023 […] un nouveau contributeur a déposé une WHATWG PR pour ajouter un switch attribut à une case à cocher et nous y sommes. Notez qu’il n’a pas été fusionné dans WHATWG HTML, Apple Safari a donc choisi de prendre une longueur d’avance sur celui-ci.

—Adrian Roselli

Curieusement, même si VoiceOver annonce le commutateur comme étant « activé » ou « désactivé », si nous inspectons le commutateur et examinons ses propriétés d’accessibilité dans les outils de développement de Safari, nous verrons toujours une référence à « vérifié ».

La communication est un aspect de l’accessibilité du contrôle. Plus tôt en 2024, il y a eu des problèmes où le le commutateur ne s’ajustait pas correctement aux niveaux de zoom de la page, entraînant une visibilité médiocre ou brisée du contrôle. Cependant, au moment où j’écris ces lignes, Safari semble avoir résolu ces problèmes. Le zoom conserve la cohésion visuelle du switch.

Le switch L’attribut semble prendre en compte les besoins d’accessibilité. Cependant, cela ne nous empêche pas de l’utiliser de manière inaccessible et inutilisable. Comme mentionné, mélanger le required et indeterminate les propriétés entre les commutateurs et les cases à cocher peuvent provoquer un comportement inattendu pour les personnes essayant de naviguer dans les contrôles. Encore une fois, Adrian résume bien les choses :

« Le switch ce rôle ne permet pas les états mixtes. Assurez-vous que votre commutateur ne soit jamais réglé sur un état mixte ; sinon, eh bien, des problèmes.

—Adrian Roselli

Internationalisation (I18N) : quelle direction prendre ?

Au-delà de l’accessibilité du contrôle du switch, que se passe-t-il lorsque le switch interagit avec différents modes d’écriture ?

Lors de la création du commutateur, nous avons dû garantir l’utilisation de CSS logique pour prendre en charge différents modes et directions d’écriture. En effet, un commutateur étant dans sa position la plus à droite (ou sur son bord final en ligne) ne signifie pas « activé » dans certains environnements. Dans certaines langues — par exemple, celles qui sont écrites de droite à gauche — la position la plus à gauche (ou le bord de départ en ligne) sur le commutateur impliquerait probablement l’état « on ».

Alors que nous devrions maintenant écrire du CSS logique par défaut, le nouveau contrôle de commutateur supprime ce besoin. En effet, le contrôle s’adaptera à son point le plus proche. writing-mode et direction propriétés. Cela signifie que dans les environnements de gauche à droite, la position la plus à droite du commutateur sera son état « activé », et dans les environnements de droite à gauche, sa position la plus à gauche sera l’état « activé ».

Dernières pensées

À mesure que nous continuons à faire progresser le Web, il est naturel que nos outils évoluent à nos côtés. Le contrôle switch est un ajout bienvenu au HTML pour éliminer les hacks de cases à cocher auxquels nous avons recours depuis des années.

Cela dit, combiner la case à cocher et le commutateur en une seule entrée, bien que pratique, soulève certaines inquiétudes quant aux combinaisons de balisage potentielles. Malgré cela, je pense que cela peut finalement être résolu avec des linters ou par les navigateurs eux-mêmes sous le capot.

Finalement, avoir une approche native pour changer de composants peut rendre l’accessibilité et la convivialité du contrôle beaucoup plus cohérentes – en supposant qu’il soit jamais pris en charge et adopté pour une utilisation généralisée.

(gg, ouais)