متغیرهای CSS - چرا باید اهمیت دهید؟

Rob Dodson

متغیرهای CSS، که به‌طور دقیق‌تر به‌عنوان ویژگی‌های سفارشی CSS شناخته می‌شوند، در Chrome 49 فرود می‌آیند. آنها می‌توانند برای کاهش تکرار در CSS، و همچنین برای جلوه‌های قدرتمند زمان اجرا مانند تغییر موضوع و بالقوه گسترش/پرکردن چندگانه ویژگی‌های آینده CSS مفید باشند.

درهم ریختگی CSS

هنگام طراحی یک برنامه کاربردی، کنار گذاشتن مجموعه‌ای از رنگ‌های برند که برای ثابت نگه داشتن ظاهر برنامه مورد استفاده مجدد قرار می‌گیرند، معمول است. متأسفانه، تکرار این مقادیر رنگی بارها و بارها در CSS شما نه تنها یک کار طاقت فرسا است، بلکه مستعد خطا نیز است. اگر در نقطه‌ای، یکی از رنگ‌ها نیاز به تغییر داشته باشد، می‌توانید احتیاط کنید و همه چیز را «پیدا و جایگزین کنید»، اما در یک پروژه به اندازه کافی بزرگ، این می‌تواند به راحتی خطرناک شود.

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

خواص سفارشی به طور خلاصه

ویژگی های سفارشی دو ویژگی جدید به جعبه ابزار CSS ما اضافه می کند:

• توانایی نویسنده برای اختصاص مقادیر دلخواه به یک ویژگی با نام انتخاب شده توسط نویسنده.
• تابع var() که به نویسنده اجازه می دهد از این مقادیر در خصوصیات دیگر استفاده کند.

در اینجا یک مثال سریع برای نشان دادن وجود دارد

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color یک ویژگی سفارشی تعریف شده توسط نویسنده با مقدار #06c است. توجه داشته باشید که تمام ویژگی های سفارشی با دو خط تیره شروع می شوند.

تابع var() بازیابی می کند و با مقدار خاصیت سفارشی جایگزین می شود و در نتیجه color: #06c; تا زمانی که ویژگی سفارشی در جایی در شیوه نامه شما تعریف شده باشد، باید برای تابع var در دسترس باشد.

نحو ممکن است در ابتدا کمی عجیب به نظر برسد. بسیاری از توسعه دهندگان می پرسند، "چرا فقط از $foo برای نام متغیرها استفاده نمی کنیم؟" این رویکرد به طور خاص به گونه ای انتخاب شد که تا حد امکان انعطاف پذیر باشد و به طور بالقوه امکان ماکروهای $foo را در آینده فراهم کند. برای پیشینه، می توانید این پست را از یکی از نویسندگان مشخصات، Tab Atkins بخوانید.

نحو سفارشی اموال

نحو برای یک ویژگی سفارشی ساده است.

--header-color: #06c;

توجه داشته باشید که ویژگی های سفارشی به حروف کوچک و بزرگ حساس هستند، بنابراین --header-color و --Header-Color ویژگی های سفارشی متفاوتی هستند. در حالی که ممکن است در ارزش اسمی ساده به نظر برسند، نحو مجاز برای خصوصیات سفارشی در واقع کاملاً مجاز است. به عنوان مثال، موارد زیر یک ویژگی سفارشی معتبر است:

--foo: if(x > 5) this.width = 10;

در حالی که این به عنوان یک متغیر مفید نخواهد بود، زیرا در هر ویژگی معمولی نامعتبر است، به طور بالقوه می توان آن را با جاوا اسکریپت در زمان اجرا خواند و عمل کرد. این بدان معناست که ویژگی های سفارشی پتانسیل باز کردن انواع تکنیک های جالب را دارند که در حال حاضر با پیش پردازنده های CSS امروزی امکان پذیر نیستند. بنابراین اگر به این فکر می کنید که " خمیازه بکش من SASS دارم پس چه کسی اهمیت می دهد..." پس دوباره نگاهی بیندازید! اینها متغیرهایی نیستند که شما به کار با آنها عادت دارید.

آبشار

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

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

این بدان معنی است که می توانید از ویژگی های سفارشی در داخل کوئری های رسانه برای کمک به طراحی پاسخگو استفاده کنید. یک مورد استفاده ممکن است این باشد که با افزایش اندازه صفحه، حاشیه را در اطراف عناصر بخش اصلی خود گسترش دهید:

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

