ขอความคิดเห็นของนักพัฒนาซอฟต์แวร์เกี่ยวกับลำดับการอ่านและองค์ประกอบที่มีการแสดงผล: เนื้อหา

Rachel Andrew

เมื่อปีที่แล้ว เราได้เผยแพร่บล็อกโพสต์การแก้ปัญหาเลย์เอาต์ CSS และลําดับแหล่งที่มาไม่ตรงกัน เอกสารนี้แสดงรายละเอียดข้อเสนอที่กลุ่มทำงาน CSS กำลังพูดคุยกัน โดยมีจุดประสงค์เพื่อแก้ปัญหาการจัดเรียงรายการใหม่ใน Flexbox และตารางกริดทำให้การกด Tab ใช้งานไม่ได้ ส่วนเริ่มต้นของโพสต์จะระบุปัญหาที่กลุ่มทำงานพยายามแก้ไข สิ่งต่างๆ เปลี่ยนแปลงไปนับตั้งแต่นั้น และโพสต์นี้จะให้ข้อมูลอัปเดตสั้นๆ เกี่ยวกับสถานการณ์ปัจจุบัน นอกจากนี้เรายังมีพื้นที่เฉพาะที่ต้องการความคิดเห็นจากคุณ เราจะจัดการกับรายการที่มี display-contents ได้อย่างไร

การอัปเดตข้อเสนอ

ตอนนี้มีข้อความข้อกำหนดฉบับร่างในข้อกำหนด CSS Display ระดับ 4 แล้ว การดำเนินการนี้จะสร้างพร็อพเพอร์ตี้ใหม่ชื่อ reading-flow ระบบจะเพิ่มพร็อพเพอร์ตี้นี้ลงในองค์ประกอบที่รองรับสำหรับเลย์เอาต์ Flex หรือตารางกริด (องค์ประกอบที่มี display: grid หรือ display: flex)

พร็อพเพอร์ตี้นี้ยอมรับค่าต่อไปนี้

• normal: ทำตามลำดับขององค์ประกอบใน DOM ซึ่งเป็นลักษณะการทำงานปัจจุบัน
• flex-visual: มีผลกับคอนเทนเนอร์ Flex เท่านั้น ทำตามลำดับการอ่านภาพของรายการ Flex โดยคำนึงถึงโหมดการเขียน
• flex-flow: มีผลกับคอนเทนเนอร์ Flex เท่านั้น เป็นไปตามทิศทาง flex-flow
• grid-rows: มีผลกับคอนเทนเนอร์ตารางกริดเท่านั้น เรียงลำดับตามภาพของรายการแบบตารางกริดตามแถว โดยนำโหมดการเขียนมาพิจารณาด้วย
• grid-columns: มีผลกับคอนเทนเนอร์ตารางกริดเท่านั้น เรียงลำดับตามภาพของรายการในตารางกริดตามคอลัมน์โดยคำนึงถึงโหมดการเขียน
• grid-order: มีผลกับคอนเทนเนอร์แบบตารางกริดเท่านั้น นำพร็อพเพอร์ตี้ order มาพิจารณา แต่จะทำงานเหมือนกับ normal

ตัวอย่างเช่น หากคุณมีรายการ Flex 3 รายการในคอนเทนเนอร์ และตั้งค่า flex-direction เป็น row-reverse รายการเหล่านั้นจะอยู่ในตอนท้ายของคอนเทนเนอร์ Flex และลำดับแท็บจะย้ายจากขวาไปซ้าย

.flex {
  display: flex;
  flex-direction: row-reverse;
}

เพิ่ม flex-flow: visual แล้วลำดับการอ่านจะเป็นไปตามลำดับภาพในภาษาอังกฤษ ซึ่งก็คือจากซ้ายไปขวา

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

ในเลย์เอาต์ตารางกริด ให้ใช้ reading-flow เพื่อจัดเรียงตามแถวหรือคอลัมน์ที่มองเห็นแทนลำดับแหล่งที่มา ในตัวอย่างนี้ ขั้นตอนการอ่านจะเป็นไปตามแถว

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

ลองเลย

ขณะนี้พร็อพเพอร์ตี้ CSS นี้ยังอยู่ในขั้นทดลอง แต่คุณเปิดใช้เพื่อทดสอบได้ หากต้องการลองใช้งาน ให้ติดตั้ง Chrome Dev หรือ Canary เวอร์ชัน 128 ขึ้นไป แล้วเปิดใช้แฟล็กรันไทม์ CSSReadingFlow เรามีตัวอย่างบางส่วนที่จะช่วยคุณเริ่มต้นใช้งาน ซึ่งทั้งหมดใช้งานได้ใน Canary ที่เปิดใช้ Flag

ลักษณะการทํางานของเคส display: contents ยังอยู่ระหว่างการพัฒนาและอาจเปลี่ยนแปลงตามความคิดเห็นที่คุณให้ไว้หลังจากอ่านส่วนต่อไปนี้ของโพสต์นี้

องค์ประกอบที่มี display: contents และคอมโพเนนต์เว็บ

ปัญหาที่ยังไม่ได้รับการแก้ไขสำหรับกลุ่มทำงาน CSS คือการตัดสินใจว่าจะจัดการกับสถานการณ์ที่องค์ประกอบย่อยขององค์ประกอบที่มี reading-flow มี display: contents อย่างไร และจะทำอย่างไรหากรายการนั้นเป็น <slot>

ในตัวอย่างต่อไปนี้ องค์ประกอบ <div> มี display: contents ด้วยเหตุนี้ องค์ประกอบ <button> ทั้งหมดจึงได้รับการโปรโมตให้เข้าร่วมในเลย์เอาต์แบบยืดหยุ่น และ reading-flow จึงจะพิจารณาลำดับขององค์ประกอบเหล่านั้น

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

เราอยากทราบว่าคุณมีตัวอย่างการใช้งานจริงที่ก่อให้เกิดสถานการณ์ดังที่เห็นในตัวอย่างนี้หรือไม่ คุณเคยต้องจัดเรียงรายการที่อยู่ภายในองค์ประกอบที่มี display: contents ใหม่กับรายการที่ไม่ใช่พี่น้องกันเนื่องจากเป็นพี่น้องของรายการที่มี display: contents ไหม

นอกจากนี้ ขณะที่เราแก้ไขปัญหาเกี่ยวกับ display: contents เราขอแนะนำให้ดูตัวอย่างที่คุณอาจต้องใช้พร็อพเพอร์ตี้ reading-flow กับ display: contents การทำความเข้าใจกรณีการใช้งานที่เกิดขึ้นจริงจะช่วยเราออกแบบโซลูชันที่ตรงกับความต้องการของคุณ

เพิ่ม Use Case ในปัญหาเกี่ยวกับกลุ่มการทำงาน CSS หากคุณมีตัวอย่างในเว็บไซต์ที่เผยแพร่อยู่หรือสร้างการสาธิตใน CodePen หรือ JSFiddle ได้ สิ่งเหล่านี้จะเป็นประโยชน์อย่างยิ่งเมื่อเรามาพูดคุยเกี่ยวกับปัญหานี้ร่วมกัน หากคุณมีความคิดเกี่ยวกับสิ่งที่คาดว่าจะเกิดขึ้น ก็นับว่ามีประโยชน์เช่นกัน แต่สิ่งสําคัญที่สุดคือการดู Use Case จริง