درخواست های سبک CSS

برای من، 2022 بهترین سال برای CSS است. ما هزاران چیز جدید داریم که در مرورگرهای پایدار پشتیبانی می‌شوند، و این مانند زندگی کردن در رویا است. از زیرشبکه CSS، انتخابگر :has، درخواست های کانتینر و واحدهای پنجره جدید. فهمیدم که خیلی چیزها قابل درک است – اما مطمئنم که ما در مورد آن توافق داریم این هیجان انگیز استدرسته

اخیراً، تیم کروم پشتیبانی آزمایشی را برای مشخصات پیشنهادی CSS جدید منتشر کرده است. درخواست های سبک. به طور خلاصه، آنها به ما اجازه می دهند که سبک ظرف را جویا شویم، نه فقط اندازه. این می تواند در مواردی که جستجو در اندازه ظرف کافی نیست مفید باشد.

بیایید حفاری کنیم.

درخواست اندازه کانتینر

قبل از پرداختن به جزئیات درخواست‌های سبک، ابتدا می‌خواهم یک یادآوری سریع درباره درخواست‌های اندازه کانتینر ارائه کنم. به‌جای تکیه بر اندازه ویوپورت برای تغییر سبک یک مؤلفه، می‌توانیم به سادگی در برابر اندازه ظرف جستجو کنیم.

بیایید به یک مثال نگاه کنیم.

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  
}

@container (min-width: 400px) {
  .c-article {
    
  }
}

ابتدا باید تعریف کنیم container-type روی خود ظرف سپس می توانیم استفاده کنیم @container و شروع به پرسیدن کنید هنگامی که این شرط برآورده شد، CSS روی کامپوننت موجود در آن ظرف اعمال می شود.

ارائه درخواست های سبک

به عبارت ساده، درخواست های سبک به ما اجازه می دهند که یک ویژگی CSS یا متغیر CSS را برای یک کانتینر درخواست کنیم.

درخواست‌های سبک هنوز آزمایشی هستند و در حال حاضر فقط در Chrome Canary اجرا می‌شوند. برای آزمایش آنها، به chrome://flags بروید و سوئیچ «ویژگی‌های پلتفرم وب آزمایشی» را فعال کنید.

به عنوان مثال، ما می توانیم بررسی کنیم که آیا ظرف وجود دارد یا خیر display: flex و بر اساس آن به کودک سبک دهید.

.page-header {
  display: flex;
}

@container style(display: flex) {
  .page-header__start {
    flex: 1;
    display: flex;
    align-items: center;
    border-right: 1px solid lightgrey;
  }
}

در حالت ایده‌آل، موارد بالا باید کار کنند، اما درخواست‌های سبک نمونه اولیه فعلی در Chrome Canary فقط به متغیرهای CSS محدود می‌شوند. انتظار می‌رود درخواست‌های سبک در کروم M111 ارسال شوند.

در حال حاضر، ما می توانیم آن متغیر را بررسی کنیم --boxed: true به ظرف اضافه می شود و اگر چنین است، می توانیم سبک عنصر فرزند را بر اساس آن تغییر دهیم.

شکل زیر را در نظر بگیرید.

توجه داشته باشید که تفاوت اصلی بین پرس و جوهای کانتینر و استایل پرس و جو در این است که کوئری اول برای اندازه و کوئری دوم برای استایل است.

.card-container {
  --boxed: true;
}

@container style(--boxed: true) {
  .card {
    
  }
}

مشکل

قبل از اینکه به جایی بپردازم که می توانیم از استایل پرس و جو استفاده کنیم، می خواهم این سوال را برجسته کنم: استایل پرس و جو چه چیزی را حل می کند؟ آیا درخواست اندازه دیگر کافی نیست؟

این سوال خوبی برای شروع است. در کوئری های اندازه می توانیم استایل یک جزء را بر اساس عرض والد آن کنترل کنیم و این بسیار مفید است. در برخی موارد، ممکن است اصلاً نیازی به سوال در مورد اندازه نداشته باشیم. در عوض، می‌خواهیم استایل محاسباتی را پرس و جو کنیم.

برای درک بهتر، به شکل زیر نگاه می کنیم.

