M

MLOG

فارسی

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

خصوصیات سفارشی CSS: موارد استفاده پیشرفته برای استایل‌دهی پویا

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

درک خصوصیات سفارشی CSS

قبل از پرداختن به موارد استفاده پیشرفته، بیایید به طور خلاصه اصول اولیه را مرور کنیم:

موارد استفاده پیشرفته

۱. تم‌بندی پویا

یکی از قانع‌کننده‌ترین موارد استفاده برای خصوصیات سفارشی CSS، ایجاد تم‌های پویا است. به جای نگهداری چندین شیوه‌نامه برای تم‌های مختلف (مانند روشن و تاریک)، می‌توانید مقادیر خاص تم را به عنوان خصوصیات سفارشی تعریف کرده و بین آن‌ها با استفاده از جاوا اسکریپت یا media query های CSS جابجا شوید.

مثال: سوئیچ تم روشن و تاریک

در اینجا یک مثال ساده از نحوه پیاده‌سازی سوئیچ تم روشن و تاریک با استفاده از خصوصیات سفارشی CSS و جاوا اسکریپت آورده شده است:

CSS:


:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
}

[data-theme="dark"] {
  --bg-color: #333333;
  --text-color: #ffffff;
  --link-color: #66b3ff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

HTML:


<button id="theme-toggle">تغییر تم</button>
<div class="content">
  <h1>وب‌سایت من</h1>
  <p>محتوایی در اینجا.</p>
  <a href="#">یک لینک</a>
</div>

جاوا اسکریپت:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  if (body.dataset.theme === 'dark') {
    body.dataset.theme = 'light';
  } else {
    body.dataset.theme = 'dark';
  }
});

در این مثال، ما مقادیر پیش‌فرض برای رنگ پس‌زمینه، رنگ متن و رنگ لینک را در شبه کلاس :root تعریف می‌کنیم. هنگامی که ویژگی data-theme در عنصر body به "dark" تنظیم می‌شود، مقادیر خصوصیت سفارشی مربوطه اعمال شده و به طور موثر به تم تاریک تغییر می‌کند.

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

ملاحظات جهانی برای تم‌بندی

هنگام طراحی تم‌ها برای مخاطبان جهانی، موارد زیر را در نظر بگیرید:

۲. طراحی واکنش‌گرا با خصوصیات سفارشی

خصوصیات سفارشی CSS می‌توانند طراحی واکنش‌گرا را با اجازه دادن به شما برای تعریف مقادیر مختلف برای اندازه‌های مختلف صفحه، ساده‌تر کنند. به جای تکرار media query ها در سراسر شیوه‌نامه خود، می‌توانید چند خصوصیت سفارشی را در سطح ریشه به‌روز کنید و تغییرات به تمام عناصری که از آن خصوصیات استفاده می‌کنند، به صورت آبشاری اعمال خواهد شد.

مثال: اندازه‌های فونت واکنش‌گرا

در اینجا نحوه پیاده‌سازی اندازه‌های فونت واکنش‌گرا با استفاده از خصوصیات سفارشی CSS آمده است:


:root {
  --base-font-size: 16px;
}

h1 {
  font-size: calc(var(--base-font-size) * 2);
}

p {
  font-size: var(--base-font-size);
}

@media (max-width: 768px) {
  :root {
    --base-font-size: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    --base-font-size: 12px;
  }
}

در این مثال، ما یک خصوصیت سفارشی --base-font-size تعریف کرده و از آن برای محاسبه اندازه‌های فونت برای عناصر مختلف استفاده می‌کنیم. هنگامی که عرض صفحه کمتر از 768 پیکسل باشد، --base-font-size به 14 پیکسل به‌روز می‌شود و اندازه‌های فونت تمام عناصری که به آن وابسته هستند به طور خودکار تنظیم می‌شوند. به طور مشابه، برای صفحات کوچکتر از 480 پیکسل، --base-font-size بیشتر کاهش یافته و به 12 پیکسل می‌رسد.

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

ملاحظات جهانی برای طراحی واکنش‌گرا

هنگام طراحی وب‌سایت‌های واکنش‌گرا برای مخاطبان جهانی، موارد زیر را در نظر داشته باشید:

۳. محاسبات پیچیده با calc()

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

مثال: طرح‌بندی گرید پویا