یادآوری این نکته مهم است که قطعه کد بالا با استفاده از پیش پردازنده های CSS امروزی که قادر به تعریف متغیرها در داخل کوئری های رسانه نیستند امکان پذیر نیست. داشتن این توانایی پتانسیل های زیادی را باز می کند!

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

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

تابع var().

برای بازیابی و استفاده از مقدار یک ویژگی سفارشی، باید از تابع var() استفاده کنید. سینتکس تابع var() به شکل زیر است:

var(<custom-property-name> [, <declaration-value> ]? )

جایی که <custom-property-name> نام یک ویژگی سفارشی تعریف شده توسط نویسنده است، مانند --foo ، و <declaration-value> یک مقدار بازگشتی است که زمانی که ویژگی سفارشی ارجاع شده نامعتبر است استفاده می شود. مقادیر بازگشتی می توانند یک لیست جدا شده با کاما باشند که در یک مقدار واحد ترکیب می شوند. به عنوان مثال var(--font-stack, "Roboto", "Helvetica"); بازگشتی از "Roboto", "Helvetica" را تعریف می کند. به خاطر داشته باشید که مقادیر کوتاه‌نویسی، مانند مقادیری که برای حاشیه و padding استفاده می‌شوند، با کاما از هم جدا نمی‌شوند، بنابراین یک بازگشت مناسب برای padding به این صورت خواهد بود.

p {
    padding: var(--pad, 10px 15px 20px);
}

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

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

این تکنیک به ویژه برای قالب بندی کامپوننت های وب که از Shadow DOM استفاده می کنند مفید است، زیرا ویژگی های سفارشی می توانند از مرزهای سایه عبور کنند. نویسنده کامپوننت وب می‌تواند یک طرح اولیه با استفاده از مقادیر بازگشتی ایجاد کند و «قلاب‌های» مضمون را در قالب ویژگی‌های سفارشی نمایش دهد.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

هنگام استفاده از var() باید مراقب آنها باشید. متغیرها نمی توانند نام ویژگی باشند. به عنوان مثال:

.foo {
    --side: margin-top;
    var(--side): 20px;
}

اما این معادل تنظیم margin-top: 20px; . در عوض، اعلامیه دوم نامعتبر است و به عنوان یک اشتباه خارج می شود.

به طور مشابه، شما نمی توانید (ساده لوحانه) مقداری بسازید که بخشی از آن توسط یک متغیر ارائه شده باشد:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

باز هم، این معادل تنظیم margin-top: 20px; . برای ایجاد یک مقدار، به چیز دیگری نیاز دارید: تابع calc() .

ساخت مقادیر با calc()

اگر قبلاً با آن کار نکرده اید، تابع calc() ابزار کوچکی است که به شما امکان می دهد محاسبات را برای تعیین مقادیر CSS انجام دهید. در همه مرورگرهای مدرن پشتیبانی می‌شود و می‌توان آن را با ویژگی‌های سفارشی ترکیب کرد تا مقادیر جدیدی ایجاد کند. به عنوان مثال:

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

کار با خواص سفارشی در جاوا اسکریپت

برای بدست آوردن مقدار یک ویژگی سفارشی در زمان اجرا، از متد getPropertyValue() شی CSSStyleDeclaration محاسبه شده استفاده کنید.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

به طور مشابه، برای تنظیم مقدار ویژگی سفارشی در زمان اجرا، از متد setProperty() شی CSSStyleDeclaration استفاده کنید.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

همچنین می توانید با استفاده از تابع var() در فراخوانی خود به setProperty() مقدار خاصیت سفارشی را برای ارجاع به ویژگی سفارشی دیگر در زمان اجرا تنظیم کنید.

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

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

پشتیبانی از مرورگر

در حال حاضر Chrome 49، Firefox 42، Safari 9.1 و iOS Safari 9.3 از ویژگی های سفارشی پشتیبانی می کنند.

نسخه ی نمایشی

نمونه را امتحان کنید تا نگاهی اجمالی به تمام تکنیک های جالبی داشته باشید که اکنون می توانید به لطف ویژگی های سفارشی از آنها استفاده کنید.

در ادامه مطلب

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