این متن مقاله است که از CMS آمده است. ما یک سبک پیش‌فرض برای شکل و یک سبک دیگر داریم که به نظر می‌رسد رندر شده است.

در اینجا نشانه گذاری HTML است.

figure>
  img src="cheesecake.jpg" alt="" />
  figcaption>....figcaption>
figure>

figcaption {
  font-size: 13px;
  padding: 4px 8px;
  background: lightgrey;
}

وقتی شروع به استایل کردن ویژگی های برجسته می کنیم، باید موارد بالا را نادیده بگیریم و یک کلاس CSS داشته باشیم که بتوانیم با آن استایل دهی کنیم.

.featured-figure {
  display: flex;
  flex-wrap: wrap;
}

.featured-figure figcaption {
  font-size: 16px;
  padding: 16px;
  border-left: 3px solid;
  margin-left: -6rem;
  align-self: center;
}

عالی، کار می کند. آیا می توانیم بهتر عمل کنیم؟ بله با درخواست های سبک می توانیم اضافه کنیم display: flex یا یک متغیر CSS --featured: true به شکل و سبک بر اساس آن.

figure>
  img src="cheesecake.jpg" alt="" />
  figcaption>....figcaption>
figure>

figure {
  container-name: figure;
  --featured: true;
}


@container figure style(--featured: true) {
  img {
    
  }

  figcaption {
    
  }
}

و اگر --featured: true وجود ندارد، ما به طور پیش فرض به طراحی شکل پایه خواهیم پرداخت. می توانیم استفاده کنیم not کلمه کلیدی برای بررسی وقتی رقم نیست display: flex.

@container figure not style(--featured: true) {
  figcaption {
    
  }
}

چند جزئیات که باید بدانید

هر عنصر به طور پیش فرض یک محفظه سبک است

بنابراین شما اصلا نیازی به تعریف ظرف سبک ندارید. به طور پیش فرض برای شما وجود دارد.

آیا نمی توانیم این را با نام کلاس حل کنیم؟

بله، ما می توانیم. هدف از درخواست‌های سبک این است که CSS را خواناتر و آسان‌تر تغییر دهیم. منطق فوق را می توان به صورت یک جزء CSS بدون افزودن همه این سبک ها به یک کلاس شرطی نوشت.

نسخه ی نمایشی

مشکلات کمتری با مشخصات CSS

چیزی که من در مورد استفاده از پرس و جوهای سبک دوست دارم این است که ویژگی CSS را کاهش می دهد زیرا برای استایل دادن به یک نوع جزء کمتر به کلاس های نوع CSS یا ویژگی های داده HTML تکیه می کنیم.

در CSS زیر یک استایل پایه برای یک بخش داریم. هیچ چیز فانتزی نیست

.section {
  background-color: lightgrey;
}

.section__title,
.section__desc {
  color: #222;
}

ما به راهی نیاز داریم که یک تم متفاوت برای آن داشته باشیم، بنابراین از یک کلاس variation استفاده کردیم.

.section--dark {
  background-color: #222;
}

.section--dark .section__title,
.section--dark .section__desc {
  color: #fff;
}

با درخواست های سبک می توانیم از container about استفاده کنیم .section جزء و سپس عنوان و توضیحات را بدون ایجاد ویژگی بیشتر در CSS علامت گذاری کنید.

@container style(--theme: dark) {
  .section {
    background-color: #222;
  }

  .section__title,
  .section__desc {
    color: #fff;
  }
}

این به نظر من خیلی تمیزتر است.

بیایید چند مورد استفاده را بررسی کنیم که در آن پرس و جوهای سبک می توانند مفید باشند.

از موارد و مثال ها استفاده کنید

سبک مبتنی بر زمینه

این یک مورد استفاده رایج است که در آن ما از یک مولفه به طور متفاوت در یک لفاف استفاده می کنیم. در کنار ما یک جزء مقاله داریم که ممکن است شامل یک عدد باشد یا نباشد.

در حال حاضر، ما می‌توانیم از یک کلاس CSS جدید برای مدیریت استایل یا شاید یک کلاس تنوع از خود مؤلفه مقاله استفاده کنیم.

.most-popular {
  counter-reset: list;
}

.most-popular article {
  
}

یا می توانیم از ویژگی های داده در HTML استفاده کنیم.

.most-popular[data-counter="true"] {
  counter-reset: list;
}

