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

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

Rachel Andrew Technical Writer

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

ปัญหา

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

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

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

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

วิธีแก้ปัญหาที่เสนอ

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

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

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

ตัวอย่างต่อไปนี้แสดงเลย์เอาต์แบบยืดหยุ่นที่ใช้ 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;
}

นี่หมายความว่าลำดับของแหล่งที่มาไม่สำคัญใช่ไหม

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

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

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

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

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

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

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

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