در اینجا نحوه ایجاد یک طرح‌بندی گرید پویا که در آن تعداد ستون‌ها توسط یک خصوصیت سفارشی تعیین می‌شود، آمده است:


:root {
  --num-columns: 3;
  --grid-gap: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--num-columns), minmax(100px, 1fr));
  grid-gap: var(--grid-gap);
}

.grid-item {
  padding: 20px;
  background-color: #f0f0f0;
}

در این مثال، خصوصیت سفارشی --num-columns تعداد ستون‌ها را در طرح‌بندی گرید تعیین می‌کند. خاصیت grid-template-columns از تابع repeat() برای ایجاد تعداد مشخصی ستون استفاده می‌کند، که هر کدام دارای حداقل عرض 100 پیکسل و حداکثر عرض 1fr (واحد کسری) هستند. خصوصیت سفارشی --grid-gap فاصله بین آیتم‌های گرید را تعریف می‌کند.

شما می‌توانید به راحتی تعداد ستون‌ها را با به‌روزرسانی خصوصیت سفارشی --num-columns تغییر دهید و طرح‌بندی گرید به طور خودکار مطابق با آن تنظیم می‌شود. همچنین می‌توانید از media query ها برای تغییر تعداد ستون‌ها بر اساس اندازه صفحه استفاده کنید و یک طرح‌بندی گرید واکنش‌گرا ایجاد کنید.

مثال: شفافیت مبتنی بر درصد

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


:root {
    --opacity-percentage: 50;
}

.element {
    opacity: calc(var(--opacity-percentage) / 100);
}

این به شما امکان می‌دهد شفافیت را با یک متغیر واحد که نماینده درصد است تنظیم کنید، که خوانایی و قابلیت نگهداری را بهبود می‌بخشد.

۴. بهبود استایل‌دهی کامپوننت‌ها

خصوصیات سفارشی برای ایجاد کامپوننت‌های UI قابل استفاده مجدد و قابل پیکربندی بسیار ارزشمند هستند. با تعریف خصوصیات سفارشی برای جنبه‌های مختلف ظاهر یک کامپوننت، می‌توانید به راحتی استایل آن را بدون تغییر CSS اصلی کامپوننت سفارشی کنید.

مثال: کامپوننت دکمه

در اینجا مثالی از نحوه ایجاد یک کامپوننت دکمه قابل پیکربندی با استفاده از خصوصیات سفارشی CSS آورده شده است:


.button {
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-padding: 10px 20px;
  --button-border-radius: 5px;

  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
}

.button:hover {
  --button-bg-color: #0056b3;
}

.button.primary {
  --button-bg-color: #28a745;
}

در این مثال، ما خصوصیات سفارشی برای رنگ پس‌زمینه، رنگ متن، پدینگ و شعاع حاشیه دکمه تعریف می‌کنیم. این خصوصیات می‌توانند برای سفارشی‌سازی ظاهر دکمه بازنویسی شوند. به عنوان مثال، کلاس .button.primary خاصیت --button-bg-color را برای ایجاد یک دکمه اصلی با رنگ پس‌زمینه متفاوت بازنویسی می‌کند.

این رویکرد به شما امکان می‌دهد کتابخانه‌ای از کامپوننت‌های UI قابل استفاده مجدد ایجاد کنید که می‌توانند به راحتی برای مطابقت با طراحی کلی وب‌سایت یا برنامه شما سفارشی شوند.

۵. ادغام پیشرفته با CSS-in-JS

در حالی که خصوصیات سفارشی CSS بومی CSS هستند، می‌توانند به طور یکپارچه با کتابخانه‌های CSS-in-JS مانند Styled Components یا Emotion ادغام شوند. این به شما امکان می‌دهد از جاوا اسکریپت برای تولید پویای مقادیر خصوصیات سفارشی بر اساس وضعیت برنامه یا ترجیحات کاربر استفاده کنید.

مثال: تم پویا در ری‌اکت با Styled Components


import styled from 'styled-components';

const theme = {
  light: {
    backgroundColor: '#ffffff',
    textColor: '#000000',
  },
  dark: {
    backgroundColor: '#333333',
    textColor: '#ffffff',
  },
};

