CSS @scope regel

Definitie en gebruik

CSS @scope De regel staat u toe om elementen in een specifieke DOM onderboomstructuur te kiezen.

Met deze @ regel kunt u elementen nauwkeurig lokaliseren zonder te hoeven schrijven van te specifieke selectors.

Deze @ regel vermindert ook de koppeling tussen de selector en de DOM structuur.

Voorbeeld

Voorbeeld 1

Hier gebruiken we twee onafhankelijke @scope Een blok om de <a> elementen in de .ex1 en .ex2 klassen te matchen. :scope wordt gebruikt om de stijl van de basis van het bereik te kiezen en te instellen. In dit voorbeeld is de basis van het bereik de <div> element die de klasse heeft toegepast:

@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;
  }
}

Probeer het zelf

Bekijk het volgende HTML:

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

Hier zijn enkele geneste <div> elementen. Als we de stijlen voor de <h2> en <img> elementen in het container/news gedeelte willen instellen, moeten we het volgende schrijven (zonder @scope):

Voorbeeld 2

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

Probeer het zelf

Gebruik @scope Regels, zodat je elementen kunt lokaliseren zonder complexe selectors te schrijven, zoals hieronder:

Voorbeeld 3

Hier richten we ons alleen op de <h2> en <img> elementen binnen de .container component, en stellen we .container in als de basis van de @scope regel:

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

Probeer het zelf

@scope Regels bevatten een of meerdere regelsets en kunnen op twee manieren worden gebruikt:

• Als onafhankelijke blok in CSS, bevat dit in dit geval een begin deel, dat bestaat uit het bereikshoofd en optionele bereikslimieten selectors - die de boven- en ondergrens van het bereik definiëren.
• Als inline-stijl binnen de <style> element in HTML, wordt in dit geval het begin deel weggelaten en wordt de regelset automatisch toegepast op het ouderlijke element van het <style> element.

Voorbeeld 4

"Donut bereik" geldt alleen voor elementen tussen twee elementen in de voorouderboom. Dit is een voorbeeld:

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

Probeer het zelf

CSS syntaxis

@scope (Bereikshoofd) {
  Regelset
}

of

/* Donut bereik */
@scope (Bereikshoofd) to (Bereikslimieten) {
  Regelset
}

Browserondersteuning

De cijfers in de tabel vertegenwoordigen de eerste browserversie die deze @ regel volledig ondersteunt.