সিএসএস কিসের জন্য :স্কোপ সিউডো-ক্লাস?

:scope সিএসএস নির্বাচক 4 এ সংজ্ঞায়িত করা হয়েছে এইভাবে:

একটি ছদ্ম-শ্রেণী যা প্রাসঙ্গিক রেফারেন্স উপাদান সেটে থাকা যেকোনো উপাদানকে উপস্থাপন করে। এটি একটি (সম্ভাব্যভাবে খালি) উপাদানগুলির একটি সুস্পষ্টভাবে-নির্দিষ্ট সেট, যেমন querySelector() দ্বারা নির্দিষ্ট করা হয়েছে, অথবা একটি <style scoped> উপাদানের মূল উপাদান, যা একটি নির্বাচককে "স্কোপ" করতে ব্যবহৃত হয় যাতে এটি শুধুমাত্র একটি সাবট্রির মধ্যে মেলে।

এটি ব্যবহার করার একটি উদাহরণ একটি <style scoped> ( আরও তথ্য ):

<style>
    li {
    color: blue;
    }
</style>

<ul>
    <style scoped>
    li {
        color: red;
    }
    :scope {
        border: 1px solid red;
    }
    </style>
    <li>abc</li>
    <li>def</li>
    <li>efg</li>
</ul>

<ul>
    <li>hij</li>
    <li>klm</li>
    <li>nop</li>
</ul>

এটি li উপাদানগুলিকে প্রথম ul লাল রঙে রঙ করে এবং :scope নিয়মের কারণে, ul এর চারপাশে একটি সীমানা রাখে। কারণ এই <style scoped> এর প্রেক্ষাপটে, ul মেলে :scope । এটা স্থানীয় প্রেক্ষাপট. আমরা যদি বাইরের <style> এ একটি :scope নিয়ম যোগ করি তাহলে এটি সম্পূর্ণ নথির সাথে মিলবে। মূলত, :root এর সমতুল্য।

প্রাসঙ্গিক উপাদান

আপনি সম্ভবত querySelector() এবং querySelectorAll() এর Element সংস্করণ সম্পর্কে সচেতন। পুরো নথিটি অনুসন্ধান করার পরিবর্তে, আপনি ফলাফলটিকে একটি প্রাসঙ্গিক উপাদানে সীমাবদ্ধ করতে পারেন:

<ul>
    <li id="scope"><a>abc</a></li>
    <li>def</li>
    <li><a>efg</a></li>
</ul>
<script>
    document.querySelectorAll('ul a').length; // 2

    var scope = document.querySelector('#scope');
    scope.querySelectorAll('a').length; // 1
</script>

যখন এগুলিকে কল করা হয়, ব্রাউজারটি একটি NodeList ফেরত দেয় যা শুধুমাত্র নোডগুলির সেট অন্তর্ভুক্ত করার জন্য ফিল্টার করা হয় যা a.) নির্বাচক এবং b.) এর সাথে মেলে যা প্রসঙ্গ উপাদানের বংশধর৷ সুতরাং দ্বিতীয় উদাহরণে, ব্রাউজার সমস্ত a খুঁজে পায়, তারপর scope উপাদানে না থাকাগুলিকে ফিল্টার করে। এটি কাজ করে, তবে আপনি সতর্ক না হলে এটি কিছু উদ্ভট আচরণের দিকে নিয়ে যেতে পারে। পড়ুন

যখন querySelector ভুল হয়ে যায়

নির্বাচকদের স্পেকের মধ্যে সত্যিই একটি গুরুত্বপূর্ণ বিষয় রয়েছে যা লোকেরা প্রায়শই উপেক্ষা করে। এমনকি যখন querySelector[All]() একটি উপাদানে আহ্বান করা হয়, তখনও নির্বাচকরা সম্পূর্ণ নথির প্রসঙ্গে মূল্যায়ন করে । এর মানে অপ্রত্যাশিত জিনিস ঘটতে পারে:

    scope.querySelectorAll('ul a').length); // 1
    scope.querySelectorAll('body ul a').length); // 1

WTF ! প্রথম উদাহরণে, ul আমার উপাদান , তবুও আমি এখনও এটি ব্যবহার করতে সক্ষম এবং নোডের সাথে মেলে। দ্বিতীয়টিতে, body এমনকি আমার উপাদানের বংশধর নয়, তবে " body ul a " এখনও মেলে। এই দুটিই বিভ্রান্তিকর এবং আপনি যা আশা করেন তা নয়।

এখানে jQuery-এর সাথে তুলনা করা মূল্যবান, যা সঠিক পন্থা নেয় এবং আপনি যা আশা করেন তা করে:

    $(scope).find('ul a').length // 0
    $(scope).find('body ul a').length // 0

…এন্টার :scope এই শব্দার্থিক শ্লোগানগুলি সমাধান করার জন্য।

:স্কোপের সাথে querySelector ফিক্স করা হচ্ছে

WebKit সম্প্রতি querySelector[All]() এ :scope pseudo-class ব্যবহার করার জন্য সমর্থন ল্যান্ড করেছে। আপনি Chrome Canary 27-এ এটি পরীক্ষা করতে পারেন।

আপনি এটি ব্যবহার করতে পারেন নির্বাচকদের একটি প্রসঙ্গ উপাদানে সীমাবদ্ধ করুন । একটি উদাহরণ দেখা যাক। নিম্নলিখিতটিতে, :scope ব্যবহার করা হয় স্কোপ উপাদানের সাবট্রিতে নির্বাচককে "স্কোপ" করতে। এটা ঠিক, আমি তিনবার স্কোপ বলেছি!

    scope.querySelectorAll(':scope ul a').length); // 0
    scope.querySelectorAll(':scope body ul a').length); // 0
    scope.querySelectorAll(':scope a').length); // 1

:scope ব্যবহার করে querySelector() পদ্ধতির শব্দার্থবিদ্যাকে একটু বেশি অনুমানযোগ্য করে তোলে এবং jQuery এর মতো অন্যরা যা করছে তার সাথে ইনলাইন করে।

পারফরম্যান্স জয়?

এখনো না :(

আমি কৌতূহলী ছিলাম যদি qS/qSA এ :scope ব্যবহার করলে কর্মক্ষমতা বৃদ্ধি পায়। তাই... একজন ভালো ইঞ্জিনিয়ারের মতো আমি একসাথে একটা পরীক্ষা দিলাম। আমার যুক্তি: নির্বাচক ম্যাচিং করার জন্য ব্রাউজারের জন্য কম সারফেস এরিয়া মানে দ্রুত লুকআপ।

আমার পরীক্ষায়, ওয়েবকিট বর্তমানে :scope ব্যবহার না করার চেয়ে ~1.5-2x বেশি সময় নেয়। ড্রাটস ! যখন crbug.com/222028 স্থির হয়ে যায়, এটি ব্যবহার করলে তাত্ত্বিকভাবে এটি ব্যবহার না করার তুলনায় আপনাকে একটি সামান্য কর্মক্ষমতা বৃদ্ধি করা উচিত ।