Polymer ফ্রেমওয়ার্কে Custom Styles এবং Global CSS Rules এর মাধ্যমে আপনি কাস্টম উপাদান এবং ওয়েব অ্যাপ্লিকেশনগুলির স্টাইলিং নিয়ন্ত্রণ করতে পারেন। Polymer-এর মূল বৈশিষ্ট্য হল Shadow DOM, যা উপাদানের অভ্যন্তরীণ স্টাইল এবং উপাদানটির বাইরের স্টাইলকে আলাদা করে, ফলে আপনি একটি ক্লিন এবং নিরাপদ স্টাইলিং পরিবেশ তৈরি করতে পারেন।
এখানে Custom Styles এবং Global CSS Rules সম্পর্কে বিস্তারিত আলোচনা করা হলো:
১. Custom Styles in Polymer (কাস্টম স্টাইলস)
Polymer এ Custom Styles মূলত Shadow DOM এর মধ্যে সংজ্ঞায়িত হয়। Shadow DOM একটি পদ্ধতি যা আপনার কাস্টম উপাদানগুলির অভ্যন্তরীণ স্টাইল এবং HTML কোডকে বাইরের ডকুমেন্টের থেকে আলাদা রাখে। এর মাধ্যমে আপনার কাস্টম উপাদানগুলি স্টাইলিং এর দিক থেকে বাইরের প্রভাব থেকে মুক্ত থাকে এবং আপনি নিজের পছন্দমতো স্টাইল প্রয়োগ করতে পারেন।
Custom Styles এর ব্যবহার:
Polymer-এ আপনি <style> ট্যাগ ব্যবহার করে কাস্টম স্টাইলস যোগ করতে পারেন, যা Shadow DOM এর মধ্যে কার্যকরী হবে। এখানে একটি উদাহরণ দেওয়া হলো:
<dom-module id="my-element">
<template>
<style>
/* Shadow DOM এর স্টাইল */
:host {
display: block;
background-color: lightblue;
padding: 10px;
border-radius: 5px;
}
h1 {
color: darkblue;
font-size: 24px;
}
</style>
<h1>Hello, Polymer!</h1>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-module>
এখানে:
:hostসিলেক্টরটি কাস্টম উপাদানের মূল উপাদানকে স্টাইল করে।h1ট্যাগের স্টাইল Shadow DOM এর ভিতরে প্রযোজ্য, এবং বাইরের HTML পেজের উপর এর কোনো প্রভাব পড়বে না।
::part এবং ::theme সিলেক্টর:
Polymer 3.x এবং তার পরবর্তী সংস্করণে, আপনি ::part এবং ::theme সিলেক্টর ব্যবহার করতে পারেন কাস্টম উপাদানের মধ্যে স্টাইল শেয়ার করার জন্য। এই সিলেক্টরগুলি Shadow DOM এর ভিতরে কাস্টম স্টাইল এডিট করতে সহায়তা করে।
<dom-module id="my-button">
<template>
<style>
:host {
display: inline-block;
padding: 10px 20px;
background-color: var(--button-bg-color, blue); /* Default color */
}
::part(button) {
font-size: 16px;
border-radius: 4px;
}
</style>
<button part="button">Click Me</button>
</template>
<script>
Polymer({
is: 'my-button'
});
</script>
</dom-module>
এখানে ::part(button) দ্বারা button এলিমেন্টের স্টাইল নির্ধারণ করা হয়েছে।
২. Global CSS Rules (গ্লোবাল CSS রুলস)
Global CSS Rules হল এমন স্টাইল যা সম্পূর্ণ পেজ বা অ্যাপ্লিকেশনের উপর প্রযোজ্য। Polymer-এ Shadow DOM ব্যবহারের ফলে, আপনার কাস্টম উপাদানগুলি বাইরের CSS এর প্রভাব থেকে বিচ্ছিন্ন থাকে। তবে, কিছু ক্ষেত্রে আপনি চাইলে গ্লোবাল CSS রুলস প্রয়োগ করতে পারেন যাতে সেগুলি পুরো ওয়েব পেজের মধ্যে প্রযোজ্য হয়।
Global CSS Rules এর ব্যবহার:
Polymer এ গ্লোবাল CSS রুলস সেট করতে সাধারণ CSS ফাইল ব্যবহার করা হয়। এটি আপনার পেজের বাইরের উপাদানগুলির জন্য প্রযোজ্য হয়। উদাহরণস্বরূপ:
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: darkgreen;
}
</style>
<my-element></my-element>
এখানে, body এবং h1 স্টাইলগুলি সারা পেজে প্রযোজ্য হবে, তবে Polymer কাস্টম উপাদানগুলির স্টাইল Shadow DOM এর মাধ্যমে আলাদা থাকবে।
৩. Global Styles with <link>
যদি আপনি গ্লোবাল স্টাইলগুলি আলাদা CSS ফাইলের মাধ্যমে প্রয়োগ করতে চান, তবে Polymer এ সাধারণ <link> ট্যাগের মাধ্যমে সেই স্টাইল ফাইলটি অন্তর্ভুক্ত করতে পারেন। উদাহরণস্বরূপ:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<my-element></my-element>
এখানে, styles.css ফাইলটি পুরো ওয়েব পেজে প্রযোজ্য হবে, তবে এটি Shadow DOM এর মধ্যে কাস্টম উপাদানের স্টাইলের উপর প্রভাব ফেলবে না।
৪. Light DOM vs Shadow DOM
Polymer-এ দুটি মূল DOM থাকে:
- Light DOM: এটি হলো মূল DOM যেখানে আপনার কাস্টম উপাদান ব্যবহার করা হয়।
- Shadow DOM: এটি হলো কাস্টম উপাদানগুলির অভ্যন্তরীণ DOM, যেখানে আপনি কাস্টম স্টাইলস এবং HTML কোড প্রয়োগ করতে পারেন।
Polymer এ আপনি ::slotted সিলেক্টর ব্যবহার করে Light DOM এর উপাদানগুলোর স্টাইল নিয়ন্ত্রণ করতে পারেন:
<dom-module id="my-card">
<template>
<style>
::slotted(h2) {
color: red;
}
</style>
<slot></slot>
</template>
<script>
Polymer({
is: 'my-card'
});
</script>
</dom-module>
<my-card>
<h2>This heading will be red</h2>
</my-card>
এখানে, ::slotted(h2) সিলেক্টর ব্যবহার করে আপনি Light DOM এর <h2> উপাদানের স্টাইল পরিবর্তন করেছেন।
Polymer ফ্রেমওয়ার্কে Custom Styles এবং Global CSS Rules এর মাধ্যমে আপনি কাস্টম উপাদানগুলির স্টাইল এবং বাইরের ওয়েব পেজের স্টাইল নিয়ন্ত্রণ করতে পারবেন। Shadow DOM এবং Light DOM এর ধারণা আপনার স্টাইলিংয়ের দক্ষতা বাড়ায় এবং আপনার কাস্টম উপাদানগুলিকে স্বতন্ত্রভাবে স্টাইল করার সুযোগ দেয়। Polymer আপনাকে Shadow DOM এর মাধ্যমে উপাদানগুলির অভ্যন্তরীণ স্টাইল এবং বাইরের স্টাইলের মধ্যে একটি শক্তিশালী পার্থক্য তৈরি করতে সাহায্য করে, যা একটি পরিষ্কার এবং রক্ষণাবেক্ষণের জন্য সুবিধাজনক পদ্ধতি।
Read more
