décembre 23, 2021

Créer une entrée de plage personnalisée qui semble cohérente sur tous les navigateurs —

Résumé rapide ↬

Les entrées de gamme ont été notoirement difficiles à coiffer. Chaque navigateur restitue l'entrée différemment, ce qui vous oblige à utiliser des préfixes de fournisseur afin de créer une apparence cohérente. Dans cet article, nous examinerons la bizarrerie de l'entrée de la plage HTML et montrerons comment styliser l'entrée pour qu'elle soit cohérente dans tous les principaux navigateurs.

En tant que l'un des responsables d'une bibliothèque de composants d'interface utilisateur, j'ai implémenté et stylisé des myriades d'éléments d'entrée. Un jour, on m'a confié la tâche d'ajouter une entrée de plage à la bibliothèque et j'ai pensé que ce serait un processus similaire aux autres entrées que j'avais implémentées dans le passé. Cette hypothèse était correcte jusqu'à ce que je commence à tester l'entrée de plage sur plusieurs navigateurs et que je me rende rapidement compte que j'avais beaucoup plus de travail à faire.

Après de nombreuses recherches, j'ai finalement pu identifier suffisamment de articles de blog articles et tutoriels approfondis pour m'aider à styliser l'entrée de plage pour un rendu cohérent. Au lieu d'avoir à rechercher plusieurs ressources, le but de cet article de blog est de fournir un guichet unique pour apprendre à styliser correctement une entrée de plage qui semblera cohérente sur tous les navigateurs. C'est l'article que j'aurais aimé avoir quand j'ai dû le faire moi-même et j'espère qu'il contribuera à rendre ce processus plus rapide et plus fluide pour vous.

Anatomy Of A Range Input

L'entrée de plage se compose de deux parties principales :

Track
C'est la partie du curseur sur laquelle le pouce s'exécute. Ou en d'autres termes, c'est l'élément long qui représente les plages de valeurs qui peuvent être sélectionnées. L'entrée de plage est composée d'une piste et d'un pouce. »/>
Une entrée de plage est composée d'une piste et d'un pouce. ( Grand aperçu)
S'il s'agissait d'une équation mathématique :
entrée de plage = piste + pouce
L'entrée de plage est parfois appelée « curseur » et dans le reste de cet article, j'utiliserai ces termes de manière interchangeable.
Incohérences du navigateur
Pour démontrer pourquoi nous avons même besoin d'un didacticiel sur les entrées de plage de style en premier lieu, nous allons jeter un œil à quelques captures d'écran de l'entrée de plage HTML par défaut et comment elle est rendue dans les quatre principaux navigateurs (Chrome, Firefox, Safari et Edge). Ou, si vous préférez, vous pouvez visualiser cette démo CodeSandbox dans chacun des navigateurs respectifs pour voir les incohérences du navigateur dans toute leur splendeur.
Remarque : Ces captures d'écran ont été prises comme de septembre 2021 et peut être sujet à changement au fur et à mesure de la mise à jour des navigateurs respectifs.
Commençons par regarder Chrome qui, à mon avis, rend la version la plus conviviale de l'entrée par défaut.[19659020]Démo Chrome de l'entrée de la plage HTML par défaut »/>
Démo Chrome de l'entrée de la plage HTML par défaut. ( Grand aperçu)
Firefox est le suivant et semble différent de l'entrée rendue par Chrome. Dans Firefox, la hauteur de la piste est légèrement plus courte. D'un autre côté, la hauteur et la largeur du pouce sont plus grandes et n'ont pas la même couleur de fond bleu que la version Chrome. ( Grand aperçu)
Le curseur Safari est le plus proche en apparence de la version Firefox mais, encore une fois, il est toujours différent. Cette fois-ci, la piste semble avoir un effet d'ombre et la hauteur du pouce et la largeur sont plus petites que les rendus de Chrome et Firefox. Si vous regardez de plus près, vous pouvez également voir que le pouce n'est pas centré directement sur la piste, ce qui lui donne un aspect brut. ( Grand aperçu)
Le dernier mais non le moindre est Edge qui, maintenant que Microsoft Edge est construit à partir de Chromium est bien plus aligné sur les trois autres navigateurs que son prédécesseur pré-Chromium. Cependant, nous pouvons voir que le rendu est toujours différent des trois autres navigateurs. Le rendu d'Edge de son entrée de plage ressemble beaucoup à la version Chrome, sauf qu'il a une couleur d'arrière-plan gris plus foncé pour le pouce et le côté gauche de la piste avant le pouce.

