การค้นหาคอนเทนเนอร์เริ่มเข้าสู่เบราว์เซอร์ที่เสถียรในขณะที่ Polyfill ได้รับการอัปเดตครั้งใหญ่

Una Kravets

Gerald Monaco

การค้นหาคอนเทนเนอร์พร้อมใช้งานแล้ว

ข่าวดี หนึ่งในฟีเจอร์ของนักพัฒนาซอฟต์แวร์ที่เป็นที่ต้องการมากที่สุดได้เริ่มเปิดให้บริการในเว็บเบราว์เซอร์แล้ว สำหรับ Chromium 105 และ Safari 16 ตอนนี้คุณสามารถสร้างคำค้นหาคอนเทนเนอร์ตามขนาด และใช้ค่าหน่วยการค้นหาคอนเทนเนอร์ในเบราว์เซอร์เหล่านี้ได้แล้ว เพื่อให้การใช้การค้นหาคอนเทนเนอร์ตามขนาดและหน่วยcqได้ง่ายยิ่งขึ้น ทีม Aurora ของ Chrome จึงได้ทำงานอย่างหนักเพื่ออัปเดต Container Query Polyfill ให้รองรับเบราว์เซอร์และกรณีการใช้งานมากขึ้นเพื่อให้คุณมั่นใจในการใช้ฟีเจอร์อันทรงพลังนี้ในปัจจุบัน

หมายเหตุ: การค้นหาคอนเทนเนอร์เป็นส่วนหนึ่งของข้อกำหนด css-contain-3 ข้อกำหนดนี้ครอบคลุมค่าหน่วยใหม่ รวมทั้งประเภทคอนเทนเนอร์และขนาดและรูปแบบ แม้ว่าเบราว์เซอร์จะเริ่มเปิดตัวโดยมีการรองรับเฉพาะการรองรับขนาดเท่านั้น ด้วยเหตุนี้ เราจึงจะเน้นเรื่องการจำกัดขนาดในบทความนี้

การค้นหาคอนเทนเนอร์คืออะไร

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

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

การใช้การค้นหาคอนเทนเนอร์

สมมติว่าคุณมี HTML เช่น

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

หากต้องการใช้การค้นหาคอนเทนเนอร์ คุณต้องตั้งค่าการควบคุมในองค์ประกอบระดับบนที่คุณต้องการติดตามก่อน ซึ่งทำโดยการตั้งค่าพร็อพเพอร์ตี้ container-type หรือใช้ชวเลข container เพื่อตั้งค่าประเภทคอนเทนเนอร์และชื่อคอนเทนเนอร์พร้อมกัน

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

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

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

เพื่อให้เป็นระเบียบและชัดเจนยิ่งขึ้น ให้ตั้งชื่อคอนเทนเนอร์องค์ประกอบระดับบนดังนี้

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

จากนั้นเขียนโค้ดก่อนหน้าใหม่เป็น

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

หน่วยการค้นหาคอนเทนเนอร์

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

หน่วย	สัมพันธ์กับ
cqw	1% ของความกว้างของคอนเทนเนอร์คำค้นหา
cqh	1% ของความสูงของคอนเทนเนอร์คำค้นหา
cqi	1% ของขนาดในบรรทัดของคอนเทนเนอร์การค้นหา
cqb	1% ของขนาดบล็อกของคอนเทนเนอร์การค้นหา
cqmin	ค่า cqi หรือ cqb ที่มีค่าน้อยกว่า
cqmax	ค่า cqi หรือ cqb ที่มีมากกว่า

ตัวอย่างหนึ่งสำหรับวิธีที่คุณจะใช้หน่วยตามคอนเทนเนอร์ก็คือการพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์ หน่วยตามวิวพอร์ต (เช่น vh, vb, vw และ vi) จะใช้เพื่อกำหนดขนาดองค์ประกอบใดก็ได้บนหน้าจอ

.card h2 {
  font-size: 15cqi;
}

