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