การค้นหาคอนเทนเนอร์มอบแนวทางการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และมีความยืดหยุ่นในระดับสูง การค้นหาคอนเทนเนอร์ใช้กฎที่ @container
ซึ่งทํางานคล้ายกับการค้นหาสื่อด้วย @media
แต่ @container
จะค้นหาคอนเทนเนอร์ระดับบนสุดสำหรับข้อมูลการจัดรูปแบบแทนวิวพอร์ตและ User Agent
คำค้นหาคอนเทนเนอร์เป็นส่วนหนึ่งของเกณฑ์พื้นฐานที่เพิ่งพร้อมใช้งาน
เมื่อตอบสนองต่อขนาดคอนเทนเนอร์ การค้นหาคอนเทนเนอร์จะอนุญาตให้คอมโพเนนต์ปรับให้เข้ากับตําแหน่งของตนในอินเทอร์เฟซ ตัวอย่างเช่น คอมโพเนนต์การ์ดสามารถปรับขนาดและสไตล์ตามคอนเทนเนอร์ที่วางอยู่ ไม่ว่าจะเป็นแถบด้านข้าง ส่วนหลัก หรือตารางกริดภายในเนื้อหาหลักของหน้า
ดังที่เห็นในภาพประกอบต่อไปนี้ คุณสามารถรวมคำค้นหาสื่อสำหรับเลย์เอาต์ของมาโคร คำค้นหาคอนเทนเนอร์สำหรับเลย์เอาต์ขนาดเล็ก กับคำค้นหาสื่อที่อิงตามผู้ใช้ เพื่อสร้างระบบการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ที่มีประสิทธิภาพ อ่านข้อมูลเพิ่มเติมเกี่ยวกับคำค้นหาคอนเทนเนอร์และการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ใหม่
บทความนี้เป็นส่วนหนึ่งของซีรีส์ที่กล่าวถึงวิธีที่บริษัทอีคอมเมิร์ซเพิ่มประสิทธิภาพเว็บไซต์โดยใช้ฟีเจอร์ CSS และ UI ใหม่ ในครั้งนี้ เราจะเจาะลึกวิธีที่บางบริษัทใช้และได้รับประโยชน์จากคำค้นหาคอนเทนเนอร์
redBus
redBus ดูแลรักษาและให้บริการโค้ดที่แตกต่างกันสำหรับเวอร์ชันอุปกรณ์เคลื่อนที่และเดสก์ท็อป หลังจากใช้การค้นหาคอนเทนเนอร์ในหน้า Things-to-do และสินค้า ทางบริษัทสามารถรวมโค้ดนี้เป็นฐานของโค้ดเดียวสำหรับเว็บไซต์เหล่านี้ วิธีนี้ทำให้ทุกอย่างตอบสนองได้ และช่วยประหยัดเวลาในการพัฒนา ตัวอย่างต่อไปนี้แสดงสิ่งนี้โดยใช้หน้าสินค้า
รหัส
ในตัวอย่างต่อไปนี้ .bpdpCardWrapper
เป็นคอนเทนเนอร์ระดับบนสุดที่ชื่อว่า bpdpSection
หากคอนเทนเนอร์ bpdpSection
มีความกว้างอย่างน้อย 744 พิกเซล ระบบจะอัปเดต font-size
และ line-height
สำหรับคอมโพเนนต์ที่ .bpdpCardContainer
และ .subTxt, .bpdpAddress
เลือกไว้
//Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
มีอิทธิพล
ก่อน (ฐานของโค้ดหลายฐาน) | หลัง (ฐานโค้ดเดียว) | |
---|---|---|
โครงสร้างพื้นฐาน | โครงสร้างพื้นฐานแยก (ต้นทุนสูง) | โครงสร้างพื้นฐานเดียวกัน (ลดต้นทุน) |
การออกแบบ | UI แยกกันแต่มีความสอดคล้องกันไม่ดี | ยากที่จะแก้ไข แต่ก็เป็นไปได้ |
การแสดง | จัดการง่ายเนื่องจากระบบแยกออกจากกัน แต่เป็นการเพิ่มประสิทธิภาพที่ซ้ำซ้อน | นี่เป็นคะแนนเฉพาะหน้าเว็บและฟีเจอร์ แต่คะแนน PageSpeedInsights ของ RedBus สูงกว่า 80 |
การพัฒนา | ทีมนักพัฒนาซอฟต์แวร์แยกกัน | เวลาลดลง 30% - 40% |
โทโกพีเดีย
หน้ารายละเอียดผลิตภัณฑ์ (PDP) ของ Tokopedia มีแท็บต่างๆ สำหรับข้อมูลร้านค้าและข้อมูลผลิตภัณฑ์ ก่อนหน้านี้ เลย์เอาต์ของหน้านี้จะแบ่งออกเป็น 3 คอลัมน์ และบางครั้งชื่อผลิตภัณฑ์ทางด้านซ้ายก็ถูกตัดออกสำหรับหน้าจอขนาดเล็ก (ดูวิดีโอ "ก่อน") ต่อไปนี้
ในการแก้ปัญหาเลย์เอาต์นี้ ทางบริษัทจึงนำการค้นหาคอนเทนเนอร์ไปใช้ได้อย่างง่ายดายและรวดเร็ว หลังจากใช้งานแล้ว ผู้ใช้สามารถมีเลย์เอาต์ที่ยืดหยุ่นซึ่งชื่อผลิตภัณฑ์จะแสดงทั้งหมดเสมอ (ดูวิดีโอ "หลัง" ต่อไปนี้)
ก่อน
หลัง
รหัส
โค้ดต่อไปนี้ค้นหาขนาดของคอนเทนเนอร์หลักที่ชื่อว่า infowrapper
หากความกว้างสูงสุดของ infowrapper
คือ 360 พิกเซล ระบบจะปรับ width
, margin,
และ padding
ของคอมโพเนนต์ย่อย
การตั้งค่า container-type
เป็น inline-size
จะค้นหาขนาดทิศทางแบบอินไลน์ของตำแหน่งหลัก สำหรับภาษาละติน เช่น ภาษาอังกฤษ ค่านี้จะเป็นความกว้างของคอนเทนเนอร์ระดับบนสุด เนื่องจากข้อความจะเรียงตามลำดับจากซ้ายไปขวา
export const styCredibilityContainer = css`
container-name: infowrapper;
container-type: inline-size;
`;
export const styBtnShopFollow = css`
margin-left: auto;
width: 98px;
@container infowrapper (max-width: 360px) {
width: 100%;
margin-top: 2px;
margin-bottom: 8px;
padding-left: 60px;
}
`;
export const styBottomRow = css`
margin-top: 4px;
padding-left: 60px;
display: flex;
align-items: center;
@container infowrapper (max-width: 360px) {
padding-left: 0px;
}
> div {
text-align: left;
margin-top: 0 !important;
}
`;
สิ่งที่ควรพิจารณาเมื่อใช้การค้นหาคอนเทนเนอร์
Tokopedia พบกรณีการใช้งานโดยมองหาจุดไข่ปลาในเว็บไซต์ ซึ่งแสดงให้เห็นว่าคอนเทนเนอร์อาจมีขนาดเล็กเกินไป ซึ่งทำให้เนื้อหาถูกตัดออกสำหรับผู้ใช้
กรณีการใช้งานที่ดีอีกอย่างหนึ่งสำหรับการค้นหาคอนเทนเนอร์สำหรับเว็บไซต์อีคอมเมิร์ซคือการตรวจหาคอมโพเนนต์ที่นำกลับมาใช้ใหม่ เช่น ปุ่มเพิ่มลงในรถเข็นอาจแสดงแตกต่างกันไปตามคอนเทนเนอร์หลัก (เช่น เฉพาะไอคอนที่อยู่ในการ์ดผลิตภัณฑ์และไอคอนที่มีข้อความหากเป็น CTA หลักในหน้าเว็บ) ปุ่มนี้อาจเป็นตัวเลือกที่ดีสำหรับการค้นหาคอนเทนเนอร์
โดยคุณเลือกที่จะปรับปรุงเว็บไซต์เพิ่มเติมได้ ตัวอย่างเช่น คุณอาจเริ่มจากกรณีการใช้งานเล็กๆ อย่างตัวอย่างวงรีจาก Tokopedia แล้วใช้คำค้นหาคอนเทนเนอร์ในนั้น จากนั้นจึงค้นหาเคสเพิ่มขึ้นเรื่อยๆ และปรับปรุง CSS
แหล่งข้อมูล
- การค้นหาคอนเทนเนอร์จะอยู่ในเบราว์เซอร์ที่เสถียร
- การออกแบบการค้นหาคอนเทนเนอร์ในเบราว์เซอร์
- การสาธิตการค้นหาคอนเทนเนอร์
- การสาธิต: การ์ดการค้นหาคอนเทนเนอร์
- วิดีโอ: มีอะไรใหม่ใน UI บนเว็บ - I/O 2023
- คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ เราอยากฟังความคิดเห็นจากคุณ
อ่านบทความอื่นๆ ในชุดนี้ที่กล่าวถึงประโยชน์ที่ได้จากการใช้ฟีเจอร์ CSS และ UI ใหม่ๆ เช่น ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน การแสดงหน้าต่างป็อปโอเวอร์ การค้นหาคอนเทนเนอร์ และตัวเลือก has()