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

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

Una Kravets

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

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

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

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

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

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

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