`@scope (stiluri limitate la o zonă)` în CSS

Reguli @ (at-rules) Chrome 118, Firefox 146, Safari 17.4

Aplică reguli doar în interiorul unei zone din pagină, opțional cu o limită inferioară, fără selectori lungi sau convenții BEM.

Sintaxă CSS

@scope (.card) {
  :scope { padding: 16px; }
  img { border-radius: 8px; }
}
@scope (.articol) to (.comentarii) {
  a { color: #2563eb; }
}

Ce face `@scope (stiluri limitate la o zonă)`

@scope (rădăcină) face ca selectorii din bloc să se aplice doar elementelor din interiorul rădăcinii. În loc de .card .titlu, .card img etc., scrii o dată @scope (.card) și apoi selectori simpli. În bloc, :scope înseamnă chiar elementul rădăcină.

Cu to (limită) oprești stilurile la o anumită zonă: @scope (.articol) to (.comentarii) stilizează articolul, dar nu și comentariile din el. Este ca o „gaură” în zonă.

Când două zone se suprapun și regulile au aceeași specificitate, câștigă regula din zona mai apropiată de element (proximitate), nu cea scrisă mai jos în fișier. Suport: Chrome 118+, Firefox 146+, Safari 17.4+; pentru alte browsere scrie stiluri de bază în afara lui @scope.

Valori uzuale

Valoare	Descriere
`@scope (selector)`	Rădăcina zonei: regulile se aplică doar în interiorul ei.
`to (selector)`	Limita: elementele din interiorul ei nu mai sunt stilizate.
`:scope`	În bloc, chiar elementul rădăcină.
`@scope { ... } fără selector`	Pus într-un <style> din HTML, zona este elementul părinte al acelui <style>.

Exemple

Exemplul 1: Stiluri pentru un card de produs, fără selectori lungi

Regulile pentru img și p nu afectează imaginile și paragrafele din restul paginii.

@scope (.card-produs) {
  :scope {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
  }
  img {
    width: 100%;
    border-radius: 8px;
  }
  p {
    color: #475569;
    font-size: 0.9rem;
  }
}

Efect vizual în browser

Cardul „Miere de salcâm 500 g – 35 lei” are chenar rotunjit, poza cu colțuri rotunjite și descrierea gri, mai mică. Paragrafele din articolul de deasupra rămân negre, la mărimea normală.

Exemplul 2: Linkuri stilizate în articol, dar nu și în secțiunea de comentarii

Limita to (.comentarii) exclude comentariile, chiar dacă sunt în interiorul articolului.

@scope (.articol) to (.comentarii) {
  a {
    color: #2563eb;
    text-decoration-thickness: 2px;
  }
}