หน้านี้ได้รับการแปลโดย Cloud Translation API

การจำลองภาวะบกพร่องในการมองเห็นสีในเครื่องมือแสดงภาพกะพริบ

Mathias Bynens

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

พื้นหลัง: คอนทราสต์ของสีไม่ดี

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

รายการปัญหาการช่วยเหลือพิเศษที่พบบ่อยบนเว็บ ข้อความคอนทราสต์ต่ำเป็นปัญหาที่พบบ่อยที่สุด

จากการวิเคราะห์การช่วยเหลือพิเศษของ WebAIM สําหรับเว็บไซต์ยอดนิยม 1 ล้านเว็บไซต์ หน้าแรกกว่า 86% มีคอนทราสต์ต่ำ โดยเฉลี่ยแล้ว หน้าแรกแต่ละหน้ามีข้อความคอนทราสต์ต่ำ36 รายการที่แตกต่างกัน

การใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อค้นหา ทำความเข้าใจ และแก้ไขปัญหาคอนทราสต์

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

เคล็ดลับเครื่องมือของโหมดตรวจสอบที่ปรากฏที่ด้านบนของหน้าเว็บจะแสดงอัตราส่วนคอนทราสต์ขององค์ประกอบข้อความ
เครื่องมือเลือกสีของ DevTools จะระบุอัตราส่วนคอนทราสต์ที่ไม่เหมาะสมสำหรับองค์ประกอบข้อความ แสดงเส้นคอนทราสต์ที่แนะนำเพื่อช่วยเลือกสีที่ดีขึ้นด้วยตนเอง และยังสามารถแนะนำสีที่เข้าถึงได้
ทั้งแผงภาพรวม CSS และรายงานการตรวจสอบการช่วยเหลือพิเศษของ Lighthouse จะแสดงรายการองค์ประกอบข้อความที่มีคอนทราสต์ต่ำซึ่งพบในหน้าเว็บ

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

ใน Puppeteer page.emulateVisionDeficiency(type) API ใหม่ช่วยให้คุณเปิดใช้การจําลองเหล่านี้แบบเป็นโปรแกรมได้

ภาวะบกพร่องในการมองเห็นสี

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

ALT_TEXT_HERE — ผลกระทบของการจําลองภาวะตาบอดสีในรูปภาพสีสันสดใสของดินสอสีละลาย

ผลกระทบของการจําลองภาวะตาบอดสีเขียวต่อภาพสีสันสดใสของดินสอสีละลาย

ผลกระทบของการจําลองภาวะตาบอดสีสีแดงต่อภาพสีสันสดใสของดินสอสีละลาย — ผลกระทบของการจําลองตาบอดสีแดงในรูปภาพสีสันสดใสของดินสอสีละลาย

ผลกระทบของการจําลองภาวะตาบอดสีฟ้าเขียวในรูปภาพสีสันสดใสของดินสอสีละลาย — ผลกระทบของการจําลองตาบอดสีน้ำเงินในรูปภาพสีสันสดใสของดินสอสีละลาย

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

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

การจําลองภาวะบกพร่องในการมองเห็นสีด้วย HTML, CSS, SVG และ C++

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

คุณอาจคิดว่าการจําลองการมองเห็นสีบกพร่องแต่ละรายการเป็นการวางซ้อนที่ครอบคลุมทั้งหน้า แพลตฟอร์มเว็บมีวิธีดำเนินการดังกล่าว ซึ่งก็คือฟิลเตอร์ CSS เมื่อใช้พร็อพเพอร์ตี้ filter ของ CSS คุณจะใช้ฟังก์ชันตัวกรองที่กําหนดไว้ล่วงหน้าได้ เช่น blur, contrast, grayscale, hue-rotate และอื่นๆ อีกมากมาย หากต้องการควบคุมเพิ่มเติม พร็อพเพอร์ตี้ filter ยังยอมรับ URL ที่ชี้ไปยังคําจํากัดความของฟิลเตอร์ SVG ที่กําหนดเองได้ด้วย ดังนี้

