Regola CSS @scope

Definizione e utilizzo

CSS @scope La regola consente di selezionare gli elementi all'interno di un sottoalbero DOM specifico.

Con questa regola @, è possibile localizzare esattamente l'elemento senza scrivere selettori troppo specifici.

Questa regola @ riduce la dipendenza tra il selettore e la struttura del DOM.

Esempio

Esempio 1

In questo caso, utilizziamo due esempi indipendenti @scope Il blocco viene utilizzato per abbinare gli elementi <a> delle classi .ex1 e .ex2. :scope viene utilizzato per selezionare e impostare lo stile dell'oggetto di riferimento. Nell'esempio corrente, l'oggetto di riferimento è l'elemento <div> che ha applicato la classe:

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

Prova te stesso

Vedi l'HTML seguente:

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

Ci sono alcuni elementi <div> annidati. Se vogliamo applicare uno stile agli elementi <h2> e <img> all'interno del contenuto container/news, dobbiamo scrivere quanto segue (senza usare @scope):

Esempio 2

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

Prova te stesso

Usando @scope Le regole ti permettono di localizzare esattamente gli elementi senza dover scrivere selettori troppo complessi, come nell'esempio seguente:

Esempio 3

In questo caso, stiamo impostando .container come radice dell'ambito della regola @scope per gli elementi <h2> e <img> all'interno del componente .container:

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

Prova te stesso

@scope Le regole contengono una o più set di regole e possono essere utilizzate in due modi:

• Come blocco indipendente di CSS, in questo caso, contiene una parte iniziale che include la radice di ambito e il selettore di limitazione di ambito opzionale - che definiscono i limiti superiori e inferiori dell'ambito.
• Come stile inline all'interno dell'elemento <style> di HTML, in questo caso, la parte iniziale è omessa e le regole incluse si applicano automaticamente all'elemento genitore del <style>.

Esempio 4

L'ambito donut si applica solo agli elementi tra due elementi dell'albero degli antenati. Ecco un esempio:

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

Prova te stesso

Sintassi CSS

@scope (Radice di ambito) {
  Set di regole
}

o

/* Ambito donut */
@scope (Radice di ambito) to (Limitazione di ambito) {
  Set di regole
}

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la @ regola.