CSS @scope کی قاعدة

تعلیم اور استعمال

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>عنوان خاص</h2>
    <img src="example.jpg" alt="عکس خاص">
  </div>
</div>

در اینجا چندین عنصر <div> توالی داریم، اگر بخواهیم استایل‌ها برای عناصر <h2> و <img> در بخش container/news تنظیم کنیم، باید این را بنویسیم (بدون استفاده از @scope):

مثال 2

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

آزمایش کنید

استفاده کنید @scope قوانین، شما می‌توانید به دقت عناصر را تعیین کنید بدون اینکه نیاز باشد انتخابگرهای پیچیده‌ای بنویسید، مانند این:

مثال 3

در اینجا، ما فقط برای عناصر <h2> و <img> در بخش .container، .container را به عنوان ریشه‌ی قوانین @scope تنظیم می‌کنیم:

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

آزمایش کنید

@scope قوانین شامل یک یا چند مجموعه‌ی قوانین هستند که می‌توانند به دو روش استفاده شوند:

• به عنوان یک بلوک مستقل CSS، در این حالت، آن شامل یک بخش پیشین است که شامل ریشه‌ی حوزه و انتخابگر محدودیت‌های حوزه‌ی انتخابی انتخابی است - که تعریف‌کنندگان مرزهای بالا و پایین حوزه را تعیین می‌کنند.
• به عنوان استایل درون‌های HTML <style> به عنوان استایل درون‌های HTML <style>، در این حالت، بخش پیشین حذف شده و مجموعه‌ی قوانین شامل شده به طور خودکار به عنصر والد <style> اعمال می‌شود.

مثال 4

هزینه‌ی حلقه‌ی شیرینی فقط برای عناصر بین دو عنصر در درخت اجداد است. این مثال است:

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

آزمایش کنید

زبان CSS

@scope (ریشه حوزه) {
  گروه‌های قوانین
}

یا

/* حوزه‌ی حلقه */
@scope (ریشه حوزه) to (محدودیت‌های حوزه) {
  گروه‌های قوانین
}

پشتیبانی مرورگر

جداول کا عدد اولین نسخه مرورگر است که کامل از این @قانون پشتیبانی می‌کند.