.most-popular[data-counter="true"] .article {
  
}

با درخواست‌های سبک CSS، می‌توانیم یک متغیر CSS را به عنصر والد اضافه کنیم و بر اساس آن به مقاله استایل دهید. این را بررسی کنید:

.most-popular {
  --counter: true;
}

@container style(--counter: true) {
  .articles-list {
    counter-reset: list;
  }

  .article {
    display: flex;
    align-items: flex-start;
  }

  .article:before {
    counter-increment: list;
    content: counter(list);
  }
}

ما حتی نیازی به داشتن یک کلاس تنوع در مولفه مقاله نداریم. هیچ تودرتوی CSS نیز مورد نیاز نیست.

نسخه ی نمایشی

تم ها را در سطح مؤلفه تغییر دهید

برخی از مؤلفه‌هایی که ایجاد کرده‌ایم، بر اساس شرایط خاص، به تم متفاوتی نیاز دارند. در مثال زیر یک داشبورد با اجزای مختلف آمار داریم.

بر اساس wrapper، باید موضوع کامپوننت را تغییر دهیم.

در حال حاضر می‌توانیم مؤلفه آمار سفارشی را بر اساس ظرف کلاس سفارشی آن‌ها استایل دهید.

.special-wrapper .stat {
  background-color: #122c46;
}

.special-wrapper .stat__icon {
  background-color: #2e547a;
}

.special-wrapper .stat__title {
  background-color: #b3cde7;
}

موارد بالا به هیچ وجه اشتباه یا بد نیست، اما به دلیل اینکه ما در CSS قرار داده ایم، ویژگی را افزایش می دهد. بیایید بررسی کنیم که چگونه می توانیم موارد فوق را با درخواست های سبک پیاده سازی کنیم.

ابتدا باید یک سوئیچ روی بسته بندی سفارشی تعریف کنیم. سپس می‌توانیم بررسی کنیم که آیا آن سوئیچ فعال است یا نه و بر اساس آن به مؤلفه آمار استایل دهی کنیم.

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    
  }
}

چیزی که در مورد درخواست های سبک در این زمینه مفید است این است که منطقی است که سبک بالا در یک مکان در CSS باشد.

.stat {
  
}

@container stats style(--theme: dark) {
  .stat {
    
  }
}

جزء مقاله

کوئری‌های اندازه کانتینر آنقدر قدرتمند هستند که راهی برای جستجوی یک جزء در برابر ظرف آن در اختیار ما قرار می‌دهند. در اینجا یک مثال محبوب از مقاله جستجوی کانتینر من آمده است.

در CSS، باید یک محفظه اندازه تعریف کنیم و سپس بر اساس آن جزء مقاله را پرس و جو کنیم.

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  
}


@container (min-width: 400px) {
  .c-article {
    display: flex;
    flex-wrap: wrap;
  }
}

و سبک ارائه شده یا قهرمان.

@container (min-width: 700px) {
  .c-article {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
  }

  .card__thumb {
    position: absolute;
    inset: 0;
    object-fit: cover;
  }
}

این بسیار مفید است. درخواست های سبک کجا می توانند به ما کمک کنند؟ این سوال خیلی خوبی است. در برخی موارد ممکن است ما علاقه مند باشیم فقط زمانی که یک سبک بر اساس اندازه ظرف اعمال می شود، و سایر سبک ها ممکن است مشروط یا مطابق با نیازهای ما باشند.

اینجاست که استایل پرس و جو به کار می آید. ما می توانیم درخواست ترکیب اندازه و سبک برای این منظور.

CSS زیر را در نظر بگیرید.

.o-grid__item {
  container-type: inline-size;
  --horizontal: true;
}

@container (min-width: 400px) and style(--horizontal: true) {
  
}

بنابراین، سبک افقی فقط در صورتی کار خواهد کرد که --horizontal متغیر تنظیم شده است true روی ظرف به عنوان مثال، می توانید متغیر و مقدار را به دلخواه نام گذاری کنید --horizontal: please.

در شکل، اندازه ظرف یکسان است، اما چیزی که آنها را متمایز می کند این است که ظرف سمت راست دارای --horizontal: true

نسخه ی نمایشی

گروهی از آواتارها