Démo Edge de l'entrée de plage HTML par défaut. ( Grand aperçu)
Maintenant que nous avons vu à quel point chaque navigateur rend l'entrée de plage très incohérente, nous allons voir comment nous pouvons utiliser CSS pour les uniformiser.
Plus après le saut ! Continuez à lire ci-dessous ↓

Range Reset (Baseline Styles)
Parce que les incohérences du navigateur varient énormément, nous devons commencer sur un pied d'égalité. Une fois que les styles par défaut appliqués par chaque navigateur ont été supprimés, nous pouvons commencer à travailler pour créer une entrée d'apparence plus uniforme. Nous utiliserons le sélecteur input[type="range"] element-attribute et les styles appliqués ici agiront comme une réinitialisation CSS pour l'entrée.
Pour appliquer les styles de base, nous avons besoin de quatre propriétés :
1. -webkit- apparence : aucune ;
  Cette propriété est un préfixe de fournisseur qui s'applique à tous les principaux navigateurs. En lui donnant la valeur nonecela indique à chaque navigateur respectif d'effacer tous les styles par défaut. Cela nous permet de repartir de zéro et de créer l'apparence de l'entrée à partir de ce point.
2. background: transparent;
  Cela efface l'arrière-plan par défaut qui est appliqué à l'entrée.
3. cursor : pointeur;
4. width
  Définit la largeur totale de l'entrée.
```
input[type="range"] {
  -webkit-apparence : aucun ;
  aspect : aucun ;
  fond : transparent ;
  curseur : pointeur ;
  largeur : 15 rem ;
}
```
Plage de saisie dans Chrome avant l'arrière-plan : le transparent est appliqué. ( Grand aperçu)

Saisie de plage dans Chrome après l'application de tous les styles de réinitialisation. ( Grand aperçu)
Styliser la piste
Lors du style de la piste (et du pouce), nous devrons cibler les différents préfixes de fournisseur spécifiques aux navigateurs afin d'appliquer les styles appropriés dans l'élément concerné. À l'avenir, tout pseudo-element préfixé par -webkit sera appliqué aux navigateurs Chrome, Safari, Opera et Edge (post-Chromium). Tout ce qui est précédé de -moz appartient à Firefox.
Vous trouverez ci-dessous les pseudo-éléments que nous utiliserons pour cibler la piste :
- ::-webkit-slider-runnable-track
  Cible le piste dans Chrome, Safari et Edge Chromium.
- ::-moz-range-track
  Cible la piste dans Firefox.
```
                        /**** * Styles de piste *****/
/***** Chrome, Safari, Opera et Edge Chromium *****/
input[type="range"] ::-webkit-slider-runnable-track {
  arrière-plan : #053a5f ;
  hauteur : 0,5 rem ;
}

/******** Firefox ********/
input[type="range"]::-moz-range-track {
  arrière-plan : #053a5f ;
  hauteur : 0,5 rem ;
}
```
Les seules propriétés requises pour la piste sont height et background. Cependant, il est courant de voir un border-radius appliqué afin d'arrondir les bords.

