CSS Academy · Oppitunti

@scope rajattuja tyylejä varten

Rajoita CSS-sääntöjen vaikutus tiettyihin alipuuryhmiin @scope-at-säännön avulla.

Oppitunti 3/413 vaihetta

@scope rajattuja tyylejä varten on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on @scope?

@scope-at-sääntö (Chrome 118+, Safari 17.4+) rajoittaa CSS-säännöt tiettyyn DOM:n alipuun. @scope-lohkon sisäiset säännöt vaikuttavat vain ilmoitetun rajausjuuren sisällä oleviin elementteihin, mikä estää tyylien vuotamisen komponenttien välillä.

Perussyntaksi

Rajaus määritetään rajausjuuren valitsimella. Kaikki sisäiset säännöt koskevat vain määritettyä rajausjuurta vastaavien elementtien jälkeläisiä, eivät koko asiakirjaa.

<div class="card">
  <div class="title">Scoped Title</div>
  <div class="body">Scoped body text &mdash; styles only apply inside .card.</div>
</div>

Rajausjuuri

Rajausjuuri (@scope (.card)) määrittää rajauksen aloituskohdan. Rajauksen sisällä olevat .title-valitsinta vastaavat elementit tyylitellään. .card-elementin ulkopuolella olevat .title-luokan elementit eivät muutu — kyseessä on todellinen tyylien eristys ilman Shadow DOM:ää.

Rajausraja

Rajaukselle voi määrittää valinnaisen rajan to-syntaksilla: @scope (.card) to (.nested-card). Säännöt vaikuttavat .card-elementin sisällä, mutta pysähtyvät .nested-card-jälkeläisten kohdalla. Näin tyylit voidaan rajata komponenttien yhteen sisäkkäisyystasoon ja jättää syvemmällä olevat esiintymät ulkopuolelle.

:scope-näennäisluokka @scope:n sisällä

@scope-lohkon sisällä :scope viittaa itse rajausjuurielementtiin. @scope (.card) { :scope { border-radius: 8px; } } tyylittelee suoraan .card-elementtiä, ei sen jälkeläisiä.

Läheisyyteen perustuva spesifisyys

@scope tuo käyttöön läheisyyteen perustuvan spesifisyyden: kun elementtiin sopii useita rajauksia, lähimpänä oleva rajausjuuri voittaa valitsimen spesifisyydestä riippumatta. Näin syvälle sisäkkäisten komponenttien tyylejä eivät ohita kaukana olevien isäntärajauksien tyylit.

@scope verrattuna CSS Modulesiin

CSS Modules luo yksilöllisiä hashattuja luokanimiä rajauksen toteuttamiseksi koontivaiheessa — kyse on JavaScript-bundlerin toiminnasta. @scope toteuttaa rajauksen natiivisti selaimessa ilman koontityökaluja, hashattuja nimiä tai kehyskohtaista syntaksia — kyse on puhtaasta CSS:stä.

@scope verrattuna Shadow DOMiin

Shadow DOM luo täydellisen tyylien eristyksen — ulkopuoliset tyylit eivät pääse sen läpi. @scope luo osittaisen eristyksen — ulkopuolelta tulevat tyylit voivat edelleen kohdistua rajattuihin elementteihin, jos niiden spesifisyys on riittävän suuri. @scope on kevyempi vaihtoehto komponenttien tyylien rajaamiseen ilman täydellistä eristystä.

@scope- ja @layer-kerrokset

Yhdistämällä @scopen ja @layerin saatte kaskadin hallintaan tarkat säätömahdollisuudet: määritelkää komponentin rajatut tyylit komponenttikerroksessa. Näin hallitsette sekä kaskadin järjestystä (kerrosten avulla) että tyylien rajausta (@scopen avulla) yhdisteltävällä tavalla ilman luokkanimien kanssa kikkailua.

Käytännön käyttötapaukset

Suunnittelujärjestelmän komponentit: rajatkaa kaikki painikkeiden tyylit kohteeseen @scope (.button-group), jotta sisäisten painikkeiden tyylit eivät koskaan vuoda ulos. Widgetien eristys: rajatkaa kolmannen osapuolen widgetin tyylit sen säilöön, jotta ristiriitoja sivun yleisten tyylien kanssa ei synny.

Selaintuki ja vararatkaisu

@scopea tuetaan Chrome-versiossa 118 ja uudemmissa, Safari-versiossa 17.4 ja uudemmissa sekä Firefox-versiossa 128 ja uudemmissa. Selaimissa, jotka eivät tue sitä, @scopen sisällä olevat tyylit ohitetaan — kaskadi käyttää tällöin yleisiä tyylejä. Käyttäkää @scopea progressiivisena parannuksena silloin, kun komponenttien tyylien rajaamisesta on hyötyä mutta se ei ole välttämätöntä.

Tietotesti

Minkä ongelman @scope ratkaisee, jota on vaikea ratkaista pelkillä perinteisillä CSS-valitsimilla?

Vastaa interaktiivisessa oppitunnissa

Yhteenveto

@scope rajoittaa CSS-sääntöjen kohdistumisen määritettyyn DOM-alipuuhun ja mahdollistaa tyylien natiivin kapseloinnin ilman Shadow DOMia tai koontityökalun tekemää luokkanimien hajautusta. Rajauksen rajat, etäisyyteen perustuva spesifisyys ja yhteensopivuus @layerin kanssa tekevät siitä tehokkaan perustan komponenttikohtaisille suunnittelujärjestelmille puhtaassa CSS:ssä.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”@scope rajattuja tyylejä varten” ilmainen?

Kyllä – oppitunnin ”@scope rajattuja tyylejä varten” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”@scope rajattuja tyylejä varten”?

Rajoita CSS-sääntöjen vaikutus tiettyihin alipuuryhmiin @scope-at-säännön avulla. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”@scope rajattuja tyylejä varten”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: CSS Academy