Sintassi

Significato dei valori principali:

• selettore: il selettore di un elemento o un gruppo di elementi che definisce il contesto di applicazione delle regole CSS.

• regola CSS: le normali dichiarazioni CSS che saranno applicate solo all'interno del contesto definito dal selettore.

⚠️ Note importante:
La direttiva @scope in CSS è una proposta che si trova ancora in fase di discussione, facente parte di CSS Scoping.

Esempio proprietà: @scope

Codice Esempio: @scope

CODE: CSS

1. @scope .scope-example {

2.   color: white;

3.   background-color: #50a14f;

4. }

6. .scope-example {

7.   padding: 20px;

8.   font-size: 18px;

9.   transition: background-color 0.3s;

10. }

12. .scope-example:hover {

13.   background-color: #ff6347;

14. }

Contenuto Esempio: @scope

  
  <style>
    @scope .scope-example {
      color: white;
      background-color: #50a14f;
    }

    .scope-example {
      padding: 20px;
      font-size: 18px;
      transition: background-color 0.3s;
    }

    .scope-example:hover {
      background-color: #ff6347;
    }
  </style>

  <div class="scope-example">Questo è un esempio di @scope</div>
  

⚠️ Note compatibilità:
La direttiva @scope in CSS è una proposta che si trova ancora in fase di discussione, facente parte di CSS Scoping. In breve, permette di definire un contesto per le regole CSS, limitando l'ambito di applicazione delle dichiarazioni a una parte specifica del DOM.

Il suo obiettivo è migliorare l'incapsulamento degli stili, simile a come i componenti CSS funzionano in librerie come Web Components o Shadow DOM, ma con un approccio più semplice e integrato.

Al momento, @scope non è ampiamente supportato dai browser e non è una proprietà CSS standardizzata, quindi è importante testare accuratamente il comportamento sui vari dispositivi.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser