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

Una Kravets

Gerald Monaco

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

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

การสืบค้นข้อมูลคอนเทนเนอร์คืออะไร

คำค้นหาคอนเทนเนอร์เป็นฟีเจอร์ 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;
  }
}

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

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

ตัวอย่างหนึ่งของวิธีการใช้หน่วยที่อิงตามคอนเทนเนอร์คือการพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์ ใช้หน่วยที่อิงตามวิวพอร์ต (เช่น 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 เมื่อบีบอัด และใช้ DashboardObserver กับ 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 สำหรับเนื้อหาครึ่งหน้าล่างเท่านั้น และใช้คำค้นหา @supports เพื่อแทนที่ด้วยสัญญาณบอกสถานะการโหลดชั่วคราวจนกว่า Polyfill จะพร้อมแสดง

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

  .loader {
    display: flex;
  }
}

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

ฟีเจอร์ใหม่ของ 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

หากคุณใช้ Polyfill การค้นหาคอนเทนเนอร์ ฟีเจอร์บางอย่างที่ควรระวังมีดังนี้

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

คำเตือน

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