แนวทางปฏิบัติที่ดีที่สุดด้วย CSS Grid Layout

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

เมื่อมองให้ลึกขึ้น ฉันคิดว่าบางทีคำขอ "แนวทางปฏิบัติที่ดีที่สุด" นี้อาจบ่งชี้ว่าไม่มั่นใจในการใช้วิธีการจัดวางที่ต่างไปจากเดิมอย่างมาก อาจเป็นความกังวลว่าเรากำลังใช้ Grid สำหรับสิ่งที่ไม่ได้ออกแบบมาสำหรับ หรือไม่ใช้ Grid ในเวลาที่เราควรจะเป็น อาจเป็นเพราะความกังวลเกี่ยวกับการสนับสนุนเบราว์เซอร์รุ่นเก่าหรือว่า Grid เหมาะสมกับเวิร์กโฟลว์การพัฒนาของเราอย่างไร

ในบทความนี้ ฉันจะพยายามครอบคลุมถึงบางสิ่งที่สามารถอธิบายได้ว่าเป็นแนวทางปฏิบัติที่ดีที่สุด และบางสิ่งที่คุณอาจไม่ต้องกังวล

การสำรวจ

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

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

การช่วยสำหรับการเข้าถึง

หากมีส่วนหนึ่งส่วนใดของข้อกำหนด Grid ที่คุณต้องดูแลเมื่อใช้งาน นั่นคือเมื่อใช้สิ่งใดๆ ที่อาจทำให้มีการจัดลำดับเนื้อหาใหม่:

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

— ข้อมูลจำเพาะของกริด: การจัดลำดับใหม่และการเข้าถึง

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

สถานที่ที่คุณต้องระวังเป็นพิเศษคือเมื่อใช้ flex-direction เพื่อย้อนกลับลำดับใน Flexbox; คุณสมบัติการ order ใน Flexbox หรือ Grid การจัดวางรายการกริดโดยใช้วิธีการใด ๆ หากย้ายรายการออกจากลำดับตรรกะในเอกสาร และใช้โหมดการอัดแน่นของ grid-auto-flow

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปัญหานี้ ดูแหล่งข้อมูลต่อไปนี้:

• เค้าโครงกริดและการเข้าถึง - MDN
• Flexbox และการนำทางแป้นพิมพ์ยกเลิกการเชื่อมต่อ

ฉันควรใช้วิธีการเค้าโครงกริดแบบใด

”ด้วยตัวเลือกมากมายใน Grid จึงเป็นความท้าทายที่จะยึดมั่นในวิธีการเขียนที่สอดคล้องกัน (เช่น การตั้งชื่อเส้นกริดหรือไม่ การกำหนดพื้นที่กริด - เทมเพลต ทางเลือก การสืบค้นสื่อ) เพื่อให้สามารถดูแลรักษาได้ทั้งหมด ทีม."

— มิเชล บาร์เกอร์

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

ไม่มีทางถูกหรือผิด ด้านล่างนี้ ฉันจะพูดถึงประเด็นทั่วไปของความสับสน ฉันได้กล่าวถึงประเด็นอื่นๆ ที่อาจก่อให้เกิดความสับสนในบทความก่อนหน้านี้ “Grid Gotchas และ Stumbling Blocks” แล้ว

ฉันควรใช้ตารางโดยนัยหรือชัดเจนหรือไม่

ตารางที่คุณกำหนดด้วย grid-template-columns และ grid-template-rows เรียกว่า Explicit Grid Explicit Grid ช่วยให้คุณสามารถตั้งชื่อบรรทัดบน Grid และยังช่วยให้คุณสามารถกำหนดเป้าหมายบรรทัดท้ายของกริดด้วย -1 คุณจะต้องเลือก Explicit Grid เพื่อทำสิ่งใดสิ่งหนึ่งเหล่านี้ และโดยทั่วไป เมื่อคุณมีเลย์เอาต์ที่ออกแบบและรู้ว่าเส้นกริดของคุณควรไปที่ใดและขนาดของแทร็ก

ฉันใช้ Implicit Grid บ่อยที่สุดสำหรับแทร็กแถว ฉันต้องการกำหนดคอลัมน์ แต่จากนั้นแถวจะถูกปรับขนาดอัตโนมัติและขยายเพื่อให้มีเนื้อหา คุณสามารถควบคุม Implicit Grid ได้ในระดับหนึ่งด้วย grid-auto-columns และ grid-auto-rows อย่างไรก็ตาม คุณมีการควบคุมน้อยกว่าที่คุณกำหนดทุกอย่าง

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

