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 un curseur HTML5, en tenant compte de la compatibilité du navigateur et de la mise en œuvre moderne.

Au départ, on pensait qu'ajuster la hauteur et la largeur de l'élément du curseur permettrait déclencher l’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 de mode d'écriture et de direction :

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

Régler le mode d'écriture sur vertical-lr (ou vertical-rl) inverse le sens d'écriture, tandis que direction: rtl (de droite à gauche) garantit que le glissement vers le haut réduit la valeur, en respectant les 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 : le curseur 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;
}

L'ajout de l'attribut orient à 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 verticaux, garantissant une expérience utilisateur et un attrait visuel optimaux sur une large gamme de navigateurs.