const Button = styled.button`
  background-color: ${props => props.theme.backgroundColor};
  color: ${props => props.theme.textColor};
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

function App() {
  const [currentTheme, setCurrentTheme] = React.useState('light');

  const toggleTheme = () => {
    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      <Button theme={theme[currentTheme]}>مرا کلیک کن</Button>
      <button onClick={toggleTheme}>تغییر تم</button>
    </div>
  );
}

export default App;

در این مثال، ما یک شی theme تعریف می‌کنیم که شامل پیکربندی‌های مختلف تم است. کامپوننت Button از Styled Components برای دسترسی به مقادیر تم و اعمال آنها به استایل‌های دکمه استفاده می‌کند. تابع toggleTheme تم فعلی را به‌روز می‌کند و باعث می‌شود ظاهر دکمه بر اساس آن تغییر کند.

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

۶. کنترل انیمیشن با خصوصیات سفارشی CSS

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

مثال: مدت زمان انیمیشن پویا


:root {
  --animation-duration: 1s;
}

.element {
  animation: fadeIn var(--animation-duration) ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

در این مثال، خصوصیت سفارشی --animation-duration مدت زمان انیمیشن fadeIn را کنترل می‌کند. شما می‌توانید به راحتی مدت زمان انیمیشن را با به‌روزرسانی مقدار خصوصیت سفارشی تغییر دهید و انیمیشن به طور خودکار مطابق با آن تنظیم می‌شود.

مثال: انیمیشن‌های پلکانی (Staggered)

برای کنترل پیشرفته‌تر انیمیشن، استفاده از خصوصیات سفارشی با `animation-delay` را برای ایجاد انیمیشن‌های پلکانی در نظر بگیرید، که اغلب در سکانس‌های بارگذاری یا تجربیات آشناسازی دیده می‌شود.


.staggered-item:nth-child(1) {
  animation-delay: calc(var(--stagger-delay) * 0);
}

.staggered-item:nth-child(2) {
  animation-delay: calc(var(--stagger-delay) * 1);
}

.staggered-item:nth-child(3) {
  animation-delay: calc(var(--stagger-delay) * 2);
}

در اینجا، `--stagger-delay` اختلاف زمانی بین شروع انیمیشن هر آیتم را تعیین می‌کند و یک اثر آبشاری ایجاد می‌کند.

۷. اشکال‌زدایی با خصوصیات سفارشی

خصوصیات سفارشی همچنین می‌توانند در اشکال‌زدایی کمک کنند. تخصیص یک خصوصیت سفارشی و تغییر مقدار آن یک نشانه بصری واضح ارائه می‌دهد. به عنوان مثال، تغییر موقت یک خاصیت رنگ پس‌زمینه می‌تواند به سرعت ناحیه تحت تأثیر یک قانون استایل خاص را برجسته کند.

مثال: برجسته کردن مشکلات طرح‌بندی


.problematic-area {
   --debug-color: red; /* این را به طور موقت اضافه کنید */
   background-color: var(--debug-color, transparent); /* در صورتی که --debug-color تعریف نشده باشد، به transparent بازگشت می‌کند */
}

سینتکس `var(--debug-color, transparent)` یک مقدار جایگزین (fallback) ارائه می‌دهد. اگر `--debug-color` تعریف شده باشد، از آن استفاده خواهد شد؛ در غیر این صورت، `transparent` اعمال خواهد شد. این از خطاها در صورت حذف تصادفی خصوصیت سفارشی جلوگیری می‌کند.

بهترین شیوه‌ها برای استفاده از خصوصیات سفارشی CSS

برای اطمینان از اینکه از خصوصیات سفارشی CSS به طور موثر استفاده می‌کنید، بهترین شیوه‌های زیر را در نظر بگیرید:

ملاحظات عملکرد

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

برای بهینه‌سازی عملکرد، موارد زیر را در نظر بگیرید:

مقایسه با پیش‌پردازنده‌های CSS

خصوصیات سفارشی CSS اغلب با متغیرها در پیش‌پردازنده‌های CSS مانند Sass یا Less مقایسه می‌شوند. در حالی که هر دو عملکرد مشابهی ارائه می‌دهند، تفاوت‌های کلیدی وجود دارد:

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

نتیجه‌گیری

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

این راهنما یک مرور جامع از استفاده پیشرفته از خصوصیات سفارشی CSS ارائه داده است. با این تکنیک‌ها آزمایش کنید، مستندات بیشتری را کاوش کنید و آنها را با پروژه‌های خود تطبیق دهید. کدنویسی خوبی داشته باشید!