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

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

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

การรองรับเบราว์เซอร์

  • Chrome: 105
  • ขอบ: 105
  • Firefox: 110
  • Safari: 16

แหล่งที่มา

การค้นหาคอนเทนเนอร์ช่วยให้คุณค้นหาข้อมูลการจัดรูปแบบขององค์ประกอบหลักได้ เช่น 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 อยู่ในช่วงค่าเหล่านี้ ข้อความจะขยายและย่อตามลำดับ

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

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