সিএসএস @স্কোপ রুল

বিবরণ ও ব্যবহার

CSS @scope এই শেল আপনাকে DOM উপশাখায় বিন্যাস থেকে ইলেকট্রনিকেন্ট চিহ্নিতকরণের অনুমতি দেয়。

এই @ শেলের মাধ্যমে, আপনি একটি বিশেষ সেলেক্টর লিখতে হবেন না কিন্তু প্রাকৃতিকভাবে প্রতিটি ইলেকট্রনিকেন্টকে অনুগ্রহ করেন।

এই @ শেলে চিহ্নিতকারীকরণটি DOM বিন্যাসের সাথে সেলেক্টরকে সংযুক্ত করেছে।

একমাত্র

উদাহরণ 1

এখানে, আমরা দুটি পৃথক @scope ব্লক প্রয়োগ করে .ex1 এবং .ex2 শ্রেণীগুলির <a> ইলেকট্রনিকেন্ট মিটাতে।:scope ব্যবহার করে অ্যাকশনসম্পন্ন শৃঙ্খলাটির শৈলী প্রয়োগ করা হয়। এই উদাহরণে, শৃঙ্খলাটির শুরুতে একটি <div> ইলেকট্রনিকেন্ট যা শ্রেণীটির প্রয়োগ করেছে:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

আপনার নিজেই প্রয়োগ করুন

দেখুন নিচের HTML:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

এখানে কিছু উপনিবেশিত <div> তারকার রয়েছে, যদি আপনি উপরোক্ত container/news অংশের <h2> এবং <img> তারকারকে শৈলী নিশ্চিত করতে চান, তবে নিম্নলিখিত কনটেন্ট লিখতে হবে (যেমন @scope-কে ব্যবহার করা হয় না):

উদাহরণ 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

আপনার নিজেই প্রয়োগ করুন

ব্যবহার করে: @scope নিয়ম, আপনি সঠিকভাবে তরকারকে অবস্থান করতে পারেন, যদিও সংকটকর চিহ্নিতকারীকরণ লিখতে হবেন না, যেমন:

উদাহরণ 3

এখানে, আমরা .container কম্পোনেন্টের <h2> এবং <img> তারকারকে প্রতিবন্ধন করে, .container-কে @scope নিয়মের মূল ক্ষেত্রসূত্র হিসাবে নিয়ে আসি:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

আপনার নিজেই প্রয়োগ করুন

@scope নিয়মসংজ্ঞা একটি বা একাধিক নিয়মসংজ্ঞাকে অন্তর্ভুক্ত করে, যা দুইভাবে ব্যবহার করা যেতে পারে:

• এটি CSS-তে স্বতন্ত্র ব্লক হিসাবে, এই পরিস্থিতিতে, এটি একটি প্রাথমিক অংশ নিয়ে আসে, যার মধ্যে ক্ষেত্রসূত্র এবং বাছাইকৃত ক্ষেত্রসীমার প্রতিবন্ধন নিহিত রয়েছে - যা ক্ষেত্রের উপরের এবং নীচের সীমানা নির্ধারণ করে。
• এটি HTML-তে <style> তারকার মধ্যে স্থানীয় শৈলী হিসাবে, এই পরিস্থিতিতে, প্রাথমিক অংশটি বাদ দেওয়া হয় এবং অন্তর্ভুক্ত নিয়মসংজ্ঞাটি স্বয়ংক্রিয়ভাবে <style> তারকার মাত্রা তারকার উপর অপরিবর্তিত হয়。

উদাহরণ 4

“甜甜圈 ক্ষেত্রসূত্র” শুধুমাত্র পূর্বসূত্র গাছের দুটি তারকার মধ্যে অবস্থিত তরকারকে প্রতিবন্ধন করে। এটি একটি উদাহরণ:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

আপনার নিজেই প্রয়োগ করুন

CSS গঠনশৈলী

@scope (ক্ষেত্রসূত্র) {
  নিয়মসংজ্ঞা
}

বা

/* 甜甜圈作用域 */
@scope (ক্ষেত্রসূত্র) to (ক্ষেত্রসীমার প্রতিবন্ধন) {
  নিয়মসংজ্ঞা
}

ব্রাউজারের সমর্থন

তালিকায় সংখ্যা প্রথম সম্পূর্ণরূপে @ নিয়মটি সমর্থনকারী ব্রাউজারের সংস্করণটির জন্য প্রদর্শিত হয়।