การค้นหาคอนเทนเนอร์จะเข้าสู่เบราว์เซอร์ที่เสถียร

ในวันวาเลนไทน์นี้ เราจะเฉลิมฉลองให้กับขนาดการค้นหาของคอนเทนเนอร์และขนาดหน่วยการสืบค้นคอนเทนเนอร์ในเบราว์เซอร์ที่เสถียรทั้งหมด

Una Kravets

การค้นหาคอนเทนเนอร์มีคำว่า "รัก" ลอยมาแล้ว ในวันวาเลนไทน์นี้ การสืบค้นคอนเทนเนอร์ขนาดและหน่วยการสืบค้นคอนเทนเนอร์จะมีความเสถียรในเบราว์เซอร์ใหม่ๆ ทั้งหมด

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

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

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

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

.card-container {
  container: card / inline-size;
}

การตั้งค่า container-type เป็น inline-size จะค้นหาขนาดทิศทางแบบอินไลน์ของเครือข่ายระดับบนสุด ในภาษาละติน เช่น ภาษาอังกฤษ ความกว้างนี้เป็นความกว้างของการ์ด เนื่องจากข้อความจะแทรกในบรรทัดจากซ้ายไปขวา

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

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

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

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi ข้างต้นหมายถึง 15% ของขนาดในบรรทัดของคอนเทนเนอร์ ฟังก์ชัน clamp() จะให้ค่าต่ำสุดคือ 2rem และสูงสุด 4rem ในระหว่างนี้ หาก 15cqi อยู่ระหว่างค่าเหล่านี้ ข้อความจะย่อและขยายขึ้นตามลำดับ

การค้นหาคอนเทนเนอร์วันวาเลนไทน์

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