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

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

Rachel Andrew

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

ปัญหา

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

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

คลิกตัวอย่างแล้วกด Tab เพื่อดูว่าลำดับ Tab แยกออกจากลำดับเลย์เอาต์ได้อย่างไรโดยใช้พร็อพเพอร์ตี้ `order`

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

คลิกตัวอย่างแล้วกด Tab เพื่อดูว่าลำดับแท็บไม่ได้เชื่อมต่อกับลำดับเลย์เอาต์อย่างไร โดยครั้งนี้จะจัดเรียงรายการแบบกริดตามลำดับ

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

คลิกตัวอย่างและกด Tab เพื่อดูว่าลำดับการกด Tab แยกออกจากลำดับเลย์เอาต์ได้อย่างไรโดยใช้พร็อพเพอร์ตี้การจัดวางกริด

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

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

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

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

Does this mean that source order doesn't matter?

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

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

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

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

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

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

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

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