Bagaimana untuk Membuat Slider Julat Berorientasikan Menegak: Panduan untuk Keserasian dan Teknik Moden?

Peluncur Input Julat Menegak: Orientasi dan Keserasian

Dalam dunia pembangunan web, mempersembahkan peluncur secara menegak boleh meningkatkan pengalaman pengguna dan menampung reka letak tertentu . Artikel ini meneroka teknik untuk mencapai orientasi menegak dengan HTML5 peluncur, mempertimbangkan keserasian penyemak imbas dan pelaksanaan moden.

Pada mulanya, adalah dipercayai bahawa melaraskan ketinggian dan lebar elemen peluncur akan mencetuskan orientasi menegak automatik dalam pelayar yang disokong. Walau bagaimanapun, ujian mendedahkan bahawa kaedah ini tidak lagi boleh dipercayai, menyebabkan pembangun mencari penyelesaian alternatif.

Pendekatan Moden

Untuk versi semasa Chrome dan Firefox, penyelesaian yang paling berkesan melibatkan penggunaan mod penulisan dan sifat arah:

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

Menetapkan mod penulisan kepada menegak-lr (atau menegak-rl) membalikkan arah tulisan, manakala arah: rtl (kanan ke kiri) memastikan yang meluncur ke atas mengurangkan nilai, mematuhi konvensyen standard.

Sokongan Penyemak Imbas Warisan

Untuk versi Chrome yang lebih lama dan penyemak imbas berasaskan Chromium yang lain:

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

Menggunakan penampilan: gelangsar-menegak memaksa orientasi menegak dan menetapkan lebar tetap sejajar dengan lebar lalai yang digunakan dalam penyemak imbas moden.

Keserasian Firefox

Untuk versi Firefox yang lebih lama:

html {
    orient: vertical;
}

Menambahkan atribut orient pada elemen mencetuskan orientasi menegak untuk semua peluncur pada halaman.

Ringkasnya, teknik ini menyediakan kaedah yang boleh dipercayai untuk memaparkan peluncur secara menegak, memastikan pengalaman pengguna yang optimum dan daya tarikan visual merentas pelbagai pelayar.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Slider Julat Berorientasikan Menegak: Panduan untuk Keserasian dan Teknik Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!