CSS ভেরিয়েবল - কেন আপনার যত্ন নেওয়া উচিত?

Rob Dodson

CSS ভেরিয়েবল, আরও সঠিকভাবে CSS কাস্টম বৈশিষ্ট্য হিসাবে পরিচিত, Chrome 49-এ অবতরণ করছে। তারা CSS-এ পুনরাবৃত্তি কমাতে এবং থিম স্যুইচিং এবং ভবিষ্যতের CSS বৈশিষ্ট্যগুলি সম্ভাব্যভাবে প্রসারিত/পলিফিলিং-এর মতো শক্তিশালী রানটাইম প্রভাবগুলির জন্য উপযোগী হতে পারে।

সিএসএস বিশৃঙ্খলা

একটি অ্যাপ্লিকেশন ডিজাইন করার সময় ব্র্যান্ডের রঙের একটি সেট আলাদা করে রাখা একটি সাধারণ অভ্যাস যা অ্যাপটির চেহারা সামঞ্জস্যপূর্ণ রাখতে পুনরায় ব্যবহার করা হবে। দুর্ভাগ্যবশত, আপনার CSS-এ এই রঙের মানগুলি বারবার পুনরাবৃত্তি করা শুধুমাত্র একটি কাজই নয়, ত্রুটির প্রবণতাও বটে। যদি, কোনও সময়ে, রঙগুলির মধ্যে একটি পরিবর্তন করার প্রয়োজন হয়, আপনি বাতাসের দিকে সতর্কতা অবলম্বন করতে পারেন এবং সমস্ত জিনিস "খুঁজে ও প্রতিস্থাপন" করতে পারেন, কিন্তু যথেষ্ট বড় প্রকল্পে এটি সহজেই বিপজ্জনক হতে পারে।

সাম্প্রতিক সময়ে অনেক ডেভেলপার SASS বা LESS এর মত CSS প্রিপ্রসেসরের দিকে ঝুঁকছে যা প্রিপ্রসেসর ভেরিয়েবল ব্যবহারের মাধ্যমে এই সমস্যার সমাধান করে। যদিও এই সরঞ্জামগুলি বিকাশকারীর উত্পাদনশীলতাকে ব্যাপকভাবে বাড়িয়েছে, তারা যে ভেরিয়েবলগুলি ব্যবহার করে তা একটি বড় ত্রুটির মধ্যে ভুগছে, যা হল সেগুলি স্থির এবং রানটাইমে পরিবর্তন করা যায় না। রানটাইমে ভেরিয়েবল পরিবর্তন করার ক্ষমতা যোগ করা কেবল গতিশীল অ্যাপ্লিকেশন থিমিংয়ের মতো জিনিসগুলির জন্য দরজা খুলে দেয় না, তবে প্রতিক্রিয়াশীল ডিজাইনের জন্য এবং ভবিষ্যতের সিএসএস বৈশিষ্ট্যগুলিকে পলিফিল করার সম্ভাবনার জন্য বড় প্রভাবও রয়েছে৷ Chrome 49 প্রকাশের সাথে, এই ক্ষমতাগুলি এখন CSS কাস্টম বৈশিষ্ট্যের আকারে উপলব্ধ।

সংক্ষেপে কাস্টম বৈশিষ্ট্য

কাস্টম বৈশিষ্ট্য আমাদের CSS টুলবক্সে দুটি নতুন বৈশিষ্ট্য যোগ করুন:

• একজন লেখকের দ্বারা নির্বাচিত নাম সহ একটি সম্পত্তিতে নির্বিচারে মান নির্ধারণ করার ক্ষমতা।
• var() ফাংশন, যা একজন লেখককে অন্যান্য বৈশিষ্ট্যে এই মানগুলি ব্যবহার করতে দেয়।

এখানে প্রদর্শনের জন্য একটি দ্রুত উদাহরণ

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

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

--main-color হল একজন লেখক সংজ্ঞায়িত কাস্টম সম্পত্তি যার মান #06c। মনে রাখবেন যে সমস্ত কাস্টম বৈশিষ্ট্য দুটি ড্যাশ দিয়ে শুরু হয়।

