واکنش‌پذیری کد طراحی

پس‌زمینه و نمای کلی

اغلب نویسنده باید تغییرات زمینه‌ای در طراحی مؤلفه ایجاد کند. در گذشته، نویسندگان برای اعمال چنین تغییراتی باید از انتخابگرها استفاده می‌کردند. این اغلب به این معنی بود که درحالی‌که بسیاری از نشانه‌های طراحی آن‌ها می‌توانستند به‌عنوان ویژگی‌های سفارشی وجود داشته باشند، نشانه‌های طراحی با ترتیب بالاتر فقط می‌توانستند به‌عنوان یک الگوی انتخاب‌گر (یعنی بااستفاده از نام کلاس یا قرارداد مشخصه) یا به‌عنوان ویژگی‌ها/زمینه در چارچوب جاوا اسکریپت کدگذاری شوند.

پرس‌وجوهای سبک محفظه به نویسندگان اجازه می‌دهد عناصر را براساس مقدار خصوصیت سفارشی محاسبه‌شده عنصر والد سبک‌بندی کنند. این یعنی نویسندگان می‌توانند مقادیر معنی‌دار برای نشان طراحی در برگه سبک نگارش خود بنویسند، به‌جای اینکه برای ارائه به نشانه‌گذاری یا جاوا اسکریپت متکی باشند.

نحوه پیاده‌سازی

پیاده‌سازی یک نشانه طراحی واکنشی بااستفاده از پرسمان سبک محفظه بسیار ساده است:

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 برای پرسمان‌های سبک ظرف وجود نداشته باشد، توصیه نمی‌شود که از آن‌ها برای ویژگی‌های اصلی که باید در همه مرورگرها دردسترس باشند استفاده شود، زیرا ایجاد یک جایگزین برای آن‌ها که مزایای آن‌ها را از بین نبرد یا محدودیت‌های خاص خود را نداشته باشد، ساده نیست. برای مثال، اگر اولویت کاربر برای تراکم واسط کاربر به‌عنوان ویژگی اصلی‌ای که باید در همه تجربه‌ها دردسترس باشد درنظر گرفته نشود، می‌توان از پُرسمان‌های سبک محفظه برای پیاده‌سازی این ویژگی بدون بازگشت استفاده کرد.

استفاده از انتخاب‌گرها

برای ویژگی‌های اصلی، باید از رویکرد جایگزین بااستفاده از انتخاب‌گرها استفاده شود. این مثال از مشخصه 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

اگر لازم است پُرسمان‌های سبک محتوی را بررسی کنید تا به‌طور شرطی برخی‌از واسط‌های کاربر را که به آن متکی هستند نمایش دهید، می‌توانید از پُرسمان سبک برای این کار استفاده کنید:

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

.density-toggle {
  display: none;
}

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

بررسی ویژگی با جاوا اسکریپت

برای بررسی ویژگی با جاوا اسکریپت، کمی پیچیده‌تر است زیرا میانای CSSContainerRule قبل‌از افزودن پرسمان‌های سبک محفظه وجود داشته است، بنابراین برای این منظور قابل‌اعتماد نیست. درعوض، باید مقدار محاسبه‌شده یک ویژگی شناخته‌شده را که با پُرسمان سبک تنظیم می‌شود بررسی کنید.

این مثال از یک ویژگی سفارشی استفاده می‌کند زیرا هیچ تأثیر بصری نخواهد داشت:

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

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

سپس مقدار محاسبه‌شده را در جاوا اسکریپت به این صورت بررسی کنید:

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