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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

คำค้นหาคอนเทนเนอร์เป็นส่วนหนึ่งของเกณฑ์พื้นฐานที่เพิ่งพร้อมใช้งาน

การสนับสนุนเบราว์เซอร์

  • 105
  • 105
  • 110
  • 16

แหล่งที่มา

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

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

รูปภาพแสดงวิธีที่การจัดรูปแบบประเภทต่างๆ ทำงานร่วมกัน
web.dev - รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ใหม่

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

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

ก่อน

ก่อนใช้การค้นหาคอนเทนเนอร์ ระบบจะตัดคำว่า "ISKU 10 in 1 Obeng satu.." ที่ด้านซ้ายบนจะถูกตัดออกสำหรับหน้าจอขนาดเล็ก

หลัง

การใช้การค้นหาคอนเทนเนอร์จะปรับเลย์เอาต์ให้ข้อความอยู่ภายในวิวพอร์ต

รหัส

โค้ดต่อไปนี้ค้นหาขนาดของคอนเทนเนอร์หลักที่ชื่อว่า 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

แหล่งข้อมูล

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