<style>
  :root {
    filter: url(#deuteranopia);
  }
</style>
<svg>
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000">
    </feColorMatrix>
  </filter>
</svg>

ตัวอย่างข้างต้นใช้คําจํากัดความตัวกรองที่กําหนดเองตามเมตริกซ์สี แนวคิดคือค่าสี [Red, Green, Blue, Alpha] ของพิกเซลแต่ละพิกเซลจะคูณด้วยเมทริกซ์เพื่อสร้างสีใหม่ [R′, G′, B′, A′]

แต่ละแถวในเมทริกซ์จะมีค่า 5 ค่า ได้แก่ ตัวคูณสำหรับ (จากซ้ายไปขวา) R, G, B และ A รวมถึงค่าที่ 5 สำหรับค่าการเลื่อนแบบคงที่ มี 4 แถว ได้แก่ แถวแรกของเมทริกซ์ใช้คํานวณค่าสีแดงใหม่ แถวที่ 2 ใช้คํานวณสีเขียว แถวที่ 3 ใช้คํานวณสีน้ำเงิน และแถวสุดท้ายใช้คํานวณอัลฟ่า

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

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

หากต้องการ เราสามารถสร้างฟีเจอร์ DevTools ดังนี้ เมื่อผู้ใช้จําลองการมองเห็นที่บกพร่องใน UI ของ DevTools เราจะแทรกตัวกรอง SVG ลงในเอกสารที่ตรวจสอบ จากนั้นจะใช้สไตล์ตัวกรองกับองค์ประกอบรูท แต่วิธีการดังกล่าวมีปัญหาหลายประการดังนี้

หน้าเว็บอาจมีตัวกรองในองค์ประกอบรูทอยู่แล้ว ซึ่งโค้ดของเราอาจลบล้าง
หน้าเว็บอาจมีองค์ประกอบที่มี id="deuteranopia" อยู่แล้ว ซึ่งขัดแย้งกับคําจํากัดความของตัวกรอง
หน้าเว็บอาจใช้โครงสร้าง DOM บางรูปแบบ และการแทรก <svg> ลงใน DOM อาจละเมิดสมมติฐานเหล่านี้

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

มาดูกันว่าเราจะทําให้โฆษณานี้รบกวนน้อยลงได้อย่างไร โซลูชันนี้มี 2 ส่วนที่เราจำเป็นต้องซ่อน ได้แก่ 1) สไตล์ CSS ที่มีพร็อพเพอร์ตี้ filter และ 2) การกําหนดตัวกรอง SVG ซึ่งปัจจุบันเป็นส่วนหนึ่งของ DOM

