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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

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

วันที่

บทความนี้เป็นส่วนหนึ่งของชุดข้อมูลที่จะพูดถึงวิธีที่บริษัทอีคอมเมิร์ซ ปรับปรุงเว็บไซต์ของตนโดยใช้ฟีเจอร์ใหม่ของ 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;
   }
}

ผลกระทบ

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()

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