การเปิดตัวใน Chrome 119 ถึง 123 เป็นฟีเจอร์ใหม่ของ CSS สากลจากโหมดการเขียน CSS ระดับ 4 โหมดการเขียนแนวตั้งสำหรับองค์ประกอบการควบคุมแบบฟอร์มหมายความว่าองค์ประกอบเหล่านี้สามารถแสดงในโหมดการเขียนแนวตั้ง โดย Chrome 123 จะเปิดใช้ฟีเจอร์นี้ สำหรับผู้ใช้ทั้งหมด โพสต์นี้จะอธิบายเกี่ยวกับฟีเจอร์
โหมดการเขียนแนวตั้งสำหรับองค์ประกอบการควบคุมแบบฟอร์มแบบข้อความ
เมื่อเปิดใช้ฟีเจอร์นี้โดยสมบูรณ์แล้ว คุณจะใช้โหมดการเขียนแนวตั้งสำหรับองค์ประกอบการควบคุมแบบฟอร์มได้ เช่น ปุ่ม เลือกรายการ และองค์ประกอบความคืบหน้า หากต้องการใช้เครื่องมือนี้ ให้ตั้งค่าโหมดการเขียนของพร็อพเพอร์ตี้ CSS เป็น vertical-lr
สำหรับทิศทางโฟลว์บล็อกจากซ้ายไปขวา และ vertical-rl
สำหรับทิศทางโฟลว์บล็อกจากขวาไปซ้าย
สิ่งนี้จะเป็นประโยชน์สำหรับภาษาในเอเชียตะวันออกหลายๆ ภาษา ซึ่งเดิมทีใช้อักษรแนวตั้งในการเขียน เช่น ภาษาญี่ปุ่นแบบดั้งเดิมมักเขียน ในแนวตั้งจากขวาไปซ้าย
ต่อไปนี้เป็นตัวอย่างที่เป็นสากลสำหรับการควบคุมแบบฟอร์มแนวตั้ง
ปุ่ม
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select>
องค์ประกอบ
คุณระบุได้ว่าองค์ประกอบ <select>
จะแสดงข้อความทั้งหมดในแนวตั้ง
select {
writing-mode: vertical-lr;
}
<select multiple>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
<select>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
โปรดทราบว่าการใช้งานปัจจุบันจะยังมีตัวเลือกของหน้าต่างป๊อปอัปแสดงในแนวนอน
อินพุตแบบข้อความ
สำหรับการควบคุมฟอร์มแบบการป้อนข้อมูลหลายรายการ คุณสามารถใช้โหมดการเขียนแนวตั้งเมื่อป้อนข้อความได้แล้ว
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
แถบเลื่อน
นอกจากนี้การแสดงค่าขององค์ประกอบแบบฟอร์มให้เป็นภาพก็อาจมีประโยชน์ นั่นคือการทำงานของแถบเลื่อนอย่าง <meter>
, <progress>
และ <input type=range>
ก่อนหน้านี้ ระบบแสดงผล <range>
ในแนวตั้งได้โดยใช้ค่าลักษณะที่ปรากฏ CSS ที่ไม่ใช่มาตรฐาน slider-vertical
ตอนนี้ ทั้ง 3 อย่างสามารถแสดงเป็นแนวตั้ง
โดยใช้พร็อพเพอร์ตี้ writing-mode
ของ CSS
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
ทิศทาง CSS จะตั้งค่าเป็น ltr
โดยค่าเริ่มต้น ซึ่งหมายความว่าค่าจะแสดงผลจากบนลงล่าง คุณระบุทิศทางของค่าไว้เป็นจากล่างขึ้นบนได้โดยกำหนดทิศทางเป็น rtl
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
มีการทดสอบการเปลี่ยนทิศทางค่าใน Chrome 122 โปรดแจ้งให้เราทราบหากคุณมีความคิดเห็นเกี่ยวกับเรื่องนี้
มีส่วนร่วมและแชร์ความคิดเห็น
หากต้องการแชร์ความคิดเห็นเกี่ยวกับฟีเจอร์เหล่านี้ โปรดแจ้งปัญหาที่ crbug.com