سازگاری عنصر معنایی

از پُرسمان‌های سبک (@container style()) برای راه‌اندازی انواع بافتاری بدون کدنویسی سخت آنچه که هر بافت را تولید می‌کند یا به آن واکنش نشان می‌دهد استفاده کنید. این کار جفت‌شدگی سیستم طراحی را کاهش می‌دهد و توسعه‌پذیری و کپسوله‌سازی مؤلفه را بهبود می‌بخشد.

برای مثال، قانون section.featured { --surface: featured } می‌تواند بافت را علامت‌گذاری کند و صفحه مقصد نیز ممکن است ازطریق main { --surface: featured } به‌طور پیش‌فرض به آن برود. سپس مؤلفه‌ها برای واکنش به --surface: featured موافقت می‌کنند: یک کارت نشان تبلیغاتی را نشان می‌دهد، یک دکمه به‌طور پیش‌فرض به نوع پرشده خود تغییر می‌کند، و غیره.

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

زمان استفاده از این راهنما

این راهنما تغییرات رفتاری را پوشش می‌دهد: مؤلفه‌ای که تصمیم می‌گیرد چه چیزی را پرداز کند، چگونه خود را مرتب کند، یا کدام نوع را ارائه دهد در پاسخ به بافت خود — پنهان کردن یا نشان دادن نشان، تغییر جهت چیدمان، یا تعویض نوع دکمه.

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

انتخاب ابزار مناسب

وقتی هر دو طرف یک رابطه زمینه‌ای ممکن است به‌طور مستقل تغییر کنند، از پُرسمان سبک استفاده کنید — عناصر جدید ممکن است شروع به تولید زمینه کنند، یا مؤلفه‌های جدید ممکن است شروع به واکنش به آن کنند. این غیرمستقیم بودن ازنظر توسعه‌پذیری و کپسوله‌سازی ارزشش را دارد و پرسمان‌های سبک از مرزهای DOM سایه عبور می‌کنند که گزینشگرهای فرزند نمی‌توانند. وقتی به این انعطاف‌پذیری نیازی نیست، ابزار ساده‌تر را ترجیح دهید:

• انتخاب‌کننده‌های فرزند (.toolbar .button): رابطه‌ای ثابت و یک‌باره که قابل‌استفاده مجدد یا قابل‌توسعه نیست. YAGNI اعمال می‌شود — ارجاع غیرمستقیمی را که استفاده نخواهید کرد اضافه نکنید.
• پرس‌وجوهای اندازه (@container (min-width: …)): تغییرات چیدمان و تراکم که براساس فضای دردسترس انجام می‌شود، نه وضعیت معنایی.
• پُرسمان‌های سبک (@container style(…)): حالت معنایی — آنچه یک مؤلفه باید در یک زمینه خاص ارائه، ترتیب، یا نمایش دهد.

دستورالعمل‌های پیاده‌سازی

1. پرچم بافت معنایی را بااستفاده از ویژگی سفارشی CSS در ظرف تعریف کنید.
2. container-type را برای پُرسمان‌های سبک تنظیم نکنید؛ آن‌ها ویژگی‌های سفارشی موروثی را در نزدیک‌ترین جد پُرسمان می‌کنند و به بافتار دربرگیری صریح نیاز ندارند.
3. اجباری: از @container style(--property: value) برای اعمال سبک‌های شرطی به عناصر فرزند استفاده کنید. پُرسمان‌های سبک نمی‌توانند با عنصری که ویژگی روی آن تنظیم شده است مطابقت داشته باشند — فقط با فرزندان آن.
4. باید زمانی که رابطه باید قابل‌توسعه بماند یا از مرزهای مؤلفه/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() را برداشت.