Comment créer un curseur de plage orienté verticalement : un guide de compatibilité et des techniques modernes ?

Curseur d'entrée de plage verticale : orientation et compatibilité

Dans le monde du développement Web, la présentation verticale des curseurs peut améliorer l'expérience utilisateur et s'adapter à des mises en page spécifiques. . Cet article explore les techniques permettant d'obtenir une orientation verticale avec une balise HTML5 slider, compte tenu de la compatibilité du navigateur et de la mise en œuvre moderne.

Au départ, on pensait que l'ajustement de la hauteur et de la largeur de l'élément slider déclencherait une orientation verticale automatique dans les navigateurs pris en charge. Cependant, les tests ont révélé que cette méthode n'est plus fiable, obligeant les développeurs à rechercher des solutions alternatives.

Approche moderne

Pour les versions actuelles de Chrome et Firefox, la solution la plus efficace implique d'utiliser les propriétés du mode d'écriture et de la direction :

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

Régler le mode d'écriture sur vertical-lr (ou vertical-rl) inverse la direction d'écriture, tandis que direction : rtl (de droite à gauche) garantit le fait de glisser vers le haut réduit la valeur, conformément aux conventions standard.

Prise en charge des anciens navigateurs

Pour les anciennes versions de Chrome et d'autres navigateurs basés sur Chromium :

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

Application de l'apparence : slider-vertical force l'orientation verticale et la définition d'une largeur fixe s'aligne sur la largeur par défaut utilisée dans les navigateurs modernes.

Compatibilité Firefox

Pour les anciennes versions de Firefox :

html {
    orient: vertical;
}

Ajout de l'attribut orient au champ L'élément déclenche l'orientation verticale de tous les curseurs de la page.

En résumé, ces techniques fournissent des méthodes fiables pour afficher curseurs verticalement, garantissant une expérience utilisateur et un attrait visuel optimaux sur une large gamme de navigateurs.

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!