CSS @scope رول

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

CSS @scope ਇਹ ਰੂਲ ਤੁਹਾਨੂੰ ਵਿਸ਼ੇਸ਼ ਕ੍ਰਮਵਾਰੀ ਵਿੱਚ ਐਲੀਮੈਂਟ ਚੋਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ。

ਇਸ @ ਰੂਲ ਦੇ ਦੁਆਰਾ ਤੁਸੀਂ ਸਟੈਟਿਕ ਚੋਣਕਰਤਾ ਲਿਖਣ ਦੀ ਜ਼ਰੂਰਤ ਬਿਨਾ ਐਲੀਮੈਂਟ ਨੂੰ ਸਟੈਟਿਕ ਤੌਰ 'ਤੇ ਸਥਿਤ ਕਰ ਸਕਦੇ ਹੋ

ਇਸ @ ਰੂਲ ਨਾਲ ਚੋਣਕਰਤਾ ਅਤੇ 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;
  }
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਹੇਠ ਵਿੱਚ ਵੇਖੋ ਹੇਠ ਵਿੱਚ ਹੈਲਟੀਮਲ:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </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 (ਸਕੋਪ ਸੀਮਤੀ) {
  ਰੂਲ ਸੈੱਟ
}

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਪਰੇਸ਼ਨ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਨੰਬਰ ਇਸ ਪਿੱਛੇ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲਾ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਦਿਸਾਈ ਹੈ。