การค้นหาคอนเทนเนอร์
นำเสนอวิธีการที่มีความยืดหยุ่นสูงและมีความยืดหยุ่นสูง
การออกแบบอีกด้วย การค้นหาคอนเทนเนอร์จะใช้กฎ @container
วิธีนี้ใช้ได้ผลดีกับ
ไปยังคิวรี่สื่อด้วย @media
แต่ค้นหา @container
รายการระดับบนสุดแทน
คอนเทนเนอร์สำหรับข้อมูลการจัดรูปแบบ แทนที่จะเป็นวิวพอร์ตและ User Agent
การค้นหาคอนเทนเนอร์เป็นส่วนหนึ่งของเกณฑ์พื้นฐานใหม่
การตอบสนองต่อขนาดคอนเทนเนอร์จะทำให้คำค้นหาคอนเทนเนอร์ช่วยให้คอมโพเนนต์ปรับเปลี่ยนได้ ตำแหน่งของตนในอินเทอร์เฟซ ตัวอย่างเช่น คอมโพเนนต์การ์ดสามารถปรับเปลี่ยนการ์ด ขนาดและรูปแบบตามคอนเทนเนอร์ที่ใส่ ไม่ว่าจะเป็นแถบด้านข้าง รูปภาพหลัก หรือตารางกริดภายในเนื้อหาหลักของหน้า
ดังที่แสดงในภาพประกอบต่อไปนี้ คุณจะสามารถรวมคิวรี่สื่อสำหรับมาโคร เลย์เอาต์ คำค้นหาคอนเทนเนอร์สำหรับเลย์เอาต์ขนาดเล็กพร้อมสื่อที่อิงตามการกำหนดค่าของผู้ใช้ เพื่อสร้างระบบการออกแบบ ที่ตอบสนองตามอุปกรณ์ที่มีประสิทธิภาพ อ่านแล้ว เพิ่มเติมเกี่ยวกับการสืบค้นคอนเทนเนอร์และ การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ใหม่
![รูปภาพแสดงวิธีการทำงานร่วมกันของสไตล์ประเภทต่างๆ](https://developer.chrome.com/static/blog/css-ui-ecommerce-cq/image/new-responsive.png?authuser=9&hl=th)
บทความนี้เป็นส่วนหนึ่งของชุดข้อมูลที่จะพูดถึงวิธีที่บริษัทอีคอมเมิร์ซ ปรับปรุงเว็บไซต์ของตนโดยใช้ฟีเจอร์ใหม่ของ CSS และ UI คราวนี้เราจะมาดู เกี่ยวกับวิธีที่บริษัทส่วนหนึ่งใช้และได้ประโยชน์จากการค้นหาคอนเทนเนอร์
redBus
redBus ดูแลและให้บริการโค้ดที่แตกต่างกันระหว่างอุปกรณ์เคลื่อนที่และเดสก์ท็อป หลังจากนำการค้นหาคอนเทนเนอร์ไปใช้ กิจกรรมน่าสนใจและ cargo พวกเขาจึงรวมโค้ดนี้เข้าด้วยกัน เป็นฐานของโค้ดเดียวสำหรับเว็บไซต์เหล่านี้ ทำให้โฆษณาเหล่านี้ปรับเปลี่ยนตามอุปกรณ์และประหยัดค่าใช้จ่าย เวลาพัฒนา ตัวอย่างต่อไปนี้แสดงการใช้หน้าขนส่งสินค้า
รหัส
ในตัวอย่างต่อไปนี้ .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% |
Tokopedia
หน้ารายละเอียดผลิตภัณฑ์ (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()