Comment obtenir des curseurs de plage verticale avec une prise en charge optimale du navigateur ?

Curseurs de plage verticale : un guide pour une prise en charge optimale des navigateurs

Dans le domaine du développement Web, le curseur de plage HTML5 offre un moyen pratique de contrôler les entrées de l’utilisateur dans une plage spécifique. Cependant, l'alignement vertical de ces curseurs peut poser des problèmes sur différents navigateurs.

Ne pouvons-nous pas simplement augmenter la hauteur ?

Au départ, on pensait qu'il suffisait de régler la hauteur du curseur supérieur à sa largeur déclencherait une orientation verticale automatique. Cependant, cette approche présente des limites :

• Informations obsolètes : Dans la plupart des navigateurs, l'augmentation de la hauteur n'influence plus l'orientation.

La transformation verticale

Pour obtenir un curseur de plage aligné verticalement, envisagez ces solutions spécifiques au navigateur :

• Navigateurs modernes (Chrome, Firefox) :

  • Appliquez le mode d'écriture : vertical-lr pour établir la direction d'écriture verticale.
  • Utilisez la direction : rtl (de droite à gauche) pour glisser vers le haut pour diminuer la valeur et glisser vers le bas pour augmenter la valeur.

• Anciens navigateurs Chrome :

  • Utiliser l'apparence : slider-vertical pour forcer une verticale orientation.
  • Définissez une largeur explicite (par exemple, 16 px) pour correspondre à la largeur par défaut des curseurs verticaux dans les navigateurs modernes.

• Anciens navigateurs Firefox :

  • Ajoutez un attribut orient="vertical" au element.

Exemple de mise en œuvre

Incorporez l'extrait de code suivant pour afficher un curseur de plage aligné verticalement qui prend en charge la plupart des navigateurs :

<code class="css">input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 16px;
    vertical-align: bottom;
}</code>

<code class="html"><input type="range" orient="vertical" /></code>

Conclusion

En utilisant ces solutions spécifiques au navigateur, vous pouvez orienter efficacement les curseurs de plage verticalement, garantissant des contrôles de saisie cohérents et conviviaux sur diverses plates-formes. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!