เครื่องมือตาราง CSS ในเครื่องมือสำหรับนักพัฒนาเว็บ

Changhao Han

เหตุใดเราจึงสร้างเครื่องมือตารางกริด CSS

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

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

การออกแบบเครื่องมือ

เป็นการทำงานร่วมกันระหว่าง Chrome กับ Edge

เครื่องมือตารางกริด CSS ดึงดูดความสนใจจากทั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และ Edge DevTools เราตัดสินใจทำงานร่วมกันตั้งแต่ต้น เราแชร์ทรัพยากรด้านผลิตภัณฑ์ วิศวกรรม และการออกแบบจากทั้ง 2 ทีม และประสานงานกันทุกสัปดาห์เพื่อทำให้เรื่องนี้เกิดขึ้น

สรุปฟีเจอร์

ฟีเจอร์หลัก 3 อย่างสำหรับเครื่องมือตารางกริด CSS มีดังนี้

1. การวางซ้อนที่เฉพาะเจาะจงสำหรับตารางกริด ซึ่งช่วยเกี่ยวกับข้อมูลด้านมิติและลำดับ
2. ป้ายในแผนผัง DOM ที่ไฮไลต์คอนเทนเนอร์ตารางกริด CSS และสลับการวางซ้อนตารางกริด
3. แผงแถบด้านข้างที่ช่วยให้นักพัฒนาซอฟต์แวร์ปรับเปลี่ยนการแสดงการวางซ้อน DOM ในแบบของคุณ (เช่น การเปลี่ยนสีและความกว้างของกฎ)
4. ตัวแก้ไขตาราง CSS ในแผงรูปแบบ

มาดูรายละเอียดเกี่ยวกับเรื่องนี้กันต่อ

การวางซ้อนตารางกริดแบบถาวร

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

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

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

มาดูว่าเราประสบความสำเร็จทั้ง 2 อย่างนี้ได้อย่างไรกัน

ขนาดที่เขียนเทียบกับขนาดที่คำนวณ

ส่วนที่ยากอย่างหนึ่งเกี่ยวกับการแก้ไขข้อบกพร่องของตารางกริด CSS คือการระบุขนาดของแทร็กตารางกริด ตัวอย่างเช่น คุณสามารถใช้ค่าพิกเซล ค่าเปอร์เซ็นต์ เศษส่วน ฟังก์ชันทำซ้ำ และฟังก์ชัน 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 ใหม่จากเครื่องมือสไตล์ที่แสดง "ค่าแบบ Cascaded" ค่าแบบ Cascaded คือค่าที่มีประสิทธิภาพสุดท้ายหลังจากการต่อเรียงของ CSS สำหรับพร็อพเพอร์ตี้ CSS ค่านี้คือค่าที่จะชนะหลังจากที่เครื่องมือรูปแบบได้รวบรวมสไตล์ชีตทั้งหมดแล้ว แต่ก่อนที่จะคำนวณค่าใดๆ เช่น เปอร์เซ็นต์ เศษส่วน ฯลฯ

ขณะนี้เรากำลังใช้ API นี้เพื่อแสดงค่าที่เขียนไว้ในการวางซ้อนตารางกริด

การวางซ้อนแบบถาวร

ก่อนที่จะใช้เครื่องมือตารางกริด CSS การวางซ้อนใน DevTools นั้นตรงไปตรงมา คุณวางเมาส์เหนือองค์ประกอบในบานหน้าต่าง DOM Tree ของเครื่องมือสำหรับนักพัฒนาเว็บหรือได้โดยตรงในหน้าที่ตรวจสอบ คุณก็จะเห็นการวางซ้อนที่อธิบายองค์ประกอบนี้ คุณวางเมาส์เหนือภาพ และโฆษณาซ้อนทับจะหายไป สำหรับการวางซ้อนตารางกริด เราต้องการสร้างความแตกต่าง นั่นคือคุณสามารถไฮไลต์ตารางกริดหลายรายการพร้อมกันได้ และการวางซ้อนตารางกริดจะยังแสดงได้ในขณะที่การวางซ้อนเมื่อวางเมาส์เหนือแบบปกติยังคงทำงานได้

เช่น

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

เพื่อให้เครื่องมือสำหรับนักพัฒนาเว็บควบคุมสิ่งที่ต้องไฮไลต์ เราได้สร้างคำสั่ง 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 เราจึงอยากทำให้การเพิ่มป้ายเป็นเรื่องง่ายที่สุดเท่าที่จะเป็นไปได้ ElementsTreeElement ซึ่งเป็นคลาสที่รับผิดชอบสร้างและจัดการองค์ประกอบแผนผัง DOM แต่ละรายการในเครื่องมือสำหรับนักพัฒนาเว็บได้รับการอัปเดตด้วยวิธีการสาธารณะใหม่ๆ มากมายเพื่อกำหนดค่าป้าย หากมีป้ายหลายป้ายสำหรับองค์ประกอบเดียว ป้ายจะจัดเรียงตามหมวดหมู่ของป้าย แล้วจึงจัดเรียงตามตัวอักษรของป้ายหากอยู่ในหมวดหมู่เดียวกัน หมวดหมู่ที่มีให้เลือก ได้แก่ Security, Layout ฯลฯ และ Grid จะอยู่ในหมวดหมู่ Layout

นอกจากนี้ เรายังมีการสนับสนุนการช่วยเหลือพิเศษในตัวตั้งแต่เริ่มต้น ป้ายแบบอินเทอร์แอกทีฟทุกรายการต้องระบุค่าเริ่มต้นและ aria-label ที่ใช้งานอยู่ ส่วนป้ายแบบอ่านอย่างเดียวจะใช้ชื่อป้ายเป็น aria-label

เราได้รับการอัปเดตสไตล์แบบเรียลไทม์ได้อย่างไร

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

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

{
  "display": "grid",
  "display": "inline-grid",
}

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

แผงเลย์เอาต์

แม้ว่าป้ายแผนผัง DOM จะช่วยให้ค้นพบตารางกริด 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

การดำเนินการนี้จะทำให้ฟรอนท์เอนด์ของเครื่องมือสำหรับนักพัฒนาเว็บรับรายการคอนเทนเนอร์ตารางกริด CSS ในหน้าเว็บ ซึ่งอาจเจาะผ่าน iframe และรากที่เป็นเงา และแสดงผลในแผงเลย์เอาต์ได้

บทสรุป

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

ดาวน์โหลดเวอร์ชันตัวอย่าง

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

ติดต่อทีม Chrome DevTools

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

• ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
• รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม     > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
• ทวีตที่ @ChromeDevTools
• แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