การปรับองค์ประกอบเชิงความหมาย

ใช้การค้นหาสไตล์ (@container style()) เพื่อทริกเกอร์รูปแบบตามบริบทโดยไม่ต้องฮาร์ดโค้ดสิ่งที่สร้างหรือตอบสนองต่อแต่ละบริบท ซึ่งจะช่วยลดการเชื่อมโยงระบบการออกแบบ รวมถึงปรับปรุงความสามารถในการขยายและการห่อหุ้มคอมโพเนนต์

เช่น กฎ section.featured { --surface: featured } สามารถทำเครื่องหมายบริบท และหน้า Landing Page อาจใช้บริบทนั้นเป็นค่าเริ่มต้นผ่าน main { --surface: featured } ด้วย จากนั้นคอมโพเนนต์จะเลือกใช้เพื่อตอบสนองต่อ --surface: featured: การ์ดจะแสดงป้ายโปรโมชัน ปุ่มจะเปลี่ยนเป็นตัวแปรที่เติมสีโดยค่าเริ่มต้น และอื่นๆ

การค้นหาสไตล์ช่วยให้ทั้ง 2 ฝ่ายแยกออกจากกัน โดยแพลตฟอร์มที่แสดงจะไม่ระบุชื่อองค์ประกอบที่ปรับให้เข้ากับแพลตฟอร์ม และคอมโพเนนต์จะไม่ตรวจสอบสิ่งที่สร้างบริบท ทั้ง 2 ฝั่งสามารถขยายได้อย่างอิสระ ไม่ว่าจะเป็นคอมโพเนนต์ใหม่หรือแพลตฟอร์มที่แนะนำใหม่ โดยไม่ต้องแตะอีกฝั่งหนึ่ง ตัวเลือกสืบทอด (เช่น .featured .button) จะบังคับให้เกิดผลตรงกันข้าม กล่าวคือ ตัวเลือกต้องเข้ารหัสความสัมพันธ์ทั้ง 2 ด้าน และต้องเปลี่ยนแปลงเมื่อมีการเปลี่ยนแปลงด้านใดด้านหนึ่ง

กรณีที่ควรใช้คู่มือนี้

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

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

การเลือกเครื่องมือที่เหมาะสม

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

• ตัวเลือกสืบทอด (.toolbar .button): ความสัมพันธ์แบบคงที่และใช้ครั้งเดียวซึ่งไม่สามารถนำมาใช้ซ้ำหรือขยายได้ หลักการ YAGNI มีผลบังคับใช้ อย่าเพิ่มการอ้างอิงทางอ้อมที่คุณจะไม่ใช้
• การค้นหาขนาด (@container (min-width: …)): การเปลี่ยนแปลงเลย์เอาต์และความหนาแน่นที่ขับเคลื่อนโดยพื้นที่ว่าง ไม่ใช่สถานะเชิงความหมาย
• การค้นหาสไตล์ (@container style(…)): สถานะเชิงความหมาย — สิ่งที่คอมโพเนนต์ควรแสดงผล จัดเรียง หรือนำเสนอในบริบทที่กำหนด

คำสั่งการติดตั้งใช้งาน

1. กำหนดแฟล็กบริบทเชิงความหมายโดยใช้คุณสมบัติที่กำหนดเองของ CSS ในคอนเทนเนอร์
2. อย่าตั้งค่า container-type สำหรับการค้นหาสไตล์ เนื่องจากจะค้นหาคุณสมบัติที่กำหนดเองซึ่งรับค่ามาจากระดับบนสุดที่ใกล้ที่สุด และไม่จำเป็นต้องมีบริบทการจำกัดที่ชัดเจน
3. จำเป็น: ใช้ @container style(--property: value) เพื่อใช้รูปแบบตามเงื่อนไขกับองค์ประกอบสืบทอด การค้นหาสไตล์ไม่สามารถจับคู่กับองค์ประกอบที่มีการตั้งค่าพร็อพเพอร์ตี้ได้ โดยจะจับคู่ได้เฉพาะองค์ประกอบสืบทอดเท่านั้น
4. ควรใช้การค้นหาสไตล์มากกว่าตัวเลือกลูกหลานเมื่อความสัมพันธ์ต้องขยายได้หรือข้ามขอบเขตคอมโพเนนต์/Shadow DOM (ดูการเลือกเครื่องมือที่เหมาะสมด้านบน) แต่ให้ใช้ตัวเลือกลูกหลานสำหรับความสัมพันธ์แบบคงที่และแบบครั้งเดียวซึ่งการอ้อมไม่มีประโยชน์

ตัวอย่างการใช้งาน

/* 1. Set the context on a layout container */
.featured {
  --surface: featured; /* Semantic context flag for children */
}

/* 2. Component reacts to inherited flag */
.button {
  /* Default: Outlined informational style */
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  /* Default: Hidden — only revealed in featured surfaces */
  display: none;
}

@container style(--surface: featured) {
  .button {
    /* Automatic switch to Filled promotional style */
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    /* Reveal decorative elements only in featured context */
    display: block;
  }
}

กลยุทธ์สำรอง

จนกว่าการค้นหาสไตล์คอนเทนเนอร์จะพร้อมใช้งานอย่างแพร่หลาย ให้เลเยอร์การค้นหาเหล่านั้นเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง โดยจัดส่งค่าเริ่มต้นที่อิงตามตัวเลือกซึ่งทำงานได้ทุกที่ และให้การค้นหาสไตล์ลบล้างค่าเริ่มต้นเมื่อรองรับ ใช้ :where() ในตัวเลือกบริบทเพื่อให้การค้นหาสไตล์ (ความเฉพาะเจาะจงเดียวกัน ลำดับแหล่งที่มาภายหลัง) ชนะโดยอัตโนมัติ

/* Default styles — work everywhere */
.button {
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  display: none;
}

/* Selector-based contextual styles — broad browser support */
:where(.featured) .button {
  background: var(--brand-accent);
  color: white;
  border: none;
}

:where(.featured) .badge {
  display: block;
}

/* Progressive enhancement: style queries override when supported */
@container style(--surface: featured) {
  .button {
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    display: block;
  }
}

ตัวเลือกสำรองจะเชื่อมโยงการจัดรูปแบบตามบริบทกับชื่อคลาส ซึ่งจะเชื่อมโยงคอมโพเนนต์กับตำแหน่ง DOM เมื่อการค้นหาสไตล์ได้รับการรองรับอย่างกว้างขวางแล้ว คุณจะนำกฎ :where() ออกได้