ทำไมเราจึงสร้าง CSS Grid Tooling
ตารางกริด CSS เป็นระบบเลย์เอาต์ CSS ที่มีประสิทธิภาพมากซึ่งช่วยให้นักพัฒนาเว็บสร้างเลย์เอาต์ 2 มิติที่ซับซ้อนและตั้งกฎได้ว่ารายการย่อยแต่ละรายการในตารางกริดนั้นมีขนาด จัดข้อความ และจัดลำดับอย่างไร เราเปิดตัวตารางกริด CSS หลังจากที่ Flexbox ได้รับความนิยม และเมื่อใช้ร่วมกันจะช่วยให้นักพัฒนาซอฟต์แวร์ออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ได้ดียิ่งขึ้นโดยไม่ต้องใช้การแฮ็กเพื่อการจัดแนวที่ซับซ้อนหรือการจัดเลย์เอาต์ที่ใช้ JavaScript ด้วย
ด้วยระบบเลย์เอาต์ที่ค่อนข้างใหม่ CSS Grid ก็ทำให้ไม่ถูกต้องด้วย ไวยากรณ์ของโครงสร้างนี้ค่อนข้างอเนกประสงค์ (เพียงค้นหาสเปรดชีตในตารางกริด) มีหลายวิธีที่จะทำให้ได้เลย์เอาต์เดียวกัน และการปรับขนาดที่ยืดหยุ่นและแทร็กโดยนัยทำให้ยากต่อการหาเหตุผลที่เลย์เอาต์เท่ากับหรือไม่ทำงานตามที่ควรจะเป็น นี่จึงเป็นเหตุผลที่เราตั้งใจมอบเครื่องมือตารางกริดสำหรับ CSS โดยเฉพาะในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อให้นักพัฒนาซอฟต์แวร์เข้าใจได้ดีขึ้นว่าโค้ด CSS ทำอะไรอยู่ และวิธีวางเลย์เอาต์ที่เหมาะสม
การออกแบบเครื่องมือ
ความร่วมมือระหว่าง Chrome และ Edge
เครื่องมือตารางกริดของ CSS ดึงดูดความสนใจจากทั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และ Edge DevTools เราตัดสินใจทำงานร่วมกันตั้งแต่แรก เราแชร์ทรัพยากรด้านผลิตภัณฑ์ วิศวกรรม และการออกแบบจากทั้ง 2 ทีม และประสานงานกันทุกสัปดาห์เพื่อให้บรรลุเป้าหมายนี้
สรุปฟีเจอร์
ฟีเจอร์หลัก 3 อย่างสำหรับเครื่องมือตารางกริด CSS มีดังนี้
- การวางซ้อนถาวรที่เจาะจงตารางกริดซึ่งช่วยให้มีข้อมูลมิติและลำดับข้อมูล
- ป้ายในแผนผัง DOM ที่ไฮไลต์คอนเทนเนอร์ตารางกริด CSS และสลับการวางซ้อนตารางกริด
- แผงแถบด้านข้างที่ช่วยให้นักพัฒนาซอฟต์แวร์ปรับเปลี่ยนการแสดงการวางซ้อน DOM ในแบบของคุณได้ (เช่น การเปลี่ยนสีและความกว้างของกฎ)
- ตัวแก้ไขตารางกริด CSS ในแผงรูปแบบ
มาดูรายละเอียดกัน
การวางซ้อนถาวรแบบตารางกริด
ในเครื่องมือสำหรับนักพัฒนาเว็บ การวางซ้อนเป็นเครื่องมือที่มีประสิทธิภาพซึ่งให้ข้อมูลเลย์เอาต์และสไตล์ของแต่ละองค์ประกอบ ดังนี้
ข้อมูลเพิ่มเติมนี้จะวางซ้อนไว้ที่ด้านบนขององค์ประกอบที่สนใจ ก่อนหน้านี้เมื่อคุณวางเมาส์เหนือตารางกริดที่เปิดเครื่องมือสำหรับนักพัฒนาเว็บอยู่ การวางซ้อนจะแสดงข้อมูลโมเดลกล่อง แต่จำกัดเนื้อหาที่ไฮไลต์เฉพาะรายการในตารางโดยไม่อธิบายว่าเหตุใดจึงเป็นเช่นนั้น โดยมี 2 ส่วนหลักที่เราต้องการเพิ่มสำหรับการวางซ้อนตารางกริด CSS
- เราต้องการแสดงข้อมูลที่มีประโยชน์มากขึ้นเกี่ยวกับตารางกริด เช่น มิติข้อมูลและช่องว่างที่เขียนขึ้น
- เราต้องการทำให้โฆษณาซ้อนทับติดหนึบ เพื่อให้สามารถดูตารางกริดหลายๆ เส้นพร้อมกันได้ และเราจะเห็นการวางซ้อนที่อัปเดตข้อมูลตารางกริดเมื่อเราเปลี่ยนรูปแบบขององค์ประกอบ
มาดูกันว่าเราทำสถิติทั้ง 2 อย่างนี้ได้อย่างไร
ขนาดที่เขียนเทียบกับขนาดที่คำนวณแล้ว
สิ่งที่ยากอย่างหนึ่งในการแก้ไขข้อบกพร่องของ CSS Grid คือวิธีการระบุขนาดแทร็กตารางกริด ตัวอย่างเช่น คุณอาจใช้ค่าพิกเซล ค่าเปอร์เซ็นต์ เศษส่วน ฟังก์ชันซ้ำ และฟังก์ชัน minmax ร่วมกันเพื่อสร้างขนาดแทร็กที่หลากหลายได้ ดังนี้
.grid-cards {
display: grid;
width: 200px;
height: 300px;
grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
อย่างไรก็ตาม การจับคู่ขนาดแทร็กที่กำหนดเหล่านี้กับขนาดแทร็กที่คำนวณแล้วซึ่งเบราว์เซอร์ได้คำนวณไว้ให้นั้นเป็นเรื่องยาก ในการลดช่องว่างนี้ เราจะนำข้อมูลทั้ง 2 รายการต่อไปนี้มาวางเคียงข้างกันบนการวางซ้อน
สตริงที่อยู่ก่อนจุดคือค่าที่เขียนขึ้นมา และสตริงหลังจุดแสดงค่าจริงที่คำนวณไว้
ซึ่งก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บไม่สามารถรับค่าที่เขียนไว้ได้ ในทางทฤษฎีแล้ว เราสามารถแยกวิเคราะห์ค่าที่เขียนขึ้นในเครื่องมือสำหรับนักพัฒนาเว็บและคํานวณตามข้อกําหนดกริดของ CSS ได้ ซึ่งจะมีสถานการณ์ที่ซับซ้อนหลายสถานการณ์ และโดยพื้นฐานแล้วก็เป็นแค่ความพยายามของ Blink ที่ซ้ำกัน ดังนั้น ด้วยความช่วยเหลือจากทีมรูปแบบของ Blink เราจึงได้รับ API ใหม่จาก Style Engine ที่แสดง “ค่าแบบ Cascaded” ค่าแบบ Cascaded คือค่าที่มีประสิทธิภาพสุดท้ายหลังจากการ Cascading ของ CSS สําหรับพร็อพเพอร์ตี้ CSS นี่คือค่าที่ชนะหลังจากที่เครื่องมือสไตล์ได้คอมไพล์สไตล์ชีตทั้งหมดแล้ว แต่ก่อนที่จะคำนวณค่าจริง เช่น เปอร์เซ็นต์ เศษส่วน เป็นต้น
ปัจจุบันเราใช้ API นี้เพื่อแสดงค่าที่กำหนดไว้ในการวางซ้อนตารางกริด
การวางซ้อนแบบถาวร
ก่อนใช้เครื่องมือตารางกริด CSS การวางซ้อนในเครื่องมือสำหรับนักพัฒนาเว็บนั้นตรงไปตรงมา เพียงวางเมาส์เหนือองค์ประกอบในบานหน้าต่าง DOM Tree ของเครื่องมือสำหรับนักพัฒนาเว็บหรือในหน้าที่ตรวจสอบโดยตรง แล้วคุณจะเห็นการวางซ้อนที่อธิบายองค์ประกอบนี้ เมื่อวางเมาส์เหนือจุดนั้น ภาพซ้อนทับจะหายไป สำหรับโฆษณาซ้อนทับแบบตารางกริด เราต้องการสิ่งที่แตกต่าง นั่นคือคุณสามารถไฮไลต์ตารางกริดได้หลายรายการพร้อมกัน ส่วนการวางซ้อนตารางกริดอาจยังเปิดอยู่ได้ ขณะที่การวางซ้อนเมื่อวางเมาส์แบบปกติยังคงใช้งานได้
เช่น
อย่างไรก็ตาม การวางซ้อนในเครื่องมือสำหรับนักพัฒนาเว็บไม่ได้ออกแบบมาโดยคำนึงถึงกลไกแบบถาวรที่มีหลายองค์ประกอบนี้ (สร้างขึ้นเมื่อหลายปีก่อน) เราจึงต้องเปลี่ยนโครงสร้างภายในการออกแบบโฆษณาซ้อนทับเพื่อให้ดำเนินการได้ เราเพิ่ม GridHighlightTool ใหม่ลงในชุดเครื่องมือไฮไลต์ที่มีอยู่ ซึ่งต่อมาได้พัฒนาเป็น PersistentTool ทั่วโลกเพื่อไฮไลต์การวางซ้อนถาวรทั้งหมดพร้อมกัน สำหรับการวางซ้อนถาวรแต่ละประเภท (ตารางกริด, Flex เป็นต้น) เราจะเก็บช่องการกําหนดค่าที่เกี่ยวข้องไว้ในเครื่องมือถาวร ทุกครั้งที่เครื่องมือไฮไลต์การวางซ้อนตรวจสอบสิ่งที่จะวาด จะมีการกำหนดค่าเหล่านี้ไว้ด้วย
เราได้สร้างคำสั่ง CDP ใหม่สำหรับการวางซ้อนถาวรของตารางกริดเพื่อให้เครื่องมือสำหรับนักพัฒนาเว็บควบคุมสิ่งที่จำเป็นต้องไฮไลต์ได้
# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
parameters
# An array of node identifiers and descriptors for the highlight appearance.
array of GridNodeHighlightConfig gridNodeHighlightConfigs
โดยที่ GridNodeHighlightConfig แต่ละรายการมีข้อมูลว่าจะวาดโหนดใด และวิธีวาดโหนด วิธีนี้ช่วยให้เราเพิ่มกลไกแบบถาวรหลายรายการได้โดยไม่ทำให้ลักษณะการทำงานเมื่อวางเมาส์เหนือรายการปัจจุบันเสียหาย
ป้ายตารางกริดแบบเรียลไทม์
เราได้ตัดสินใจเพิ่มป้ายเล็กๆ ไว้ข้างคอนเทนเนอร์ตารางกริดในแผนผัง DOM เพื่อช่วยให้นักพัฒนาแอปเปิดและปิดการวางซ้อนตารางกริดได้อย่างง่ายดาย ป้ายเหล่านี้ยังช่วยให้นักพัฒนาซอฟต์แวร์ระบุคอนเทนเนอร์ตารางกริดในโครงสร้าง DOM ได้อีกด้วย
การเปลี่ยนแปลงแผนผัง DOM
เนื่องจากป้าย Grid ไม่ใช่ป้ายเดียวที่เราต้องการให้แสดงใน DOM Tree เราจึงอยากให้การเพิ่มป้ายเป็นเรื่องง่ายที่สุดเท่าที่จะเป็นไปได้ ElementsTreeElement ซึ่งเป็นคลาสที่รับผิดชอบในการสร้างและจัดการองค์ประกอบ DOM Tree แต่ละรายการในเครื่องมือสำหรับนักพัฒนาเว็บ ได้รับการอัปเดตวิธีการสาธารณะใหม่ๆ มากมายในการกำหนดค่าป้าย หากมีป้ายหลายรายการสำหรับองค์ประกอบเดียว ป้ายจะจัดเรียงตามหมวดหมู่ของป้าย และชื่อตามตัวอักษรหากอยู่ในหมวดหมู่เดียวกัน หมวดหมู่ที่มีอยู่ ได้แก่ Security, Layout ฯลฯ และ Grid อยู่ในหมวดหมู่ Layout
นอกจากนี้ เรายังมีการสนับสนุนการเข้าถึงในตัวตั้งแต่แรก ต้องมีป้ายอินเทอร์แอกทีฟทุกป้ายเพื่อระบุตำแหน่งเริ่มต้นและ aria-label ที่ใช้งานอยู่ ส่วนป้ายแบบอ่านอย่างเดียวจะใช้ชื่อป้ายเป็น aria-label
เราได้รับการอัปเดตสไตล์แบบเรียลไทม์ได้อย่างไร
การเปลี่ยนแปลง DOM หลายอย่างจะแสดงในแผนผัง DOM สำหรับเครื่องมือสำหรับนักพัฒนาเว็บแบบเรียลไทม์ ตัวอย่างเช่น โหนดที่เพิ่มใหม่จะปรากฏในแผนผัง DOM ทันที และชื่อคลาสที่นำออกไปแล้วจะหายไปในทันทีเช่นกัน เราต้องการให้สถานะป้ายตารางกริดแสดงข้อมูลล่าสุดด้วย อย่างไรก็ตาม วิธีนี้พิสูจน์ให้เห็นได้ยากเนื่องจากเครื่องมือสำหรับนักพัฒนาเว็บไม่สามารถรับการแจ้งเตือนเมื่อองค์ประกอบที่แสดงใน DOM Tree ได้รับการอัปเดตรูปแบบที่คำนวณแล้ว วิธีเดียวที่มีอยู่ในการทราบว่าองค์ประกอบจะกลายเป็นหรือหยุดใช้เป็นคอนเทนเนอร์ Grid เมื่อใด คือการค้นหาข้อมูลรูปแบบล่าสุดของแต่ละองค์ประกอบในเบราว์เซอร์อย่างสม่ำเสมอ ราคานี้อาจแพงไม่สามารถทำได้
เราได้เพิ่มเมธอด CDP ใหม่สำหรับการสำรวจการอัปเดตสไตล์ เพื่อให้ส่วนหน้าทราบได้ง่ายขึ้นเมื่อองค์ประกอบอัปเดตรูปแบบแล้ว หากต้องการรับการอัปเดตรูปแบบของโหนด DOM เราจะเริ่มต้นด้วยการบอกเบราว์เซอร์ว่าต้องการติดตามการประกาศ CSS ใด ในกรณีของป้ายตารางกริด เราจะขอให้เบราว์เซอร์ติดตามข้อมูลต่อไปนี้
{
"display": "grid",
"display": "inline-grid",
}
จากนั้นเราจะส่งคำขอแบบสำรวจ และเมื่อมีการอัปเดตรูปแบบติดตามสำหรับโหนด DOM ในแผงองค์ประกอบ เบราว์เซอร์จะส่งรายการโหนดที่อัปเดตสำหรับเครื่องมือสำหรับนักพัฒนาเว็บและแก้ไขคำขอการสำรวจที่มีอยู่ เมื่อใดก็ตามที่เครื่องมือสำหรับนักพัฒนาเว็บต้องการรับการแจ้งเตือนเกี่ยวกับการอัปเดตสไตล์อีกครั้ง เครื่องมือสำหรับนักพัฒนาเว็บจะส่งคำขอการหยั่งสัญญาณนี้ได้โดยไม่ต้องคอยสำรวจแบ็กเอนด์จากแต่ละโหนดอย่างต่อเนื่อง นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังเปลี่ยนการประกาศ CSS ที่ติดตามอยู่โดยการส่งรายการใหม่ไปยังเบราว์เซอร์ได้อีกด้วย
แผงเลย์เอาต์
แม้ว่าป้าย DOM Tree จะช่วยให้ค้นพบกริด CSS ได้ง่ายขึ้น แต่บางครั้งเราก็ต้องการดูรายการตารางกริด CSS ทั้งหมดในหน้าเว็บหนึ่ง และสลับเปิดและปิดการวางซ้อนถาวรได้ง่ายๆ เพื่อแก้ไขข้อบกพร่องของเลย์เอาต์ ดังนั้น เราจึงตัดสินใจที่จะสร้างบานหน้าต่างแถบด้านข้างเฉพาะสำหรับเครื่องมือการออกแบบ ซึ่งทำให้เรามีพื้นที่เฉพาะสำหรับรวบรวมคอนเทนเนอร์ตารางกริดทั้งหมด รวมถึงกำหนดค่าตัวเลือกทั้งหมดสำหรับการวางซ้อนตารางกริด แผงเลย์เอาต์นี้ยังช่วยให้เราใส่เครื่องมือที่ใช้เลย์เอาต์จำนวนมากในอนาคต (เช่น Flexbox, คำค้นหาคอนเทนเนอร์) ไว้ที่นี่ได้ด้วย
ค้นหาองค์ประกอบตามรูปแบบที่คำนวณ
ในการแสดงรายการคอนเทนเนอร์ตารางกริด CSS ในแผงการออกแบบ เราต้องค้นหาโหนด DOM ตามรูปแบบที่คำนวณแล้ว ซึ่งก็ไม่ใช่เรื่องง่ายๆ เช่นกัน เนื่องจากเครื่องมือสำหรับนักพัฒนาเว็บจะไม่รู้จักโหนด DOM ทั้งหมดเมื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ แต่เครื่องมือสำหรับนักพัฒนาเว็บจะรู้เฉพาะโหนดย่อยขนาดเล็กซึ่งโดยปกติจะอยู่ในระดับบนสุดของลำดับชั้น DOM เพื่อเริ่มต้นใช้งานแผนผัง DOM สำหรับ Devtools ระบบจะดึงข้อมูลโหนดอื่นๆ เมื่อมีคำขอเพิ่มเติมเท่านั้น ด้วยเหตุผลด้านประสิทธิภาพ ซึ่งหมายความว่าเราต้องมีคำสั่ง CDP ใหม่เพื่อรวบรวมโหนดทั้งหมดในหน้าและกรองโหนดตามรูปแบบที่คำนวณไว้
# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
parameters
# Node ID pointing to the root of a subtree.
NodeId nodeId
# The style to filter nodes by (includes nodes if any of properties matches).
array of CSSComputedStyleProperty computedStyles
# Whether or not iframes and shadow roots in the same target should be traversed when returning the
# results (default is false).
optional boolean pierce
returns
# Resulting nodes.
array of NodeId nodeIds
การดำเนินการนี้จะเปิดใช้ฟรอนท์เอนด์ของ DevTools เพื่อรับรายการคอนเทนเนอร์ตารางกริด CSS ในหน้าเว็บ ซึ่งอาจเจาะผ่าน iframe และรากเงา ตลอดจนแสดงผลในแผงเลย์เอาต์
บทสรุป
เครื่องมือตารางกริด CSS เป็นหนึ่งในโปรเจ็กต์ออกแบบเครื่องมือสำหรับนักพัฒนาเว็บกลุ่มแรกๆ ที่รองรับฟีเจอร์แพลตฟอร์มเว็บ การเปิดตัวเครื่องมือพื้นฐานมากมายใน DevTools เช่น การวางซ้อนถาวร ป้าย DOM Tree และแผงเลย์เอาต์ รวมถึงปูทางให้กับเครื่องมือเลย์เอาต์ในอนาคตใน DevTools ของ Chrome เช่น การค้นหา Flexbox และ Container อีกทั้งยังเป็นรากฐานสำหรับเครื่องมือแก้ไข Grid และ Flexbox ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์เปลี่ยนการจัดแนว Grid และ Flexbox แบบอินเทอร์แอกทีฟ เราจะอธิบายขั้นตอนเหล่านั้นในอนาคต
ดาวน์โหลดช่องตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ช่องทางแสดงตัวอย่างเหล่านี้ช่วยให้คุณได้เข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะได้ใช้งาน
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ๆ และการเปลี่ยนแปลงในโพสต์ หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม
> ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ - ทวีตที่ @ChromeDevTools
- โปรดแสดงความคิดเห็นในวิดีโอ YouTube เกี่ยวกับมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บในวิดีโอ YouTube หรือเคล็ดลับสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