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