การแก้ไขการเชื่อมต่อเลย์เอาต์ CSS และลำดับแหล่งที่มา

เราต้องการความคิดเห็นของคุณเกี่ยวกับวิธีแก้ปัญหาที่เสนอสำหรับปัญหาเกี่ยวกับวิธีการจัดวางที่จัดเรียงรายการในลำดับที่ไม่ได้เชื่อมโยงกับแหล่งที่มาของเอกสาร

Rachel Andrew

กลุ่มทำงาน CSS กำลังหาวิธีแก้ปัญหาในกรณีที่วิธีการจัดวางสามารถจัดเรียงรายการตามลำดับที่ไม่ได้เชื่อมโยงกับแหล่งที่มา และไม่ได้เชื่อมโยงกับการอ่านและลําดับโฟกัสของเอกสาร บทความนี้จะอธิบายปัญหาและวิธีแก้ปัญหาที่เสนอ และเรายินดีรับฟังความคิดเห็นของคุณ

ปัญหา

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

เช่น การใช้พร็อพเพอร์ตี้ order ในรายการ Flex จะเปลี่ยนลําดับเลย์เอาต์ แต่ไม่เปลี่ยนลําดับในแหล่งที่มา

เมื่อใช้เลย์เอาต์ตารางกริด วิธีการเลย์เอาต์ที่เลือกอาจทำให้ลําดับแท็บสับสน เช่น เมื่อใช้ grid-auto-flow: dense ซึ่งจะสร้างลําดับเลย์เอาต์ของรายการแบบสุ่ม

นักพัฒนาแอปยังอาจทําให้เกิดความขาดการเชื่อมต่อนี้ได้ด้วยการวางรายการในตารางกริดตามลําดับที่แตกต่างจากที่ระบุไว้ในแหล่งที่มา

โซลูชันที่เสนอ

คณะทำงานของ CSS กำลังเสนอวิธีแก้ปัญหานี้ และอยากทราบความคิดเห็นจากนักพัฒนาซอฟต์แวร์และชุมชนการช่วยเหลือพิเศษเกี่ยวกับแนวทางนี้

การใช้เลย์เอาต์แบบสุ่มกับ reading-order: auto

ในสถานการณ์ที่สร้างลําดับเลย์เอาต์แบบสุ่ม เช่น เมื่อใช้การบรรจุแบบหนาแน่นในเลย์เอาต์ตารางกริด คุณอาจต้องการให้เบราว์เซอร์เป็นไปตามเลย์เอาต์ แทนที่จะเป็นไปตามลําดับแหล่งที่มา หากต้องการให้เกิดกรณีนี้ รายการ Flex หรือตารางกริดต้องมีพร็อพเพอร์ตี้ reading-order ที่มีค่าเป็น auto

CSS ต่อไปนี้จะทำให้ลำดับการอ่านเป็นไปตามตำแหน่งของรายการที่มีความหนาแน่นเนื่องจาก grid-auto-flow: dense

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

การใช้ reading-order-items กับเลย์เอาต์ที่ไม่ได้สุ่มเลือก

ในเลย์เอาต์ตารางกริดและ Flex บางรายการ ลำดับเลย์เอาต์จะเข้าใจได้ง่าย ตัวอย่างเช่น ในเลย์เอาต์แบบ Flex ที่ใช้พร็อพเพอร์ตี้ order เพื่อจัดเรียงรายการใหม่ จะมีลําดับเลย์เอาต์ที่ชัดเจนซึ่งพร็อพเพอร์ตี้ order กำหนด ในเลย์เอาต์อื่นๆ ลำดับเลย์เอาต์ที่เหมาะสมอาจไม่ชัดเจนนัก และอาจมีตัวเลือกมากกว่า 1 รายการ ดังนั้น เมื่อใช้เลย์เอาต์แบบไม่สุ่ม คุณจะต้องเพิ่มพร็อพเพอร์ตี้ grid-order-items ลงในคอนเทนเนอร์ พร้อมค่าคีย์เวิร์ดซึ่งอธิบายถึงเจตนาของคุณสำหรับลําดับเลย์เอาต์

ตัวอย่างต่อไปนี้แสดงเลย์เอาต์ Flex โดยใช้ row-reverse รายการ Flex มี reading-order: auto และคอนเทนเนอร์ Flex มี reading-order-items: flex flow เพื่อระบุว่าเราต้องการให้ลำดับการอ่านเป็นไปตามทิศทาง flex-flow ด้วย แทนที่จะเป็นไปตามลำดับภาพ (ซึ่งเราระบุได้ด้วย flex visual)

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

ในตัวอย่างถัดไปนี้ ระบบจะสร้างเลย์เอาต์ตารางกริดโดยใช้ grid-template-areas และวางรายการในลำดับเลย์เอาต์ที่แตกต่างจากลำดับแหล่งที่มา พร็อพเพอร์ตี้ reading-order-items ใช้เพื่อระบุว่าเราควรทำตามลําดับเลย์เอาต์ โดยไปยังแต่ละแถวก่อนที่จะไปยังแถวถัดไป (grid column จะระบุทิศทางตรงกันข้าม)

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

Does this mean that source order doesn't matter?

ไม่ ลําดับแหล่งที่มายังคงสําคัญ ฟังก์ชันการทำงานนี้ควรใช้ในบางสถานการณ์ที่ลําดับการอ่านอาจแตกต่างจากแหล่งที่มาเท่านั้น เช่น เมื่อใช้วิธีการจัดวางที่อาจทำให้เกิดปัญหานี้ เช่น การจัดวางตารางกริดที่หนาแน่น หรือเมื่อลําดับเลย์เอาต์อื่นเหมาะสมกว่าที่จุดพัก

เมื่อใช้พร็อพเพอร์ตี้เหล่านี้ ให้สร้างเอกสารต้นฉบับโดยใช้ลําดับที่สมเหตุสมผลหากหน้าเว็บแสดงผลโดยไม่มี CSS เพิ่มพร็อพเพอร์ตี้เหล่านี้เฉพาะในตำแหน่งและจุดพักที่ต้องใช้เท่านั้น

เครื่องมือการเขียนควรใช้พร็อพเพอร์ตี้เหล่านี้ไหม

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

โปรดแสดงความคิดเห็นเกี่ยวกับข้อเสนอนี้

เราอยากทราบความคิดเห็นเกี่ยวกับเรื่องนี้ โดยเฉพาะอย่างยิ่ง หากคุณมี Use Case ที่คิดว่าแนวทางนี้ไม่สามารถแก้ปัญหาได้ หรือมีข้อกังวลด้านการช่วยเหลือพิเศษเกี่ยวกับแนวทางนี้ โปรดแจ้งให้กลุ่มทํางาน CSS ทราบ

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

ภาพขนาดย่อโดย Patrick Tomasso ขอขอบคุณ Chris Harrelson, Tab Atkins และ Ian Kilpatrick สำหรับความคิดเห็นและการตรวจสอบ