อย่างไรก็ตาม มันเป็นไปได้ที่จะรวมทั้งสองเข้าด้วยกัน ใน CSS ด้านล่าง ฉันได้กำหนดสามคอลัมน์ใน Explicit Grid และสามแถว ดังนั้นเนื้อหาสามแถวแรกจะเป็นดังนี้:

• แทร็กที่มีความสูงอย่างน้อย 200px แต่ขยายเพื่อเพิ่มเนื้อหาให้สูงขึ้น
• แทร็กคงที่ที่ความสูง 400px
• แทร็กที่มีความสูงอย่างน้อย 300px (แต่ขยายได้)

เนื้อหาเพิ่มเติมจะเข้าไปในแถวที่สร้างใน Implicit Grid และฉันกำลังใช้คุณสมบัติ grid-auto-rows เพื่อสร้างแทร็กเหล่านั้นให้มีความสูงอย่างน้อย 300px และขยายเป็น auto

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

ตารางแบบยืดหยุ่นพร้อมจำนวนคอลัมน์ที่ยืดหยุ่นได้

ด้วยการใช้สัญลักษณ์ซ้ำ การป้อนอัตโนมัติ และค่าต่ำสุดสูงสุด คุณสามารถสร้างรูปแบบของแทร็กได้มากเท่าที่จะพอดีกับคอนเทนเนอร์ ดังนั้นจึงไม่จำเป็นต้องใช้ Media Queries ในระดับหนึ่ง เทคนิคนี้สามารถพบได้ในวิดีโอสอนนี้ และยังแสดงให้เห็นพร้อมกับแนวคิดที่คล้ายกันในบทความล่าสุดของฉัน "การใช้ Media Queries For Responsive Design In 2018"

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

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

ฉันควรใช้วิธีการปรับขนาดแทร็กแบบใด

ฉันอธิบายรายละเอียดขนาดแทร็กในบทความของฉัน "กล่องนั้นใหญ่แค่ไหน? การทำความเข้าใจการปรับขนาดในเค้าโครงกริด” อย่างไรก็ตาม ฉันมักได้รับคำถามว่าควรใช้วิธีการปรับขนาดแทร็กแบบใด โดยเฉพาะอย่างยิ่ง ฉันถูกถามเกี่ยวกับความแตกต่างระหว่างขนาดเปอร์เซ็นต์และหน่วย fr

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

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

เพื่อให้หน่วย fr กระจายพื้นที่ ทั้งหมด ในคอนเทนเนอร์กริด คุณต้องกำหนดขนาดขั้นต่ำเป็น 0 โดยใช้ minmax()

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

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

วางรายการอัตโนมัติหรือตั้งตำแหน่งของพวกเขา?

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

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

วิธีการจัดตำแหน่งที่จะใช้?

เมื่อทำงานกับ Grid Layout ในที่สุดทุกอย่างก็ลงมาเพื่อวางรายการจากบรรทัดหนึ่งไปอีกบรรทัดหนึ่ง ทุกสิ่งทุกอย่างเป็นตัวช่วยสำหรับสิ่งนั้น

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

กริดร่วมกับกลไกเลย์เอาต์อื่นๆ

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

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

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

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

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

การทำรังกริดและรายการแบบยืดหยุ่น

สิ่งนี้ยังเกิดขึ้นอีกมาก และไม่มีปัญหากับการสร้างรายการกริดให้เป็นคอนเทนเนอร์กริดด้วย ดังนั้นการซ้อนกริดหนึ่งเข้าไปภายในอีกรายการหนึ่ง คุณสามารถทำเช่นเดียวกันกับ Flexbox การสร้างรายการแบบยืดหยุ่นและคอนเทนเนอร์แบบยืดหยุ่นได้ คุณยังสามารถสร้าง Grid Item และ Flex Container หรือ Flex Item เป็น Grid Container — สิ่งเหล่านี้ไม่มีปัญหา!

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

คุณสามารถมีกริดมากมายในหน้าเดียว

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

ทางเลือกสำรองและรองรับเบราว์เซอร์รุ่นเก่า

“กริดที่ใช้ร่วมกับ @supports ช่วยให้เราควบคุมจำนวนรูปแบบเลย์เอาต์ที่เราคาดหวังได้ดียิ่งขึ้น นอกจากนี้ยังใช้ได้ผลดีกับแนวทางการปรับปรุงแบบก้าวหน้าของเรา ซึ่งหมายความว่าเราสามารถให้รางวัลแก่ผู้ใช้ด้วยเบราว์เซอร์ที่ทันสมัยโดยไม่ต้องป้องกันการเข้าถึงเนื้อหาสำหรับผู้ที่ไม่ใช้เทคโนโลยีล่าสุด”

— Joe Lambert ทำงานบน rareloop.com

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

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

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

