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