Plage de saisie dans Firefox après le les styles de piste ont été appliqués. ( Grand aperçu)
Styling The Thumb
Le style du pouce (le bouton du milieu que l'utilisateur déplace) a plus de nuances qui doivent être prises en compte car il y a plus d'incohérences entre les navigateurs sur cette partie de la plage d'entrée.
Vous trouverez ci-dessous les pseudo-éléments que nous utiliserons pour cibler le pouce :
- ::-webkit-slider-thumb
  Cible le pouce dans Chrome, Safari et Edge Chromium.
- ::- moz-range-thumb
  Cible le thumb dans Firefox.
Comme Firefox et les navigateurs Webkit ont des problèmes de style différents, je vais aborder chaque problème individuellement et montrer comment gérer chacun des paramètres par défaut bizarres qui sont appliqués au pouce.
Chrome, Safari, Edge Chromium (Webkit)
Le premier style que nous devons appliquer au pseudo-élément ::-webkit-slider-thumb est le -webkit-appearance : aucun ; préfixe du fournisseur. Nous avons utilisé cette propriété dans la section « Styles de base » pour remplacer les styles généraux par défaut qui sont appliqués par le navigateur et elle sert un objectif similaire sur le pouce.
<img loading="lazy" decoding="async" importance= "low" width="800" height="165" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://cloud.netlifyusercontent.com/assets/ 344dbf88-fdf9-42bb-adb4-46f01eedd629/0c9b8ca4-812a-4225-98d2-f9ed194541a5/9-create-custom-range-input.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c9b8ca4-812a-4225- 98d2-f9ed194541a5/9-create-custom-range-input.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c9b8ca4-812a-4225- 98d2-f9ed194541a5/9-create-custom-range-input.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c9b8ca4-812a-4225- 98d2-f9ed194541a5/9-create-custom-range-input.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c9b8ca4-812a-4225- 98d2-f9ed194541a5/9-create-custom-range-input.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://cloud.netlifyusercontent. com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c9b8ca4-812a-4225-98d2-f9ed194541a5/9-create-custom-range-input.png" tailles="100vw" alt="Plage d'entrée dans Chrome après -webkit-appearance : aucun ; est appliqué »/>
Plage d'entrée dans Chrome après -webkit-appearance : aucun ; est appliqué. ( Grand aperçu)
Une fois les styles par défaut supprimés, nous pouvons ensuite appliquer nos propres styles personnalisés. En supposant que nous appliquions une heightwidth et background-color au pouce, voici un exemple de ce que nous aurions jusqu'à présent :

Plage d'entrée dans Chrome avec des styles de pouce personnalisés. ( Grand aperçu)
Par défaut, les navigateurs WebKit rendent le pouce de sorte qu'il ne soit pas centré sur la piste.
Afin de bien centrer le pouce sur la piste, nous pouvons utiliser la formule suivante et l'appliquer à la marge -top property:
margin-top = (hauteur de la piste en pixels / 2) – (hauteur du pouce en pixels /2)
Prendre les styles que nous avons appliqués dans les sections précédentes et convertir rems en pixels, nous aurions une hauteur de piste de 8px et une hauteur de pouce de 32px. Cela signifierait que :
margin-top = (8/2) – (32/2) = 4 – 16 = -12px
Basé sur cela, nos styles finalisés pour les navigateurs webkit ressembleraient au code suivant bloc :
```
/***** Styles de pouce *****/
/***** Chrome, Safari, Opera et Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
   -webkit-apparence : aucun ; /* Remplacer l'apparence par défaut */
   aspect : aucun ;
   marge supérieure : -12 px ; /* Centre le pouce sur la piste */
   couleur de fond : #5cd5eb ;
   hauteur : 2 rem ;
   largeur : 1rem ;
}
```
Plage de saisie dans Chrome une fois tous les styles appliqués. ( Grand aperçu)
Firefox
Lors de l'application de styles au pouce dans Firefox, vous devrez tirer parti du pseudo-élément ::-moz-range-thumb. Heureusement, Firefox ne souffre pas du même problème de centrage que les navigateurs Webkit. Cependant, il y a un problème autour du rayon de bordure par défaut et de la bordure grise qu'il applique au pouce.

( Grand aperçu)
Afin de corriger la bordure grise par défaut, nous pouvons ajouter la propriété border: none;. Pour supprimer le border-radius par défaut qui est appliqué, nous pouvons ajouter la propriété border-radius: 0 et maintenant le pouce semblera cohérent dans tous les navigateurs.
Sur cette base, nos styles finalisés pour le Les navigateurs webkit ressembleraient à ceci :
```
 /***** Styles de pouce *****/
/***** Firefox *****/
input[type="range"]::-moz-range-thumb {
    bordure : aucune ; /*Supprime la bordure supplémentaire que FF applique*/
    rayon de bordure : 0 ; /*Supprime le rayon de bordure par défaut que FF applique*/
    couleur de fond : #5cd5eb ;
    hauteur : 2 rem ;
    largeur : 1rem ;
}
```
Remarque : Les navigateurs Webkit n'appliquent pas automatiquement ce rayon à la bordure, donc si vous trouvez que vous souhaitez appliquer une forme de rayon de bordure au pouce, au lieu de l'annuler comme nous l'avons fait ci-dessus, vous devrez appliquer les dimensions souhaitées border-radius aux -webkit-slider-thumb et ::-moz-range- thumb pseudo-éléments.
Focus Styles
Parce que la saisie de plage est un élément interactif, il est impératif d'ajouter des styles de focus pour se conformer aux meilleures pratiques et normes d'accessibilité. Lorsque des styles de focus sont appliqués, cela fournit un indicateur visuel aux utilisateurs et est particulièrement important pour ceux qui utilisent un clavier pour naviguer sur une page.
Selon la WAI-ARIA : documentation Slideril est recommandé que :
La mise au point est placée sur le curseur (l'objet visuel que l'utilisateur de la souris déplacerait, également connu sous le nom de pouce).
La première chose que nous voulons faire est de supprimer les styles de focus par défaut afin de pouvoir les remplacer par des styles personnalisés. Afin de cibler les styles de focus des pouces, nous pouvons tirer parti des pseudo-éléments ::-webkit-slider-thumb et ::-moz-range-thumb que nous avons utilisés dans le section précédente et les combiner avec la :focus psuedo-class. Nous pouvons ensuite utiliser les propriétés CSS outline et outline-offset pour le styler comme nous le souhaitons.
```
/***** Focus Styles *****/
/* Supprime le focus par défaut */
entrée[type="range"]:focus {
  contour : aucun ;
}

/***** Chrome, Safari, Opera et Edge Chromium *****/
input[type="range"]:focus::-webkit-slider-thumb {
  bordure : 1px solide #053a5f ;
  contour : 3px solide #053a5f ;
  décalage du contour : 0,125 rem ;
}

/******** Firefox ********/
input[type="range"]:focus::-moz-range-thumb {
  bordure : 1px solide #053a5f ;
  contour : 3px solide #053a5f ;
  décalage du contour : 0,125 rem ;
}
```
Note : Si un border-radius est appliqué au pouce, Firefox restitue un contour dans la forme du pouce tandis que les autres navigateurs affichent un contour en blocs. Malheureusement, il n'y a pas de solution CSS simple pour cela et c'est la seule incohérence qui sera présente. Cependant, l'objectif principal de l'ajout de ces styles est à des fins d'accessibilité et l'objectif principal, fournir un indicateur visuel lorsque l'élément est mis au point, est toujours atteint.

Saisie de plage dans Chrome avec des styles de focus personnalisés appliqués. ( Grand aperçu)
Tout mettre ensemble
Maintenant que nous avons couvert tous les styles nécessaires pour uniformiser l'entrée de la plage, voici à quoi ressemblera la feuille de style CSS finale :
```
/********** Styles d'entrée de plage **********/
/*Réinitialisation de la plage*/
entrée[type="range"] {
   -webkit-apparence : aucun ;
    aspect : aucun ;
    fond : transparent ;
    curseur : pointeur ;
    largeur : 15 rem ;
}

/* Supprime le focus par défaut */
entrée[type="range"]:focus {
  contour : aucun ;
}

/***** Styles Chrome, Safari, Opera et Edge Chromium *****/
/* piste de curseur */
input[type="range"] ::-webkit-slider-runnable-track {
   couleur d'arrière-plan : #053a5f ;
   rayon de bordure : 0,5 rem ;
   hauteur : 0,5 rem ;
}

/* curseur curseur */
input[type="range"]::-webkit-slider-thumb {
  -webkit-apparence : aucun ; /* Remplacer l'apparence par défaut */
   aspect : aucun ;
   marge supérieure : -12 px ; /* Centre le pouce sur la piste */

   /*styles personnalisés*/
   couleur de fond : #5cd5eb ;
   hauteur : 2 rem ;
   largeur : 1rem ;
}

input[type="range"]:focus::-webkit-slider-thumb {
  bordure : 1px solide #053a5f ;
  contour : 3px solide #053a5f ;
  décalage du contour : 0,125 rem ;
}

/******** Styles Firefox ********/
/* piste de curseur */
input[type="range"]::-moz-range-track {
   couleur d'arrière-plan : #053a5f ;
   rayon de bordure : 0,5 rem ;
   hauteur : 0,5 rem ;
}

/* curseur curseur */
input[type="range"]::-moz-range-thumb {
   bordure : aucune ; /*Supprime la bordure supplémentaire que FF applique*/
   rayon de bordure : 0 ; /*Supprime le rayon de bordure par défaut que FF applique*/

   /*styles personnalisés*/
   couleur de fond : #5cd5eb ;
   hauteur : 2 rem ;
   largeur : 1rem ;
}

input[type="range"]:focus::-moz-range-thumb {
  bordure : 1px solide #053a5f ;
  contour : 3px solide #053a5f ;
  décalage du contour : 0,125 rem ;
}
```
Conclusion
En plus des méthodes décrites tout au long de l'article, vous pouvez également profiter du générateur CSS d'entrée de gamme que j'ai créé appelé range-input.css. Le cœur de ce projet était de créer un outil qui simplifie ce processus pour les développeurs. Le générateur CSS vous permet de styliser rapidement les propriétés CSS courantes et fournit un curseur de démonstration qui affiche un aperçu en temps réel des styles que vous souhaitez appliquer.
Espérons que les entrées de plage de style seront plus simples à l'avenir. Cependant, jusqu'à ce que ce jour vienne, savoir quels pseudo-éléments et préfixes de fournisseur cibler vous aidera à vous mettre sur la bonne voie pour styliser les curseurs en fonction de vos besoins.
Autres ressources sur Smashing Magazine
(vf, yk, il)