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

Rachel Andrew

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

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

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

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

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

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

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

โฟลว์เริ่มต้นของรายการที่ยืดหยุ่นด้วย row-reverse

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

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

ด้วย 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; }

ด้วย reading-flow: grid-rows

ลองเลย

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

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

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

ปัญหาที่ยังไม่ได้รับการแก้ไข สำหรับกลุ่มทำงาน CSS ในการตัดสินใจวิธีจัดการกับสถานการณ์ที่องค์ประกอบย่อยรายการใดรายการหนึ่งที่มีโฟลว์การอ่านมี 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 จริง

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

ลองเลย

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

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