เบราว์เซอร์ที่รองรับ Grid Layout ที่ทันสมัย ​​(ไม่ใช่เวอร์ชัน IE) ยังรองรับการสืบค้นข้อมูลด้วยคุณสมบัติ ซึ่งหมายความว่าคุณสามารถทดสอบการสนับสนุน Grid ก่อนใช้งาน

การทดสอบเบราว์เซอร์ที่ไม่รองรับ Grid

เมื่อใช้ทางเลือกสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ Grid Layout (หรือใช้เวอร์ชันนำหน้า -ms สำหรับ IE10 และ 11) คุณจะต้องทดสอบว่าเบราว์เซอร์เหล่านั้นแสดง Grid Layout อย่างไร ในการดำเนินการนี้ คุณต้องมีวิธีดูไซต์ของคุณในเบราว์เซอร์ตัวอย่าง

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

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

ในการทดสอบในพื้นที่ ข้อเสนอแนะของฉันคือการใช้ Virtual Machine โดยติดตั้งเบราว์เซอร์เป้าหมายของคุณ Microsoft เสนอการดาวน์โหลด Virtual Machine ฟรีพร้อม IE เวอร์ชันกลับไปเป็น IE8 และ Edge ด้วย คุณยังสามารถติดตั้งเบราว์เซอร์เวอร์ชันเก่าบน VM โดยไม่รองรับ Grid ได้เลย ตัวอย่างเช่น โดยรับสำเนาของ Firefox 51 หรือต่ำกว่า หลังจากติดตั้ง Firefox รุ่นเก่าแล้ว อย่าลืมปิดการอัปเดตอัตโนมัติตามที่อธิบายไว้ที่นี่ ไม่เช่นนั้นระบบจะอัปเดตตัวเองอย่างเงียบๆ

จากนั้น คุณสามารถทดสอบไซต์ของคุณใน IE11 และใน Firefox ที่ไม่สนับสนุนบน VM เดียว (โซลูชันที่เปราะบางน้อยกว่าค่าที่สะกดผิดมาก) การติดตั้งอาจใช้เวลาประมาณหนึ่งชั่วโมงหรือมากกว่านั้น แต่คุณจะอยู่ในที่ที่ดีจริง ๆ เพื่อทดสอบทางเลือกของคุณ

เลิกเรียนรู้นิสัยเดิมๆ

“นี่เป็นครั้งแรกที่ฉันใช้ Grid Layout ดังนั้นจึงมีแนวคิดมากมายให้เรียนรู้และคุณสมบัติเข้าใจ ตามแนวคิดแล้ว ฉันพบว่าสิ่งที่ยากที่สุดในการยกเลิกการเรียนรู้สิ่งที่ฉันทำมาหลายปี เช่น การล้างทุ่นและการบรรจุทุกอย่างในคอนเทนเนอร์ divs”

— ซ่อนทำงานบน hiddedevries.nl/en

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

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

“Grid Layout คือการพัฒนา CSS ที่น่าตื่นเต้นที่สุดนับตั้งแต่มีการสืบค้นข้อมูลของสื่อ ได้รับการพิจารณามาเป็นอย่างดีสำหรับความต้องการของนักพัฒนาในโลกแห่งความเป็นจริง และเป็นความสุขอย่างยิ่งที่จะใช้ในการผลิต - สำหรับนักออกแบบและนักพัฒนาเหมือนกัน”

— Trys Mudford ทำงานบน trysmudford.com

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

1. พึงระวังให้มากถึงความเป็นไปได้ของการจัดลำดับเนื้อหาใหม่ ตรวจสอบว่าคุณไม่ได้ถอดการแสดงภาพออกจากลำดับเอกสาร
2. ทดสอบโดยใช้เบราว์เซอร์เป้าหมายจริงกับเครื่องเสมือนในเครื่องหรือระยะไกล
3. อย่าลืมว่าวิธีการจัดวางแบบเก่ายังคงใช้ได้และมีประโยชน์ ลองวิธีต่างๆ เพื่อให้ได้รูปแบบ ไม่ต้องรอนานเพราะต้องใช้กริด
4. รู้ว่าในฐานะนักพัฒนา front-end ที่มีประสบการณ์ คุณน่าจะมีอคติทั้งชุดเกี่ยวกับวิธีการทำงานของเลย์เอาต์ ลองพิจารณาวิธีการใหม่เหล่านี้อีกครั้งแทนที่จะบังคับให้กลับไปใช้รูปแบบเดิม
5. พยายามทำสิ่งต่างๆ ต่อไป เราทุกคนใหม่กับเรื่องนี้ ทดสอบงานของคุณและแบ่งปันสิ่งที่คุณค้นพบ