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