การตอบสนองของโทเค็นการออกแบบ

ข้อมูลเบื้องหลังและภาพรวม

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

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

วิธีการนำไปใช้งาน

การใช้โทเค็นการออกแบบเชิงรับโดยใช้การค้นหาสไตล์คอนเทนเนอร์นั้นค่อนข้างตรงไปตรงมา ดังนี้

1. ตั้งค่าโทเค็นการออกแบบลำดับที่สูงกว่าเป็นคุณสมบัติที่กำหนดเองในคอนเทนเนอร์ โดยไม่จำเป็นต้องเป็นคุณสมบัติที่กำหนดเองที่ลงทะเบียนไว้
2. ใช้กฎ @container style() เพื่อค้นหาค่าของคุณสมบัติที่กำหนดเองนั้น
3. ใช้สไตล์ที่เหมาะสมกับองค์ประกอบสืบทอดภายในคอนเทนเนอร์

สิ่งที่ควรคำนึงถึงมีดังนี้

• คอนเทนเนอร์ที่ค้นหาด้วยการค้นหาสไตล์ไม่จำเป็นต้องตั้งค่า container-type หรือ container-name แต่ container-name จะช่วยให้ค้นหาได้เจาะจงมากขึ้น
• คอนเทนเนอร์เองไม่สามารถจัดสไตล์โดยการค้นหาสไตล์คอนเทนเนอร์ได้

ต่อไปนี้เป็นตัวอย่างพื้นฐานของขั้นตอนการติดตั้งใช้งานข้างต้น

<div class="features">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.features {
  --density: spacious;
}

.bugs {
  --density: compact;
}

@container style(--density: compact) {
  .card {
    padding: 8px;
  }
}

@container style(--density: spacious) {
  .card {
    padding: 24px;
  }
}

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

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

การใช้ตัวเลือกแทน

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

<div class="features" data-density="spacious">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs" data-density="compact">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

/* This example uses `:where()` to avoid increasing specificity */
:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

ข้อจำกัดหลักของแนวทางสำรองนี้คือไม่รองรับองค์ประกอบที่ซ้อนกันซึ่งมีการตั้งค่าแอตทริบิวต์ data-density เนื่องจากความเฉพาะเจาะจงของตัวเลือกเหมือนกัน ระบบจะใช้ลำดับการปรากฏเพื่อกำหนดรูปแบบ (เช่น [data-density="spacious"] จะมีความสำคัญเหนือกว่า [data-density="compact"] เสมอ)

การใช้การค้นหาสไตล์เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง

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

.card {
  --card-padding-compact: 8px;
  --card-padding-spacious: 24px;
}

:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

/* Use style queries as a progressive enhancement: same specificity, so order of appearance is used */

@container style(--density: compact) {
  .card {
    padding: var(--card-padding-compact);
  }
}

@container style(--density: spacious) {
  .card {
    padding: var(--card-padding-spacious);
  }
}

การตรวจสอบฟีเจอร์ด้วย CSS เพียงอย่างเดียว

หากต้องการตรวจสอบฟีเจอร์การค้นหาสไตล์คอนเทนเนอร์เพื่อแสดง UI บางอย่างที่อาศัยการค้นหาสไตล์คอนเทนเนอร์ตามเงื่อนไข คุณสามารถใช้การค้นหาสไตล์เพื่อดำเนินการดังกล่าวได้ ดังนี้

:root {
  --style-queries-supported: check;
}

.density-toggle {
  display: none;
}

@container style(--style-queries-supported) {
  .density-toggle {
    display: revert;
  }
}

การตรวจสอบฟีเจอร์ด้วย JavaScript

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

ตัวอย่างนี้ใช้คุณสมบัติที่กำหนดเองเนื่องจากจะไม่มีผลต่อภาพ

:root {
  --style-queries-supported: check;
}

@container style(--style-queries-supported: check) {
  body {
    --style-queries-supported: yes;
  }
}

จากนั้นตรวจสอบค่าที่คำนวณแล้วใน JavaScript ดังนี้

if (getComputedStyle(document.body).getPropertyValue("--style-queries-supported") === "yes") {
  // Use container style queries
} else {
  // Use fallback strategy
}