กรณีศึกษาเกี่ยวกับการค้นหาคอนเทนเนอร์

Swetha Gopalakrishnan

Saurabh Rajpal

Container Query เป็นแนวทางที่ยืดหยุ่นและไดนามิกสูงในการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ โดยใช้กฎ @container ซึ่งทำงานคล้ายกับ Media Query ที่ใช้กฎ @media แต่ @container จะค้นหาข้อมูลการจัดรูปแบบจากคอนเทนเนอร์ระดับบนสุดแทนที่จะค้นหาจากวิวพอร์ตและ User Agent

Container Query ช่วยให้คอมโพเนนต์ปรับให้เข้ากับตำแหน่งในอินเทอร์เฟซได้โดยการตอบสนองต่อขนาดคอนเทนเนอร์ เช่น คอมโพเนนต์การ์ดสามารถปรับขนาดและรูปแบบตามคอนเทนเนอร์ที่วางอยู่ ไม่ว่าจะเป็นแถบด้านข้าง ส่วน Hero หรือกริดภายในเนื้อหาหลักของหน้า

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

บทความนี้เป็นส่วนหนึ่งของชุดบทความที่พูดถึงวิธีที่บริษัทอีคอมเมิร์ซ ปรับปรุงเว็บไซต์โดยใช้ฟีเจอร์ CSS และ UI ใหม่ๆ และในครั้งนี้เราจะมาดูวิธีที่บางบริษัทใช้ประโยชน์จาก Container Query

redBus

redBus ดูแลรักษาและแสดงโค้ดที่แตกต่างกันสำหรับเวอร์ชันอุปกรณ์เคลื่อนที่และเดสก์ท็อป หลังจากใช้ Container Query ในหน้า สิ่งที่ควรทำ และ สินค้า แล้ว บริษัทก็สามารถรวมโค้ดนี้ ไว้ในฐานของโค้ดเดียวสำหรับเว็บไซต์เหล่านี้ได้ ซึ่งทำให้เว็บไซต์ปรับเปลี่ยนตามอุปกรณ์ได้และช่วยประหยัดเวลาในการพัฒนา ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเรื่องนี้โดยใช้หน้า "สินค้า"

รหัส

ในตัวอย่างต่อไปนี้ .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;
   }
}

ผลกระทบ

Tokopedia

หน้ารายละเอียดสินค้า (PDP) ของ Tokopedia มีหลายแท็บสำหรับข้อมูลร้านค้าและข้อมูลสินค้า ก่อนหน้านี้ เลย์เอาต์ของหน้านี้แบ่งออกเป็น 3 คอลัมน์ และบางครั้งชื่อผลิตภัณฑ์ทางด้านซ้ายก็ถูกตัดออกสำหรับขนาดหน้าจอที่เล็กลง (ดูวิดีโอ "ก่อน" ต่อไปนี้)

บริษัทใช้ Container Query ได้อย่างง่ายดายและรวดเร็วเพื่อแก้ปัญหาเลย์เอาต์นี้ หลังจากใช้ฟีเจอร์นี้แล้ว บริษัทก็สามารถมีเลย์เอาต์ที่ยืดหยุ่นซึ่งชื่อผลิตภัณฑ์จะแสดงให้เห็นทั้งหมดเสมอ (ดูวิดีโอ "หลัง" ต่อไปนี้)

ก่อน

หลัง

รหัส

โค้ดต่อไปนี้จะค้นหาขนาดของคอนเทนเนอร์ระดับบนสุดที่มีชื่อว่า 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;
  }
`;

สิ่งที่ควรพิจารณาเมื่อใช้ Container Query

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

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

คุณเลือกที่จะปรับปรุงเว็บไซต์ทีละน้อยได้ เช่น คุณอาจเริ่มต้นด้วยกรณีการใช้งานที่เล็กลง เช่น ตัวอย่างการละข้อความจาก Tokopedia แล้วใช้ Container Query ในกรณีนั้น จากนั้นค่อยๆ ค้นหากรณีอื่นๆ เพิ่มเติมและปรับปรุง CSS

แหล่งข้อมูล

• Container Query พร้อมใช้งานในเบราว์เซอร์เวอร์ชันเสถียรแล้ว
• Container Query - การออกแบบในเบราว์เซอร์
• การสาธิต Container Query
• การสาธิต: การ์ด Container Query
• วิดีโอ: มีอะไรใหม่ใน Web UI - I/O 2023
• คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ไหม เรายินดีรับฟังความคิดเห็นจากคุณ

สำรวจบทความอื่นๆ ในชุดบทความนี้ที่พูดถึงวิธีที่บริษัทอีคอมเมิร์ซได้รับประโยชน์จากการใช้ฟีเจอร์ CSS และ UI ใหม่ๆ เช่น ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน, ป๊อปโอเวอร์, Container Query และตัวเลือก has()

• ความสามารถของ Web UI มีความสำคัญต่อเว็บไซต์อีคอมเมิร์ซอย่างไร
• กรณีศึกษาภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
• กรณีศึกษาการเปลี่ยนมุมมอง
• กรณีศึกษาป๊อปโอเวอร์
• กรณีศึกษาตัวเลือก:has()