โค้ดนี้จะทำให้ขนาดแบบอักษรเป็น 15% ของขนาดในบรรทัดของคอนเทนเนอร์ ซึ่งหมายความว่ารหัสจะมีขนาดใหญ่ขึ้นเมื่อขนาดในบรรทัด (ความกว้าง) เพิ่มขึ้นหรือเล็กลงเมื่อลดลง หากต้องการดำเนินการเพิ่มเติม ให้ใช้ฟังก์ชัน clamp() เพื่อกำหนดขนาดสูงสุดและต่ำสุดให้กับการพิมพ์ของคุณ และกำหนดขนาดตามขนาดคอนเทนเนอร์ตามขนาดคอนเทนเนอร์

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

ตอนนี้ส่วนหัวจะไม่ใหญ่กว่า 3rem หรือเล็กกว่า .5rem แต่จะรับ 15% ของขนาดในบรรทัดของคอนเทนเนอร์ที่ใดก็ได้ที่อยู่ระหว่างนั้น

การสาธิตนี้จะก้าวไปอีกขั้นและอัปเดตการ์ดที่กว้างขึ้นให้มีช่วงขนาดที่เล็กลง ตามที่แสดงในมุมมองแบบ 2 คอลัมน์

Polyfill ของการค้นหาคอนเทนเนอร์

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

• Firefox 69 ขึ้นไป
• Chrome 79 ขึ้นไป
• Edge 79 ขึ้นไป
• Safari 13.4 ขึ้นไป

เมื่อบีบอัดแล้ว ไฟล์จะมีขนาดไม่เกิน 9 KB และใช้ izingObserver ที่มี MutationObserver เพื่อรองรับไวยากรณ์การค้นหา @container แบบเต็มที่มีอยู่ในเบราว์เซอร์แบบคงที่:

• คำค้นหาที่ไม่ต่อเนื่อง (width: 300px และ min-width: 300px)
• การค้นหาช่วง (200px < width < 400px และ width < 400px)
• หน่วยความยาวสัมพัทธ์ของคอนเทนเนอร์ (cqw, cqh, cqi, cqb, cqmin และcqmax) ในพร็อพเพอร์ตี้และคีย์เฟรม

การใช้ Polyfill ของการค้นหาคอนเทนเนอร์

หากต้องการใช้ polyfill ให้เพิ่มแท็กสคริปต์นี้ไปยังส่วนหัวของเอกสารของคุณ: :

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

นอกจากนี้ คุณอาจต้องการใช้บริการเพื่อส่ง Polyfill แบบมีเงื่อนไขโดยอิงตาม User-Agent หรือโฮสต์ด้วยตนเองในต้นทางของคุณเอง

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

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

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

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

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

ฟีเจอร์ Polyfill ใหม่

Polyfill ที่ได้รับการอัปเดตรองรับไฟล์ต่อไปนี้

• กฎ @container รายการที่ซ้อนกัน
• รองรับการซ้อนกฎ @container ภายใต้ @supports และ @media คำค้นหาและในทางกลับกันก็รองรับ
• CSS แบบมีเงื่อนไข เช่น @supports (container-type: inline-size) จะข้ามหลังจากโหลด Polyfill
• รองรับไวยากรณ์ CSS เต็มรูปแบบ (ไม่มีปัญหาในการวางความคิดเห็นไว้ที่ใดก็ได้ที่เป็นไวยากรณ์ที่ถูกต้องอีกต่อไป)
• โหมดการเขียนแนวตั้ง (ผ่านโหมดการเขียน)
• หน่วยสัมพัทธ์ของคอนเทนเนอร์ (cqw, cqh ฯลฯ) ได้รับการสนับสนุนภายในเงื่อนไขการค้นหา การประกาศพร็อพเพอร์ตี้ และคีย์เฟรมภาพเคลื่อนไหว เงื่อนไขการค้นหารองรับ rem และ em
• ไวยากรณ์การค้นหาคอนเทนเนอร์ที่ขยาย
  • ไวยากรณ์ช่วง (เช่น (200px < width < 400px))
  • การค้นหาความเท่าเทียม (เช่น (width = 200px))
