جلسه هشتم:مشخصات سفارشی(Custom properties)
در سال 2015 ویژگی های جدیدCSS که مدت ها در انتظار آن بودند منتشر شد.این ویژگی ها مفهوم متغیر رابه زبان وارد می کرد که سطح جدیدی از از استایل ها را به وجود آورد. هم چنین با استفاده از این ویژگی ها تکرار در استایل ها بسیار کاهش پیدا می کند. در هنگام تهیه این مقاله تمامی مرورگرهای جدید از این ویژگی های جدید پشتیبانی می کنند به جر IE
توجه! اگر به صورت تصادفی از پیش پردازنده که متغیرهای خود را پشتیبانی می کند استفاده کرده اید مثل SASS یا LESS ممکن است وسوسه شوید که متغیرهای CSS را نادیده بگیرید اما بهتر است بدانید متغیرهای جدید CSS از نظر ماهیت بسیار متفاوت و فراتر از هر پیش پردازنده دیگری عمل کند.
:root {
--main-font: Helvetica, Arial, sans-serif;
}برای تعریف یک ویژگی سفارشی شما آن را مانند سایر ویژگی های CSS اعلام می کنید در قطعه کد بالا نموه ای از این را مشاهده می کنید.
این لیست متغیری به نام main-font را تعریف می کند و مقدار آن را بر روی مجموعه ای از قلم های مشترک تنظیم می کند.نام باید با دو خط تیره شروع شود تا از خصوصیات CSS متمایز شود و به دنبال آن هر نامی که میخواهید می توانید استفاده کنید.
متغیرها باید داخل یک بلوک اعلان شوند . در اینجا از انتخابگر root استفاده شده است که متغیر را برای کل صفحه تنظیم میکند.تا زمانی که این متغیرها جایی استفاده نشوند به خودی خود این نوع اعلام متغیر هیچ کاری انجام نمیدهند.
تابعی به نام VAR() اجازه استفاده از متغیرها را می دهد. این عملکرد برای ارجاع به متغیر –main-font که فقط تعریف شده است استفاده خواهید کرد. مجموعه قوانینی که در قطعه کد زیر نشان داده شده است به کدهای خود اضافه کنید تا متغیر استفاده شود.
:root {
--main-font: Helvetica, Arial, sans-serif;
}
p {
font-family: var(--main-font);
}خصوصیات سفارشی به شما این امکان را میدهد که یک مقدار را به عنوان مقدار واحد تعیین کنید و از آن مقدار در طول برنامه خود استفاده کنید. این روش برای مقادیر تکراری مانند رنگ ها بسیار سودمنمد است.قطعه کد زیر یک ویژگی سفارشی را اضافه می کند که می توانید بارها از ان در طول برنامه استفاده کنید اما اگر میخواهید آن را تغییر دهید فقط باید آن را در یک مکان ویرایش کنید.
:root {
--main-font: Helvetica, Arial, sans-serif;
--brand-color: #369;
}در این کد مقادیر بازگشتی را در دو قسمت مشخص می کند.در حالت اول main-font تعریف می شود. در مرحله دوم secondary-color یک متغیر تعریف نشده است پس از مقدار آبی برای آن استفاده خواهد شد.
توجه داشته باشید که اگر یک تابع var مقدار غیرمعتبری را ارزیابی کند ویژگی روی مقدار اولیه خود تنظیم خواهد شد. به عنوان مثال اگر متغیر موجود در padding:var(band) به یک رنگ ارزیابی شود این مقدار نامعتبر بوده و در این هنگام روی 0 تنظیم خواهد شد.
تغییر خصوصیت های سفارشی به صورت پویا
در مثال های بالا خصوصیت های سفارشی به صورت یک امکان مفید بود که از تکرار در کدهای شما می کاهند استفاده شده بود اما آن چه که جالب توجه است این است که اعلان ها می توانند شامل قوانین cascade و وراثت شوند.
شما می توانید یک متغیر را داخل چندین انتخابگر استفاده کنید و این متغیر در هر کدام مقدار متفاوتی داشته باشد.
به عنوان مثال می توانید یک متغیر را سیاه تعریف کنید و سپس آن را مجددا به رنگ سفید و داخل یک container دیگر تعریف کنید.در این حالت متغیر خارج از container به رنگ سیاه و متغیر داخل آن سفید خواهد بود.کد زیر را بررسی کنید:
<body>
<div class="panel">
<h2>Single-origin</h2>
<div class="body">
We have built partnerships with
small farms around the world to
hand-select beans at the peak of season.
We then carefully roast in small
batches to maximize their potential.
</div>
</div>
<aside class="dark">
<div class="panel">
<h2>Single-origin</h2>
<div class="body">
We have built partnerships
with small farms around the
world to hand-select beans
at the peak of season.
We then carefully roast
in small batches to
maximize their potential.
</div>
</div>
</aside>
</body> :root {
font-size: calc(0.5em + 1vw);
--main-bg: #fff;
--main-color: #000;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
.panel {
font-size: 1rem;
padding: 1em;
border: 1px solid #999;
border-radius: 0.5em;
background-color: var(--main-bg);
color: var(--main-color);
}
.panel > h2 {
margin-top: 0;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}در اینجا شما مجددا متغیرهای خود را با انتخابگر :root تعریف کرده اید.شما اکنون دو صفحه دارد اما هنوز هم به همان شکل هستند اکنون باید متغیرها را دوباره تعریف کنیم اما اینبار با انتخابگر دیگری.
.dark {
margin-top: 2em;
padding: 1em;
background-color: #999;
--main-bg: #333;
--main-color: #fff;
}اگر صفحه را دوباره اجرا کنید صفحه دوم هم پس زمینه سیاه و متن سفید خواهد داشت. دلیل این اتفاق این است که زمانی که panel از این متغیرها استفاده می کند، چراکه آن ها برای continer تیره تعریف شده است.
توجه داشته باشید که شما هیچ تغییری در استایل ندارید و یا هیچ کلاس جدیدی اضافه نشده است.
در این مثال شما ویژگی ها را دوبار تعریف کرده اید: ابتدا روی root و سپس روی container تیره. با این ویژگی های موجود در scope رفتار خواهد شد چراکه مقادیر توسط فرزندان ارث برده می شود.
تغییر خصوصیات سفارشی با جاوا اسکریپت:
با استفاده از جاوا اسکریپت می توان به طور مستقیم در مرورگر به خصوصیات سفارشی دسترسی شداته . آن ها را دستکاری کرد. ازآنجایی که این مقالات در مورد جاوا اسکریپت نیست فقط اشاره کوتاهی به این مبحث می شود.در قطعه کد زیر نحوه دستیابی به پروپرتی عنصر را مشاهده می کنید.
<script type="text/javascript">
let rootElement = document.documentElement;
let styles = getComputedStyle(rootElement);
let mainColor = styles.getPropertyValue('--main-bg');
console.log(String(mainColor).trim());
rootElement = document.documentElement;
rootElement.style.setProperty('--main-bg', '#cdf');
</script>از آنجایی که می توانید مقادیر جدیدی را به صورت متغیر برای خصوصیات سفارشی تعیین کنید می توانید از جاوا اسکریپت برای تعیین مقدار جدید به صورت پویا استفاده کنید. مثلا اگر بخواهید رنگ آبی را نسبت دهید قطعه کد زیر را باید اضافه کنید:
var rootElement = document.documentElement;
rootElement.style.setProperty('--main-bg', '#cdf');
اگر این اسکریپت را اجرا کنید هر عنصر ویژگی –main-bg را که به مقدار جدید خود بروز رسانی شده است را ارث خواهد برد.این تغییرات در صفحه شما در پنل اول به صورت تغییر رنگ پس زمینه به آبی کمرنگ دیده می شود.در پانل دوم تغییری به وجود نمی آید چرا که هنوز پروپرتی ها از container تیره ارث برده میشود.
با استفاده از این تکنیک می توانید از جاوا اسکریپت برای تغییر رنگ زمینه خود به صورت پویا در مرورگر استفاده کنید یا میتوانید قسمت خاصی را برجسته کنید و یا هر تغییر مشابهی را ایجاد کنید.
فقط با به کار بردن چند خط جاوا اسکریپت می توانید تغییراتی ایجاد کنید که وی تعداد زیادی از المان های صفحه تاثیر بگذارد.
خصوصیات سفارشی یا custum property بخش جدیدی از CSS است که توسعه دهندگان به تازگی آن را اضافه کرده اند. از آن جایی که پشتیبانی مرورگر با محدودیت هایی روبرو است فعلا زمان مناسبی برای استفاده از این قابلیت نرسیده است. قطعا با گذشت زمان کاربرد و استفاده مفید از این ویژگی بیشتر خواهد شد.خصوصیات سفارشی را امتحان کنید و بررسی کنید که چه امکاناتی را در اختیار شما قرار می گیرد.
توجه داشته باشید که هر declaration که با استفاده از var() نوشته شده باشد توسط مرورگرهای با ورژن قدیمی نادیده گرفته خواهد شد.چراکه متوجه نمیشوند این چه کاربردی دارد. در صورت امکان برای این مرورگرها رفتار جایگزین در نظر بگیرید.
Color: black;
Color:var(–main-color);
در نتیجه استفاده از این امکان همواره ممکن نیست ولی میتواند گاهی ویژگی های پویا را برای ما فراهم کند.
این مبحث در اینجا به پایان میرسد.درپایان به چند نکته به صورت خلاصه از مقالات قبل اشاره می کنیم. در صورتی که هر کدام از این موارد برای شما قابل درک نبود می توانید به مقاله های قبل مراجعه کرده و توضیحات بیشتری را مطالعه کنید.
- استفاده از واحدهای نسبی را به عنوان یکی از اصول کار بپذیرید و به صفحات خود این امکان را بدهید که ویژگی های خود را با توجه به شرایط تغییر دهند.
- برای اندازه قلم استفاده از rem را درالویت قرار دهید اما برای اندازه دهی مقادیر ساده از em ها استفاده کنید.
- شما میتوانید صفحات خود را کاملا واکنشگرا بسازید بدون اینکه از media استفاده کنید.
- هنگام تعیین ارتفاع بین خطوط از مقادیر بدون واحد استفاده کنید.
در مقاله بعدی در مورد مبحث جدیدی صحبت خواهیم کرد که در آن یک طرح دوستونی را ایجاد خواهیم کرد.موضوع Mastering the box model می باشد که box model در CSS به باکسی گفته میشود که هر عنصر HTML در آن قرار میگیرد که شامل margin ها، border ها ، padding و محتوای خود عنصر است.در ادامه با ما همراه باشید.
دیدگاهتان را بنویسید