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

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

ราเชล แอนดรูว์

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

ปัญหา

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

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

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

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

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

นอกจากนี้ นักพัฒนาซอฟต์แวร์ยังอาจทำให้เกิดการยกเลิกการเชื่อมต่อด้วยการแสดงรายการในตารางกริดโดยเรียงลำดับต่างกันตามคำสั่งในแหล่งที่มา

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

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

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

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

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

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

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

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

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

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

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

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