زمان هایی که به جای متغیر CSS به یک @property سفارشی نیاز دارید — مجله Smashing

ما معمولاً از یک متغیر CSS به‌عنوان جای‌بانی برای مقداری که قصد استفاده مجدد از آن را داریم استفاده می‌کنیم – تا از تکرار همان مقدار جلوگیری کنیم و در صورت نیاز به به‌روزرسانی، آن مقدار را به راحتی در سراسر صفحه به‌روزرسانی کنیم.

:root { 
  --mix: color-mix(in srgb, #8A9B0F, #fff 25%);
}

div {
  box-shadow: 0 0 15px 25px var(--mix);
}

میتونیم ثبت نام کنیم سفارشی خواص در CSS با استفاده از @property. متداول ترین مثالی که احتمالاً پیدا خواهید کرد نشان می دهد که چگونه @property می تواند رنگ های یک گرادیان را متحرک کند، کاری که ما نمی توانیم در غیر این صورت انجام دهیم زیرا یک متغیر CSS به عنوان یک رشته شناخته می شود و آنچه ما نیاز داریم یک قالب عددی است که بتواند بین دو مقدار عددی درون یابی کند. آنجاست @property به ما اجازه می دهد تا نه تنها متغیر را تعریف کنیم ارزش اما این نحو، مقدار اولیه، و وراثت، دقیقاً مانند آنچه در مشخصات CSS مستند شده است.

به عنوان مثال، در اینجا نحوه ثبت یک ویژگی سفارشی به نام آمده است --circleSize، که به عنوان مقدار درصدی که روی تنظیم شده است فرمت می شود 10% به طور پیش فرض و توسط عناصر فرزند به ارث نمی رسد.

@property --circleSize {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 10%;
}

div { /* red div */
  clip-path: circle(var(--circleSize) at center bottom);
  transition: --circleSize 300ms linear;
}

section:hover div { 
  --circleSize: 125%; 
}

در این مثال، الف circle() تابع برای برش استفاده می شود <div> عنصر را در – حدس زدید – یک دایره. مقدار اندازه از circle()شعاع 's روی ویژگی سفارشی ثبت شده تنظیم شده است، --circleSize، که سپس به طور مستقل در شناور با استفاده از a تغییر می کند transition. نتیجه چیزی نزدیک به افکت موج‌دار Material Design است و ما می‌توانیم این کار را انجام دهیم زیرا به CSS گفته‌ایم که ویژگی سفارشی را به‌عنوان یک مقدار درصد به‌جای یک رشته در نظر بگیرد:

آزادی تعریف و تعیین ویژگی‌های CSS خود به ما قدرت‌های فوق‌العاده متحرک جدیدی می‌دهد که زمانی فقط با جاوا اسکریپت امکان‌پذیر بود، مانند انتقال رنگ‌های یک گرادیان.

در اینجا ایده‌ای دارم که از همان ایده اولیه ریپل استفاده می‌کند، فقط چندین ویژگی سفارشی را به هم متصل می‌کند که به صورت رنگ‌ها، طول‌ها و درجه‌های زاویه قالب‌بندی می‌شوند تا انیمیشن پیچیده‌تری داشته باشند که در آن متن با تغییر رنگ متن از ظرف می‌لغزد.

بیایید از این نسخه نمایشی به عنوان تمرینی برای کسب اطلاعات بیشتر در مورد تعریف ویژگی های سفارشی با استفاده از @property at-rule، ترکیب آنچه که در ریپل دیدیم با مفهوم درونیابی مقادیر گرادیان.

HTML

<div class="scrolling-text">
  <div class="text-container">
    <div class="text">
      <ruby>壹<rt>one</rt></ruby>
      <ruby>蜀<rt>two</rt></ruby>
      <ruby>兩<rt>three</rt></ruby>
    </div>
  </div>
</div>

HTML حاوی کاراکترهای چینی است که می خواهیم متحرک سازی کنیم. این حروف چینی با علامت گذاری شده اند <ruby> برچسب‌ها را تگ کنید تا ترجمه انگلیسی آن‌ها قابل ارائه باشد <rt> برچسب ها ایده این است که .scrolling-text محفظه والد کامپوننت است و در آن یک عنصر فرزند است که کاراکترهای متن کشویی را نگه می‌دارد که به کاراکترها اجازه می‌دهد به داخل و خارج از دید حرکت کنند.

کشویی عمودی

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

.scrolling-text {
  height: 1lh;
  overflow: hidden;
  width: min-content;
}
.text-container:has(:hover, :focus) .text {
  transform: translateY(-2lh) ;
}
.text {
  transition: transform 2.4s ease-in-out;
}

تنظیم کردن .scrolling-text عرض ظرف به min-content به کاراکترها تناسب تنگاتنگی می بخشد و آنها را به صورت عمودی در یک ستون قرار می دهد. ارتفاع ظرف تنظیم شده است 1lh. و از آنجایی که ما تنظیم کرده ایم overflow: hidden در ظرف، تنها یک کاراکتر در ظرف در هر نقطه از زمان مشخص می شود.

نکته: می توانید از HTML نیز استفاده کنید <pre> عنصر یا یکی white-space یا text-wrap ویژگی هایی برای کنترل نحوه بسته بندی متن.

در حالت شناور، متن حرکت می کند -2lh، یا ارتفاع یک کاراکتر متنی را در جهت مخالف یا بالا دو برابر کنید. بنابراین، اساساً، ما چیزها را با دو کاراکتر به سمت بالا می‌کشیم تا زمانی که ظرفی که متن را در حالت شناور قرار می‌دهد، از اولین کاراکتر به شخصیت سوم متحرک شود.

اعمال گرادیان در متن

در اینجا یک استایل سرگرم کننده وجود دارد:

.text {
  background: repeating-linear-gradient(
    180deg, 
    rgb(224, 236, 236), 
    rgb(224, 236, 236) 5px, 
    rgb(92, 198, 162) 5px, 
    rgb(92, 198, 162) 6px);
  background-clip: text;
  color: transparent; /* to show the background underneath */
  background-size: 20% 20%;
}

هر چند وقت یکبار متوجه می شوید که از شیب های تکراری در کارتان استفاده می کنید؟ با این حال، بخش سرگرم کننده آن چیزی است که بعد از آن می آید. ببینید، ما در حال تنظیم یک transparent رنگ بر روی متن و این اجازه می دهد تا repeating-linear-gradient() برای نشان دادن از طریق آن اما از آنجایی که متن یک جعبه است مانند هر چیز دیگری در CSS، پس زمینه را در خود متن برش می دهیم تا به نظر برسد که متن از گرادینت بریده شده است.

خیلی تمیز، درسته؟ اکنون، به نظر می رسد که کاراکترهای متن ما یک الگوی راه راه روی آنها نقاشی شده است.

متحرک سازی گرادیان

اینجاست که ما همان مفهوم شیب متحرک را که در دیگر آموزش‌ها توضیح داده شده است، می‌گیریم و آن را در کاری که در اینجا انجام می‌دهیم کار می‌کنیم. برای آن، ابتدا تعدادی از آنها را ثبت می کنیم repeating-linear-gradient() مقادیر به عنوان ویژگی های سفارشی اما بر خلاف سایر پیاده سازی ها، پیاده سازی ما کمی پیچیده تر است، زیرا ما چندین مقدار را متحرک خواهیم کرد تا مثلاً، رنگ را به روز کنیم.

در عوض، ما دو رنگ، یک طول و یک زاویه را متحرک می کنیم.

@property --c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(224, 236, 236);
}
@property --c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(92, 198, 162);
}
@property --l {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 5px;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}