در این مثال، ما گروهی از آواتارهای کاربر را داریم. ما باید آنها را بر اساس متغیر CSS که بر روی والد تنظیم شده است، موقعیت متفاوتی قرار دهیم. من این نمونه را از سیستم طراحی Atlassian انتخاب کردم.

شکل زیر را در نظر بگیرید.

div class="avatars-wrapper">
  div class="avatars-list">
    div class="avatar">div>
    
  div>
div>

در CSS یک نام به کانتینر اضافه کردم و تعریف کردم --appearance: default متغیر؛

.avatars-wrapper {
  container-name: avatars;
}

.avatars-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

با این کار می توانیم از استایل پرس و جو برای تغییر طرح بر اساس استفاده کنیم --appearance متغیر

@container avatars style(--appearance: stack) {
  .avatar {
    box-shadow: 0 0 0 2px #fff;
  }

  .avatar + .avatar {
    margin-inline-start: -0.5rem;
  }
}

@container avatars style(--appearance: grid) {
  .avatars-list {
    gap: 0.5rem;
    max-width: 200px;
  }
}

من این نوع منطق را در یک سیستم طراحی تصور می کنم. خیلی مفید و واضح است (نظر من فقط گفتن است).

نسخه ی نمایشی

سبک های تزئینی مرسوم

در برخی از سناریوها، ممکن است نیاز داشته باشیم که یک سبک تزئینی مشروط را به عناصر متن بر اساس جایی که در HTML هستند اضافه کنیم.

شکل زیر را در نظر بگیرید:

عنوان و پاراگراف دارای یک افکت پس زمینه چرخشی در زیر آنها هستند. این کار از طریق یک شبه عنصر انجام می شود.

div class="content">
  h2>h2>
  p>p>
div>

برای استایل دادن به آنها می‌توانیم از یک متغیر CSS استفاده کنیم و بررسی کنیم که آیا تغییر داده شده است یا نه و سبک‌ها را متناسب با آن اضافه کنیم. در مثال، :after عنصر شبه به هر فرزند اضافه می شود .content ظرف

.content {
  --decorated: true;
}

@container style(--decorated: true) {
  :after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--dec-color, green);
    opacity: 0.1;
    z-index: -1;
    transform: rotate(-1.5deg);
  }
}

نسخه ی نمایشی

سبک RTL: جزء نقشه

هنگام نوشتن سبک های RTL، اولین قدم اضافه کردن است dir=rtl به element. Once that is added, the direction ویژگی CSS برای هر عنصر تبدیل می شود direction: rtl.

.item {
  margin-inline-start: 1rem;
}

html[dir="rtl"] .card {
  background: linear-gradient(to left, ...);
}

html[dir="rtl"] .card__cta {
  transform: scaleX(-1);
}

.card {
  --bg-angle: to right;
  background: linear-gradient(var(--bg-angle), #5521c3, #5893eb);
}

@container card style(direction: rtl) {
  .card {
    --bg-angle: to left;
  }

  .card__cta {
    transform: scaleX(-1);
  }
}

.media--padded {
  background: #fff;
}

.media--padded .media__content {
  padding: 0.75rem 0.75rem 3rem 0.75rem;
}

.special-container {
  --card--padded: true;
}

@container style (--card-padded: true) {
  .media {
    background: #fff;
  }

  .media__content {
    padding: 0.75rem 0.75rem 3rem 0.75rem;
  }
}

.module--reel p {
  color: white;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.module--reel {
  
  --card--padded: true;
  --light-on-dark: true;
}

@container style (--card-padded: true) {
}

@container style (--light-on-dark: true) {
  p {
    color: white;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

@mixin debug {
  * {
    outline: solid 1px red;
  }
}

.some-element {
  @include debug;
}

@container style(--debug: true) {
  * {
    outline: solid 1px red;
  }
}

.site-header {
  --debug: true;
}

.card {
  position: relative;
  container-name: card;
  --block-link: true;
}

@container card style(--block-link: true) {
  a:after {
    content: "";
    position: absolute;
    inset: 0;
    outline: solid 2px;
  }
}

.download-wrapper {
  
  container: download / inline-size;
  --card: true;
}

@container download style(--card: true) and (max-width: 220px) {
  .c-download {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  svg {
    order: -1;
  }
}