การค้นหาคอนเทนเนอร์พร้อมใช้งานแล้ว
ข่าวน่าตื่นเต้น หนึ่งในฟีเจอร์ของนักพัฒนาซอฟต์แวร์ที่เป็นที่ต้องการมากที่สุดได้เริ่มเผยแพร่ในเว็บเบราว์เซอร์แล้ว ตั้งแต่ 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;
}
}
หน่วยการค้นหาคอนเทนเนอร์
คุณสามารถใช้ค่าของหน่วยที่อิงตามคอนเทนเนอร์ได้ด้วยเพื่อทำให้การค้นหาคอนเทนเนอร์มีประโยชน์มากขึ้น ตารางต่อไปนี้แสดงค่าหน่วยคอนเทนเนอร์ที่เป็นไปได้และความสอดคล้องของค่าดังกล่าวกับขนาดคอนเทนเนอร์
หน่วย | สัมพันธ์กับ |
---|---|
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 เมื่อบีบอัด และใช้ 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