.text {
  background: repeating-linear-gradient(
    var(--angle), 
    var(--c1), 
    var(--c1) 5px, 
    var(--c2) var(--l), 
    var(--c2) 6px);
}

ما می‌خواهیم مقادیر ویژگی‌های سفارشی ثبت‌شده خود را زمانی که ظرفی که متن را در خود نگه می‌دارد یا در فوکوس است، به‌روزرسانی کنیم. تنها چیزی که لازم است این است که ویژگی ها را با مقادیر به روز شده مجدداً اعلام کنید.

.text-container:has(:hover, :focus) .text {
  --c1: pink;
  --c2: transparent;  
  --l: 100%;
  --angle: 90deg;

  background-size: 50% 100%;
  transform:  translateY(-2lh);
}

برای اینکه درباره آنچه اتفاق می‌افتد کاملاً واضح باشیم، اینها ویژگی‌ها و مقادیر سفارشی هستند که در شناور به‌روزرسانی می‌شوند:

• --c1: با مقدار رنگ شروع می شود rgb(224, 236, 236) و به روز رسانی به pink.
• --c2: با مقدار رنگ شروع می شود rgb(92, 198, 162) و به روز رسانی به transparent.
• --l: با مقدار طول شروع می شود 5px و به روز رسانی به 100%.
• --a: با مقدار زاویه شروع می شود 180deg و به روز رسانی به 90deg.

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

پالایش گذار

در تمام این مدت، .text عنصر حاوی کاراکترها به سمت بالا اسلاید می شود تا یک کاراکتر در یک زمان نمایان شود. تنها چیز این است که ما باید به CSS بگوییم چه خواهد شد transition در شناور، که ما به طور مستقیم بر روی .text عنصر:

.text {
  transition: --l, --angle, --c1, --c2, background-size, transform 2.4s ease-in-out;
  transition-duration: 2s; 
}

بله، من به همین راحتی می توانستم از آن استفاده کنم all کلمه کلیدی برای انتخاب همه ویژگی های انتقال. اما من ترجیح می دهم مرحله اضافی را برای اعلام هر یک به صورت جداگانه انجام دهم. این عادت کوچکی است که مرورگر مجبور نباشد چیزهای زیادی را تماشا کند، که حتی می تواند سرعت کار را کاهش دهد.

نسخه ی نمایشی نهایی

در اینجا یک بار دیگر نتیجه نهایی آمده است:

امیدوارم این تمرین کوچک نه تنها انواع چیزهای فانتزی را که می‌توانیم با ویژگی‌های سفارشی CSS بسازیم را نشان دهد، بلکه به روشن شدن تفاوت‌های بین ویژگی‌های سفارشی و متغیرهای استاندارد نیز کمک کند. متغیرهای استاندارد مکان‌نماهای بسیار خوبی برای کدهای قابل نگهداری بیشتر هستند (و چند ترفند فانتزی خاص خودشان) اما وقتی می‌بینید که نیاز به به‌روزرسانی یک مقدار در خاصیتی دارید که چندین مقدار را پشتیبانی می‌کند – مانند رنگ‌ها در یک گرادیان – @property at-rule جایی است که در آن قرار دارد زیرا به ما امکان می دهد متغیرهایی را با مشخصات سفارشی تعریف کنیم که نحو، مقدار اولیه و رفتار وراثت متغیر را تعیین می کند.

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

از همین رو @property یک استاندارد CSS مفید است که باید در ذهن داشته باشید و زمانی که به انیمیشن‌هایی فکر می‌کنید که شامل تغییرات ارزش جدا شده هستند، آماده استفاده است.

مطالعه بیشتر در SmashingMag

(gg, yk)