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

Rachel Andrew

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

ข้อมูลอัปเดตเกี่ยวกับข้อเสนอ

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

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

  • normal: ทำตามลำดับขององค์ประกอบใน DOM ซึ่งก็คือค่าปัจจุบัน พฤติกรรมของคุณ
  • flex-visual: มีผลกับคอนเทนเนอร์ Flex เท่านั้น เป็นไปตาม ลำดับการอ่านรายการ Flex พร้อมด้วยโหมดการเขียน
  • flex-flow: มีผลกับคอนเทนเนอร์ Flex เท่านั้น เป็นไปตามโฟลว์เฟล็กซ์ เส้นทางการเรียนรู้
  • 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> ทั้งหมดจะได้รับการโปรโมตให้มีส่วนร่วมใน Flex ดังนั้น 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 การทำความเข้าใจโลกแห่งความเป็นจริง กรณีการใช้งานของคุณจะช่วยให้เราออกแบบโซลูชันที่ตรงกับความต้องการของคุณได้

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