Chromium সম্প্রতি HTML5 থেকে একটি নতুন বৈশিষ্ট্য প্রয়োগ করেছে: স্কোপড স্টাইলশীট, ওরফে৷ <style scoped> । একজন ওয়েব লেখক একটি <style> উপাদানে 'স্কোপড' অ্যাট্রিবিউট সেট করে শুধুমাত্র একটি পৃষ্ঠার একটি অংশে প্রযোজ্য শৈলী নিয়ম সীমিত করতে পারেন যা আপনি যে সাবট্রিতে স্টাইলগুলি প্রয়োগ করতে চান তার মূল উপাদানটির সরাসরি সন্তান। এটি স্টাইলগুলিকে শুধুমাত্র সেই উপাদানটিকে প্রভাবিত করতে সীমিত করে যা <style> উপাদানের মূল এবং তার সমস্ত বংশধর।
উদাহরণ
এখানে একটি সাধারণ নথি যা স্ট্যান্ডার্ড স্টাইলিং ব্যবহার করে:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
উল্লেখিত শৈলীর নিয়মগুলি যেকোন <div> লাল এবং যেকোনো <span> সবুজের মধ্যে পাঠ্যকে রঙ করবে:
একটি div! একটি স্প্যান!
একটি div! একটি স্প্যান!
একটি div! একটি স্প্যান!
যাইহোক, যদি আমরা <style> উপাদানে scoped সেট করি:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
তারপর এটি শৈলীর নিয়মগুলিকে সীমাবদ্ধ করে যাতে সেগুলি <div> জুড়ে প্রয়োগ করা হয় যেটি <style scoped> উপাদানের মূল এবং শুধুমাত্র সেই <div> ভিতরের কিছু। আমরা এটিকে 'স্কোপড' বলি এবং ফলাফলটি এরকম দেখাচ্ছে:
একটি div! একটি স্প্যান!
একটি div! একটি স্প্যান!
একটি div! একটি স্প্যান!
এটি অবশ্যই মার্কআপের যে কোনও জায়গায় করা যেতে পারে। সুতরাং আপনি যদি দুঃসাহসিক হন, আপনি মার্কআপের অন্যান্য স্কোপড অংশের মধ্যে স্কপযুক্ত শৈলীগুলিকে নেস্ট করতে পারেন যতটা আপনি শৈলীগুলি প্রয়োগ করা হবে তার উপর সূক্ষ্ম নিয়ন্ত্রণ পেতে চান।
কেস ব্যবহার করুন
এখন এটা কি জন্য ভাল?
একটি সাধারণ ব্যবহারের ক্ষেত্রে হল সিন্ডিকেট করা বিষয়বস্তু: যখন আপনি একজন ওয়েব লেখক হিসাবে তৃতীয় পক্ষের সামগ্রী অন্তর্ভুক্ত করতে চান, এর সমস্ত শৈলী সহ, কিন্তু সেই শৈলীগুলিকে পৃষ্ঠার অন্যান্য, সম্পর্কহীন অংশগুলি "দূষণ" করার ঝুঁকি নিতে চান না। এখানে একটি বড় সুবিধা হল yelp, twitter, ebay, ইত্যাদির মতো অন্যান্য সাইটগুলি থেকে একটি <iframe> ব্যবহার করে বা বাইরের বিষয়বস্তু সম্পাদনা করার মাধ্যমে সেগুলিকে আলাদা করার প্রয়োজন ছাড়াই একটি একক পৃষ্ঠায় একত্রিত করার ক্ষমতা।
আপনি যদি একটি কন্টেন্ট ম্যানেজমেন্ট সিস্টেম (CMS) ব্যবহার করেন যা আপনাকে মার্কআপের স্নিপেটগুলি পাঠায় যা সবগুলিকে একত্রে একটি চূড়ান্ত পৃষ্ঠা প্রদর্শনে ম্যাশ করা হয় তবে এটি একটি দুর্দান্ত বৈশিষ্ট্য যাতে নিশ্চিত করা যায় যে প্রতিটি স্নিপেট পৃষ্ঠার অন্য যেকোনো কিছু থেকে বিচ্ছিন্নভাবে স্টাইল করা হয়েছে। এটি একটি উইকির জন্যও তেমনই কার্যকর হতে পারে।
আপনি যখন একটি পৃষ্ঠায় কিছু চমৎকার ডেমো কোড লিখতে চান, তখন শৈলীগুলিকে শুধুমাত্র ডেমো সামগ্রীতে সীমাবদ্ধ করা সহজ। এটি আপনাকে ডেমোতে CSS এর সাথে বন্য হতে দেয়, তবুও পৃষ্ঠার অন্য কিছুই প্রভাবিত হবে না।
আরেকটি ব্যবহারের ক্ষেত্রে হল সহজভাবে এনক্যাপসুলেশন: উদাহরণস্বরূপ, যদি আপনার ওয়েব পৃষ্ঠায় একটি সাইড মেনু থাকে, তাহলে মার্কআপের সেই অংশে একটি <style scoped> বিভাগে সেই মেনুর জন্য নির্দিষ্ট শৈলীগুলি রাখাটা বোধগম্য। পৃষ্ঠার অন্যান্য অংশ রেন্ডার করার সময় এই শৈলীর নিয়মগুলি কোন প্রভাব ফেলবে না, যা তাদের মূল বিষয়বস্তু থেকে সুন্দরভাবে আলাদা করে রাখে!
ওয়েব কম্পোনেন্ট মডেলের জন্য সম্ভবত সবচেয়ে বাধ্যতামূলক ব্যবহারের ক্ষেত্রে একটি। স্লাইডার, মেনু, ডেট পিকার, ট্যাব উইজেট ইত্যাদির মতো জিনিসগুলি তৈরি করার জন্য ওয়েব উপাদানগুলি একটি দুর্দান্ত উপায় হতে চলেছে৷ স্কোপড শৈলী প্রদান করে, একজন ডিজাইনার একটি উইজেট তৈরি করতে পারেন এবং একটি স্বয়ংসম্পূর্ণ ইউনিট হিসাবে তাদের শৈলীগুলির সাথে প্যাকেজ করতে পারেন যা অন্যরা একটি সমৃদ্ধ ওয়েব অ্যাপ্লিকেশান দখল করতে এবং একত্রিত করতে পারে৷ আমরা ওয়েব কম্পোনেন্ট এবং ছায়া DOM এর সাথে ব্যাপকভাবে <style scoped> ব্যবহার করার পরিকল্পনা করছি (এটি ইতিমধ্যেই chrome://flags-এ পরীক্ষামূলক "ছায়া DOM" পতাকা সেট করে সক্ষম করা যেতে পারে)। এই মুহূর্তে ইনলাইন স্টাইলিং এর মতো খারাপ অভ্যাসগুলি অবলম্বন না করে শৈলীগুলি ওয়েব উপাদানগুলিতে সীমাবদ্ধ রয়েছে তা নিশ্চিত করার কোনও ভাল উপায় নেই, তাই স্কোপড শৈলীগুলি এর জন্য উপযুক্ত।
কেন অভিভাবক উপাদান অন্তর্ভুক্ত?
সবচেয়ে স্বাভাবিক উপায় হল মূল উপাদানটি অন্তর্ভুক্ত করা যাতে <style scoped> নিয়মগুলি, উদাহরণস্বরূপ, সমগ্র সুযোগের জন্য একটি সাধারণ পটভূমির রঙ সেট করতে পারে। এটি এমন ব্রাউজারগুলির জন্য স্কোপড স্টাইল শীটগুলিকে "প্রতিরক্ষামূলকভাবে" লেখার অনুমতি দেয় যেগুলি এখনও <style scoped> সমর্থন করে না, ফলব্যাক হিসাবে একটি আইডি বা শ্রেণি নির্বাচকের সাথে নিয়মগুলি প্রিফিক্স করে:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
এটি 'স্কোপড' প্রয়োগ করার সময় শৈলী ব্যবহারের প্রভাবকে অনুকরণ করে কিন্তু আরও জটিল নির্বাচকের কারণে কিছু রান-টাইম পারফরম্যান্স পেনাল্টি সহ। এই পদ্ধতির চমৎকার জিনিস হল যে দিনটি যখন <style scoped> ব্যাপকভাবে সমর্থিত হয় এবং আইডি নির্বাচকদের সহজভাবে বাদ দেওয়া হতে পারে তখন পর্যন্ত এটি একটি সুন্দর ফলব্যাক পদ্ধতির অনুমতি দেয়।
স্ট্যাটাস
প্রদত্ত যে স্কোপড স্টাইল শীটগুলির বাস্তবায়ন এখনও নতুন, সেগুলি বর্তমানে Chrome-এ একটি রান-টাইম পতাকার পিছনে লুকিয়ে আছে৷ এগুলিকে সক্ষম করার জন্য আপনাকে ক্রোমের একটি সংস্করণ পেতে হবে যার সংস্করণ সংখ্যা 19 বা তার বেশি (এখনই ক্রোম ক্যানারি), তারপরে chrome://flags (শেষের দিকে) 'সক্ষম <style scoped> ' এন্ট্রিটি সনাক্ত করুন। 'সক্ষম' ক্লিক করুন এবং তারপর ব্রাউজারটি পুনরায় চালু করুন।
বর্তমানে কোন পরিচিত বাগ নেই, তবে @keyframes এবং @-webkit-region এর @global এবং স্কোপড সংস্করণ এবং এখনও প্রয়োগের প্রক্রিয়াধীন রয়েছে। এছাড়াও, @font-face আপাতত উপেক্ষা করা হয়েছে কারণ স্পেকটি পরিবর্তন হওয়ার একটি ভাল সম্ভাবনা রয়েছে।
আমরা বৈশিষ্ট্যটিতে আগ্রহী প্রত্যেককে এটি ব্যবহার করে দেখতে উত্সাহিত করতে চাই এবং আপনার অভিজ্ঞতা সম্পর্কে আমাদের জানান: ভাল, খারাপ এবং (সম্ভবত) বগি।