var() ফাংশনটি পুনরুদ্ধার করে এবং কাস্টম প্রপার্টির মান দিয়ে প্রতিস্থাপন করে, যার ফলে color: #06c; যতক্ষণ পর্যন্ত কাস্টম সম্পত্তি আপনার স্টাইলশীটে কোথাও সংজ্ঞায়িত করা হয় ততক্ষণ এটি var ফাংশনে উপলব্ধ হওয়া উচিত।

সিনট্যাক্স প্রথমে একটু অদ্ভুত লাগতে পারে। অনেক ডেভেলপার প্রশ্ন করেন, "কেন শুধু পরিবর্তনশীল নামের জন্য $foo ব্যবহার করবেন না?" পদ্ধতিটিকে বিশেষভাবে যতটা সম্ভব নমনীয় হতে এবং ভবিষ্যতে $foo ম্যাক্রোর জন্য সম্ভাব্য অনুমতি দেওয়ার জন্য বেছে নেওয়া হয়েছিল। ব্যাকস্টোরির জন্য আপনি এই পোস্টটি পড়তে পারেন স্পেক লেখক, ট্যাব অ্যাটকিনস থেকে।

কাস্টম সম্পত্তি সিনট্যাক্স

একটি কাস্টম সম্পত্তির জন্য সিনট্যাক্স সোজা।

--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;
    }
}

এটা বলা গুরুত্বপূর্ণ যে কোডের উপরের স্নিপেট আজকের সিএসএস প্রিপ্রসেসর ব্যবহার করে সম্ভব নয় যা মিডিয়া কোয়েরির ভিতরে ভেরিয়েবল সংজ্ঞায়িত করতে অক্ষম। এই ক্ষমতা থাকার সম্ভাবনা অনেক আনলক!

কাস্টম বৈশিষ্ট্যগুলি থাকাও সম্ভব যা অন্যান্য কাস্টম বৈশিষ্ট্য থেকে তাদের মান অর্জন করে। এটি থিমিংয়ের জন্য অত্যন্ত দরকারী হতে পারে:

: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" এর একটি ফলব্যাক সংজ্ঞায়িত করে। মনে রাখবেন যে শর্টহ্যান্ড মানগুলি, যেমন মার্জিন এবং প্যাডিংয়ের জন্য ব্যবহৃত হয়, কমা দ্বারা পৃথক করা হয় না, তাই প্যাডিংয়ের জন্য একটি উপযুক্ত ফলব্যাক এইরকম দেখাবে।

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 */
}

এই কৌশলটি বিশেষভাবে থিমিং ওয়েব উপাদানগুলির জন্য উপযোগী যেগুলি ছায়া 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 */
}

জাভাস্ক্রিপ্টে কাস্টম বৈশিষ্ট্যের সাথে কাজ করা

রানটাইমে কাস্টম প্রপার্টির মান পেতে, কম্পিউটেড CSSStyleDeclaration অবজেক্টের getPropertyValue() পদ্ধতি ব্যবহার করুন।

/* 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'

একইভাবে, রানটাইমে কাস্টম প্রপার্টির মান সেট করতে, CSSStyleDeclaration অবজেক্টের setProperty() পদ্ধতি ব্যবহার করুন।

/* 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');

আপনি setProperty() এ আপনার কলে var() ফাংশন ব্যবহার করে রানটাইমে অন্য কাস্টম প্রপার্টি উল্লেখ করার জন্য কাস্টম প্রপার্টির মান সেট করতে পারেন।

/* 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 কাস্টম বৈশিষ্ট্য সমর্থন করে।

ডেমো

আপনি এখন কাস্টম বৈশিষ্ট্যগুলির জন্য ধন্যবাদ লাভ করতে পারেন এমন সমস্ত আকর্ষণীয় কৌশলগুলির এক ঝলক দেখার জন্য নমুনাটি ব্যবহার করে দেখুন।

আরও পড়া

আপনি যদি কাস্টম প্রপার্টি সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে Google Analytics টিমের ফিলিপ ওয়ালটন কেন কাস্টম বৈশিষ্ট্যের জন্য উত্তেজিত তা নিয়ে একটি প্রাইমার লিখেছেন এবং আপনি chromestatus.com- এ অন্যান্য ব্রাউজারে তাদের অগ্রগতির উপর ট্যাব রাখতে পারেন।