<!-- Part 1: the CSS style with the filter property -->
<style>
  :root {
    filter: url(#deuteranopia);
  }
</style>
<!-- Part 2: the SVG filter definition -->
<svg>
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000">
    </feColorMatrix>
  </filter>
</svg>

หลีกเลี่ยงการพึ่งพา SVG ในเอกสาร

มาเริ่มกันที่ส่วนที่ 2: เราจะหลีกเลี่ยงการเพิ่ม SVG ลงใน DOM ได้อย่างไร 1 วิธีคือย้ายไปยังไฟล์ SVG แยกต่างหาก เราคัดลอก <svg>…</svg> จาก HTML ด้านบนและบันทึกเป็น filter.svg ได้ แต่ต้องทําการเปลี่ยนแปลงบางอย่างก่อน SVG ในบรรทัดใน HTML เป็นไปตามกฎการแยกวิเคราะห์ HTML ซึ่งหมายความว่าคุณอาจไม่ต้องทำสิ่งต่างๆ เช่น การละเว้นเครื่องหมายคำพูดรอบๆ ค่าแอตทริบิวต์ในบางกรณี อย่างไรก็ตาม SVG ในไฟล์แยกต่างหากควรเป็น XML ที่ถูกต้อง และการแยกวิเคราะห์ XML จะเข้มงวดกว่า HTML มาก ข้อมูลโค้ด SVG ใน HTML ของเรามีดังนี้

<svg>
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000">
    </feColorMatrix>
  </filter>
</svg>

เราต้องทําการเปลี่ยนแปลงบางอย่างเพื่อให้ SVG แบบสแตนด์อโลนนี้ (และ XML) ถูกต้อง คุณเดาได้ไหมว่าใคร

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000" />
  </filter>
</svg>

การเปลี่ยนแปลงแรกคือการประกาศเนมสเปซ XML ที่ด้านบน ส่วนการเพิ่มที่ 2 คือสิ่งที่เรียกว่า "เครื่องหมายทับ" ซึ่งเป็นเครื่องหมายทับที่บ่งบอกว่าแท็ก <feColorMatrix> ทั้งเปิดและปิดองค์ประกอบ การเปลี่ยนแปลงครั้งล่าสุดนี้ไม่จำเป็นจริงๆ (เราอาจใช้แท็กปิด </feColorMatrix> แบบชัดเจนแทน) แต่เนื่องจากทั้ง XML และ SVG ใน HTML รองรับเครื่องหมาย </feColorMatrix> คร่าวๆ นี้ เราจึงอาจใช้ประโยชน์จากเครื่องหมายดังกล่าว/>

อย่างไรก็ตาม เมื่อทำการเปลี่ยนแปลงดังกล่าวแล้ว เราจึงบันทึกไฟล์นี้เป็นไฟล์ SVG ที่ถูกต้องได้ในที่สุด และชี้ไปยังไฟล์จากค่าพร็อพเพอร์ตี้ filter ของ CSS ในเอกสาร HTML ดังนี้

<style>
  :root {
    filter: url(filters.svg#deuteranopia);
  }
</style>

เยี่ยมเลย เราไม่ต้องแทรก SVG ลงในเอกสารอีกต่อไป เยี่ยมไปเลย แต่ตอนนี้เราใช้ไฟล์แยกต่างหาก ซึ่งยังคงเป็นข้อกำหนด เราจะกำจัดปัญหานี้ได้อย่างไร

แต่ปรากฏว่าเราไม่จําเป็นต้องใช้ไฟล์ เราเข้ารหัสทั้งไฟล์ภายใน URL ได้โดยใช้ URL ข้อมูล ในการดําเนินการนี้ เรานําเนื้อหาของไฟล์ SVG ที่มีอยู่แล้วมาเพิ่มส่วนหน้า data: กำหนดค่าประเภท MIME ที่เหมาะสม แล้วเราก็จะได้ URL ของข้อมูลที่ใช้ได้ซึ่งแสดงไฟล์ SVG เดียวกันนี้

data:image/svg+xml,
  <svg xmlns="http://www.w3.org/2000/svg">
    <filter id="deuteranopia">
      <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                             0.280  0.673  0.047  0.000  0.000
                            -0.012  0.043  0.969  0.000  0.000
                             0.000  0.000  0.000  1.000  0.000" />
    </filter>
  </svg>

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

<style>
  :root {
    filter: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg">\
        <filter id="deuteranopia">\
          <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000\
                                 0.280  0.673  0.047  0.000  0.000\
                                -0.012  0.043  0.969  0.000  0.000\
                                 0.000  0.000  0.000  1.000  0.000" />\
        </filter>\
      </svg>#deuteranopia');
  }
</style>

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

ที่ผ่านมาเราได้พูดถึงวิธีจำลองการมองเห็นที่บกพร่องโดยใช้เทคโนโลยีเว็บเท่านั้น สิ่งที่น่าสนใจคือการใช้งานขั้นสุดท้ายของเราในโปรแกรมแสดงผล Blink นั้นคล้ายกันมาก ต่อไปนี้คือยูทิลิตีตัวช่วย C++ ที่เราเพิ่มเพื่อสร้าง URL ของข้อมูลที่มีคําจํากัดความของตัวกรองที่ระบุ โดยอิงตามเทคนิคเดียวกัน

AtomicString CreateFilterDataUrl(const char* piece) {
  AtomicString url =
      "data:image/svg+xml,"
        "<svg xmlns=\"http://www.w3.org/2000/svg\">"
          "<filter id=\"f\">" +
            StringView(piece) +
          "</filter>"
        "</svg>"
      "#f";
  return url;
}

และนี่คือวิธีที่เราใช้ สร้างตัวกรองทั้งหมดที่ต้องการ

AtomicString CreateVisionDeficiencyFilterUrl(VisionDeficiency vision_deficiency) {
  switch (vision_deficiency) {
    case VisionDeficiency::kAchromatopsia:
      return CreateFilterDataUrl("…");
    case VisionDeficiency::kBlurredVision:
      return CreateFilterDataUrl("<feGaussianBlur stdDeviation=\"2\"/>");
    case VisionDeficiency::kDeuteranopia:
      return CreateFilterDataUrl(
          "<feColorMatrix values=\""
          " 0.367  0.861 -0.228  0.000  0.000 "
          " 0.280  0.673  0.047  0.000  0.000 "
          "-0.012  0.043  0.969  0.000  0.000 "
          " 0.000  0.000  0.000  1.000  0.000 "
          "\"/>");
    case VisionDeficiency::kProtanopia:
      return CreateFilterDataUrl("…");
    case VisionDeficiency::kTritanopia:
      return CreateFilterDataUrl("…");
    case VisionDeficiency::kNoVisionDeficiency:
      NOTREACHED();
      return "";
  }
}

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

โอเค ทีนี้เราทราบวิธีสร้างตัวกรอง SVG และเปลี่ยนเป็น URL ของข้อมูลที่เราใช้ในค่าพร็อพเพอร์ตี้ filter ของ CSS ได้แล้ว คุณนึกถึงปัญหาเกี่ยวกับเทคนิคนี้ออกไหม ปรากฏว่าในบางกรณีเราไม่สามารถพึ่งพาการโหลด URL ของข้อมูลได้ เนื่องจากหน้าเป้าหมายอาจมี Content-Security-Policy ที่บล็อก URL ของข้อมูล การติดตั้งใช้งานระดับ Blink ขั้นสุดท้ายของเราจึงใช้ความระมัดระวังเป็นพิเศษเพื่อหลีกเลี่ยง CSP สำหรับ URL ของข้อมูล "ภายใน" เหล่านี้ในระหว่างการโหลด

นอกเหนือจากกรณีสุดโต่งแล้ว เรามีความคืบหน้าที่ดี เนื่องจากเราไม่ได้อาศัย <svg> ในบรรทัดในเอกสารเดียวกันอีกต่อไป เราจึงลดโซลูชันให้เหลือเพียงการกําหนดพร็อพเพอร์ตี้ CSS filter แบบสําเร็จรูปรายการเดียว เยี่ยม! ตอนนี้มากำจัดสิ่งนั้นกัน

หลีกเลี่ยงการพึ่งพา CSS ในเอกสาร

เราขอสรุปข้อมูลว่าเราดำเนินการไปถึงไหนแล้ว

<style>
  :root {
    filter: url('data:…');
  }
</style>

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

แนวคิดหนึ่งที่ผุดขึ้นมาคือการสร้างพร็อพเพอร์ตี้ CSS ใหม่ภายใน Chrome ที่ทํางานเหมือน filter แต่มีชื่ออื่น เช่น --internal-devtools-filter จากนั้นเราอาจเพิ่มตรรกะพิเศษเพื่อให้แน่ใจว่าพร็อพเพอร์ตี้นี้จะไม่ปรากฏในเครื่องมือสำหรับนักพัฒนาเว็บหรือในสไตล์ที่คอมไพล์แล้วใน DOM เรายังตรวจสอบได้ว่าการทำงานจะส่งผลต่อองค์ประกอบเดียวที่เราต้องการเท่านั้น ซึ่งก็คือองค์ประกอบรูท อย่างไรก็ตาม โซลูชันนี้ไม่ใช่วิธีที่ดีที่สุด เนื่องจากเราจะทำซ้ำฟังก์ชันการทำงานที่มีอยู่แล้วใน filter และแม้ว่าเราจะพยายามซ่อนพร็อพเพอร์ตี้ที่ไม่ใช่มาตรฐานนี้ แต่นักพัฒนาเว็บก็อาจยังค้นพบและเริ่มใช้พร็อพเพอร์ตี้ดังกล่าวได้ ซึ่งจะส่งผลเสียต่อแพลตฟอร์มเว็บ เราต้องการวิธีอื่นในการใช้สไตล์ CSS โดยที่ผู้ใช้ไม่เห็นใน DOM คุณพอจะมีใครแนะนำบ้างไหม

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

viewport นี้อยู่ในโปรแกรมแสดงผล Blink ด้วยเช่นกัน โดยเป็นรายละเอียดการใช้งาน นี่คือโค้ดที่ใช้รูปแบบวิวพอร์ตเริ่มต้นตามข้อกําหนด

scoped_refptr<ComputedStyle> StyleResolver::StyleForViewport() {
  scoped_refptr<ComputedStyle> viewport_style =
      InitialStyleForElement(GetDocument());
  viewport_style->SetZIndex(0);
  viewport_style->SetIsStackingContextWithoutContainment(true);
  viewport_style->SetDisplay(EDisplay::kBlock);
  viewport_style->SetPosition(EPosition::kAbsolute);
  viewport_style->SetOverflowX(EOverflow::kAuto);
  viewport_style->SetOverflowY(EOverflow::kAuto);
  // …
  return viewport_style;
}

คุณไม่จำเป็นต้องเข้าใจ C++ หรือความซับซ้อนของเครื่องมือสไตล์ของ Blink เพื่อดูว่าโค้ดนี้จัดการ z-index, display, position และ overflow ของวิวพอร์ต (หรือที่ถูกต้องกว่านั้นคือของบล็อกที่บรรจุเริ่มต้น) แนวคิดทั้งหมดเหล่านี้เป็นแนวคิดที่คุณอาจคุ้นเคยจาก CSS นอกจากนี้ยังมีการทำงานอื่นๆ ที่เกี่ยวข้องกับบริบทการซ้อน ซึ่งไม่ได้แปลเป็นพร็อพเพอร์ตี้ CSS โดยตรง แต่โดยรวมแล้ว คุณอาจคิดว่าออบเจ็กต์ viewport นี้เป็นออบเจ็กต์ที่กำหนดสไตล์ได้โดยใช้ CSS จากภายใน Blink เช่นเดียวกับองค์ประกอบ DOM เพียงแต่ไม่ได้เป็นส่วนหนึ่งของ DOM

ซึ่งช่วยให้เราได้รับสิ่งที่ต้องการ เราสามารถใช้สไตล์ filter กับออบเจ็กต์ viewport ซึ่งส่งผลต่อการแสดงผลภาพได้ โดยไม่รบกวนสไตล์หน้าเว็บที่สังเกตได้หรือ DOM แต่อย่างใด

บทสรุป

เราขอสรุปเส้นทางสั้นๆ ของเราด้วยการเริ่มต้นสร้างต้นแบบโดยใช้เทคโนโลยีเว็บแทน C++ แล้วเริ่มย้ายบางส่วนไปยังโปรแกรมแสดงผล Blink

ก่อนอื่น เราทำให้โปรโตไทป์มีความสมบูรณ์มากขึ้นด้วยการใช้ URL ของข้อมูลในบรรทัด
จากนั้นเราได้ทําให้ URL ข้อมูลภายในเหล่านั้นเข้ากันได้กับ CSP ด้วยการโหลด URL เหล่านั้นในลักษณะพิเศษ
เราได้ทําให้การใช้งานของเราไม่เกี่ยวข้องกับ DOM และไม่สามารถสังเกตได้แบบเป็นโปรแกรมโดยย้ายสไตล์ไปยัง viewport ภายใน Blink

สิ่งที่พิเศษเกี่ยวกับการติดตั้งใช้งานนี้คือต้นแบบ HTML/CSS/SVG ของเราส่งผลต่อการออกแบบทางเทคนิคขั้นสุดท้าย เราพบวิธีใช้แพลตฟอร์มเว็บแม้ในโปรแกรมแสดงผล Blink

ดูข้อมูลเบื้องต้นเพิ่มเติมได้ที่ข้อเสนอการออกแบบหรือข้อบกพร่องการติดตามของ Chromium ซึ่งอ้างอิงถึงแพตช์ที่เกี่ยวข้องทั้งหมด

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

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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