• องค์ประกอบจำลอง เช่น ::before และ ::after
• เบราว์เซอร์ที่ไม่มี :is(...)/:where(...) ได้รับการสนับสนุนผ่านวิธีแก้ปัญหาที่ไม่บังคับ
• การค้นหาฟีเจอร์ orientation และ aspect-ratio
• การกรองการค้นหาอย่างถูกต้องตามฟีเจอร์ (เช่น การค้นหา height ใน container: inline-size ไม่ได้รับอนุญาตอย่างถูกต้องในโหมดการเขียนแนวนอน)
• การเปลี่ยนแปลง DOM (เช่น องค์ประกอบ <style> และ <link> จะถูกนำออกขณะรันไทม์)

หมายเหตุ: polyfill การค้นหาคอนเทนเนอร์ที่อัปเดตแล้วไม่รองรับไวยากรณ์การค้นหาขนาดเดิมที่ล้าสมัยอีกต่อไป ซึ่งผู้ใช้ต้องรวมการค้นหาขนาดใน size() (นั่นคือ size(width >= 200px))

ข้อจำกัดและคำเตือนของ Polyfill

หากคุณใช้ polyfill ของการค้นหาคอนเทนเนอร์ มีคุณลักษณะบางอย่างที่ขาดหายไปที่ควรระวังดังนี้

• ระบบยังไม่รองรับ Shadow DOM
• ไม่รองรับหน่วยสัมพัทธ์ของคอนเทนเนอร์ (เช่น cqw และ cqh) ในเงื่อนไขการค้นหา @media
  • Safari: คีย์เฟรมภาพเคลื่อนไหวก่อนวันที่ 15.4 ไม่รองรับหน่วยสัมพัทธ์ของคอนเทนเนอร์
• ระบบยังไม่รองรับ calc(), min(), max() หรือฟังก์ชันทางคณิตศาสตร์อื่นๆ ในเงื่อนไขการค้นหา
• Polyfill นี้ใช้ได้เฉพาะกับ CSS ในบรรทัดและต้นทางเดียวกันเท่านั้น ระบบไม่รองรับสไตล์ชีตแบบข้ามต้นทางและสไตล์ชีตใน iframe (เว้นแต่จะโหลด Polyfill ด้วยตนเอง)
• การควบคุม layout และ style ต้องมีการรองรับเบราว์เซอร์พื้นฐาน:
  • Safari 15.4 ขึ้นไป
  • ขณะนี้ Firefox ยังไม่รองรับการควบคุมรูปแบบ แต่กำลังทำงานอยู่

คำเตือน

• เพื่อป้องกันไม่ให้ FID และ CLS ได้รับผลกระทบ โพลีฟิลไม่ให้การรับประกันเกี่ยวกับเวลาที่เลย์เอาต์แรกจะเกิดขึ้น แม้ว่าจะโหลดแบบพร้อมกัน ยกเว้นว่าจะพยายามหลีกเลี่ยงการหน่วงเวลา LCP อย่างไม่สมเหตุผล กล่าวอีกนัยหนึ่งคือ คุณไม่ควรหวังพึ่งการวาดภาพครั้งแรก
• สร้าง ResizeObserver Loop Errors เช่น การใช้ Polyfill แบบเดิมก็ทำให้ได้รู้ว่า ซึ่งเกิดขึ้นเนื่องจากขนาดบล็อกของ container-type: inline-size มีแนวโน้มจะเปลี่ยนแปลงหลังจากประเมินคำค้นหา แต่ ResizeObserver ไม่มีทางบอกได้ว่าเราไม่สนใจการเปลี่ยนแปลงขนาดบล็อก
• Polyfill นี้ได้รับการทดสอบกับการทดสอบแพลตฟอร์มเว็บและมีอัตราการส่งถึง 70% เนื่องจากฟีเจอร์บางอย่าง เช่น JavaScript API ไม่ใช่โพลีฟิลล์ ดังนั้นอัตราการส่งผ่านจึงตั้งใจให้ใกล้เคียง 70%
• วิธีแก้ปัญหา :where() จำเป็นสำหรับผู้ใช้ 2.23% ของเบราว์เซอร์ที่มีอายุมากกว่า
  • Safari 14
  • Chromium 88
  • Edge 88
  • อินเทอร์เน็ต Samsung 15
  • Firefox 78