Suomi

Tutustu CSS :has() -valitsimeen, joka mullistaa ylätason elementtien valinnan. Opi käytännön sovelluksia, selainyhteensopivuutta ja edistyneitä tekniikoita CSS-tyyliesi uudistamiseksi.

CSS :has() -valitsimen hallinta: Vapauta ylätason valinnan voima

Vuosien ajan CSS-kehittäjät ovat kaivanneet yksinkertaista ja tehokasta tapaa valita vanhempia elementtejä niiden lapsielementtien perusteella. Odotus on ohi! :has()-pseudoluokka on vihdoin täällä, ja se mullistaa tavan, jolla kirjoitamme CSS:ää. Tämä voimakas valitsin antaa sinun kohdistaa tyylin vanhempaan elementtiin, jos se sisältää tietyn lapsielementin, mikä avaa lukemattomia mahdollisuuksia dynaamiselle ja responsiiviselle tyylittelylle.

Mikä on :has()-valitsin?

:has()-pseudoluokka on CSS:n relaationaalinen pseudoluokka, joka hyväksyy argumenttinaan valitsinlistan. Se valitsee elementin, jos jokin valitsinlistan valitsimista vastaa vähintään yhtä elementtiä valitun elementin jälkeläisten joukossa. Yksinkertaisemmin sanottuna se tarkistaa, onko vanhemmalla elementillä tietty lapsi, ja jos on, vanhempi elementti valitaan.

Perussyntaksi on:

vanhempi:has(lapsi) { /* CSS-säännöt */ }

Tämä valitsee vanhempi-elementin vain, jos se sisältää vähintään yhden lapsi-elementin.

Miksi :has() on niin tärkeä?

Perinteisesti CSS:n kyky valita vanhempia elementtejä niiden lasten perusteella on ollut rajallinen. Tämä rajoitus on usein vaatinut monimutkaisia JavaScript-ratkaisuja tai kiertoteitä dynaamisen tyylittelyn saavuttamiseksi. :has()-valitsin poistaa tarpeen näille raskaille menetelmille, mikä mahdollistaa puhtaamman, helpommin ylläpidettävän ja suorituskykyisemmän CSS-koodin.

Tässä syitä, miksi :has() on mullistava:

Perusesimerkkejä :has()-valitsimesta

Aloitetaan muutamalla yksinkertaisella esimerkillä havainnollistamaan :has()-valitsimen voimaa.

Esimerkki 1: Vanhempi-divin tyylittely kuvan olemassaolon perusteella

Oletetaan, että haluat lisätä reunuksen <div>-elementtiin vain, jos se sisältää <img>-elementin:

div:has(img) { border: 2px solid blue; }

Tämä CSS-sääntö lisää sinisen reunuksen mihin tahansa <div>-elementtiin, joka sisältää vähintään yhden <img>-elementin.

Esimerkki 2: Lista-alkion tyylittely span-elementin olemassaolon perusteella

Oletetaan, että sinulla on lista kohteita ja haluat korostaa listan kohtaa, jos se sisältää <span>-elementin tietyllä luokalla:

li:has(span.highlight) { background-color: yellow; }

Tämä CSS-sääntö muuttaa minkä tahansa <li>-elementin taustavärin keltaiseksi, jos se sisältää <span>-elementin, jonka luokka on "highlight".

Esimerkki 3: Lomakkeen label-elementin tyylittely syötekentän kelpoisuuden perusteella

Voit käyttää :has()-valitsinta lomakkeen label-elementin tyylittelyyn sen perusteella, onko siihen liittyvä syötekenttä kelvollinen vai kelvoton (yhdistettynä :invalid-pseudoluokkaan):

label:has(+ input:invalid) { color: red; font-weight: bold; }

Tämä tekee label-elementistä punaisen ja lihavoidun, jos sitä välittömästi seuraava syötekenttä on kelvoton.

Edistyneitä :has()-valitsimen käyttötapoja

:has()-valitsimesta tulee entistäkin tehokkaampi, kun se yhdistetään muihin CSS-valitsimiin ja pseudoluokkiin. Tässä muutamia edistyneitä käyttötapauksia:

Esimerkki 4: Elementtien kohdistaminen, joilta puuttuu tietty lapsielementti

Voit käyttää :not()-pseudoluokkaa yhdessä :has()-valitsimen kanssa kohdistaaksesi elementteihin, joilla *ei* ole tiettyä lasta. Esimerkiksi, tyylitelläksesi divejä, jotka *eivät* sisällä kuvia:

div:not(:has(img)) { background-color: #f0f0f0; }

Tämä lisää vaaleanharmaan taustavärin mihin tahansa <div>-elementtiin, joka ei sisällä <img>-elementtiä.

Esimerkki 5: Monimutkaisten asettelujen luominen

:has()-valitsinta voidaan käyttää dynaamisten asettelujen luomiseen säiliön sisällön perusteella. Voit esimerkiksi muuttaa ruudukon asettelua sen perusteella, onko ruudukon solussa tietyntyyppinen elementti.

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item:has(img) { grid-column: span 2; }

Tämä saa ruudukon kohteen kattamaan kaksi saraketta, jos se sisältää kuvan.

Esimerkki 6: Dynaaminen lomakkeiden tyylittely

Voit käyttää :has()-valitsinta lomake-elementtien dynaamiseen tyylittelyyn niiden tilan perusteella (esim. ovatko ne kohdennettuja, täytettyjä tai kelvollisia).

.form-group:has(input:focus) { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group:has(input:valid) { border-color: green; } .form-group:has(input:invalid) { border-color: red; }

Tämä lisää sinisen laatikkovarjon, kun syötekenttä on kohdennettu, vihreän reunuksen, jos syöte on kelvollinen, ja punaisen reunuksen, jos syöte on kelvoton.

Esimerkki 7: Tyylittely lapsielementtien lukumäärän perusteella

Vaikka :has() ei suoraan laske lapsielementtien määrää, voit yhdistää sen muihin valitsimiin ja CSS-ominaisuuksiin saavuttaaksesi vastaavia vaikutuksia. Voit esimerkiksi käyttää :only-child-valitsinta tyylitelläksesi vanhemman, jos sillä on vain yksi tietyntyyppinen lapsi.

div:has(> p:only-child) { background-color: lightgreen; }

Tämä tyylittelee <div>-elementin vaaleanvihreällä taustavärillä vain, jos se sisältää yhden ainoan <p>-elementin välittömänä lapsenaan.

Selainyhteensopivuus ja vararatkaisut

Vuoden 2023 lopulla :has()-valitsimella on erinomainen tuki moderneissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge. On kuitenkin ratkaisevan tärkeää tarkistaa yhteensopivuus Can I use -sivustolta ennen sen käyttöönottoa tuotannossa, erityisesti jos sinun on tuettava vanhempia selaimia.

Tässä erittely yhteensopivuusnäkökohdista:

Vararatkaisujen tarjoaminen

Jos sinun on tuettava vanhempia selaimia, sinun on tarjottava vararatkaisuja. Tässä muutamia strategioita:

Tässä esimerkki ominaisuuskyselyn käytöstä:

.parent { /* Perustyylittely kaikille selaimille */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* Paranneltu tyylittely selaimille, jotka tukevat :has()-valitsinta */ border: 3px solid blue; } }

Tämä koodi lisää mustan reunuksen .parent-elementtiin kaikissa selaimissa. Selaimissa, jotka tukevat :has()-valitsinta, se lisää sinisen reunuksen, jos .parent-elementti sisältää kuvan.

Suorituskykyyn liittyviä huomioita

Vaikka :has() tarjoaa merkittäviä etuja, on olennaista ottaa huomioon sen mahdollinen vaikutus suorituskykyyn, erityisesti kun sitä käytetään laajasti tai monimutkaisten valitsimien kanssa. Selaimien on arvioitava valitsin jokaiselle sivun elementille, mikä voi tulla laskennallisesti kalliiksi.

Tässä muutamia vinkkejä :has()-valitsimen suorituskyvyn optimoimiseksi:

Yleisiä vältettäviä virheitä

Kun työskentelet :has()-valitsimen kanssa, on helppo tehdä virheitä, jotka voivat johtaa odottamattomiin tuloksiin. Tässä muutamia yleisiä sudenkuoppia, joita kannattaa välttää:

Parhaat käytännöt :has()-valitsimen käyttöön

Maksimoidaksesi :has()-valitsimen hyödyt ja välttääksesi mahdolliset ongelmat, noudata näitä parhaita käytäntöjä:

Tosielämän esimerkkejä ja käyttötapauksia

Tutkitaanpa muutamia tosielämän esimerkkejä siitä, kuinka :has()-valitsinta voidaan käyttää yleisten suunnitteluhaasteiden ratkaisemiseen.

Esimerkki 8: Responsiivisten navigaatiovalikoiden luominen

Voit käyttää :has()-valitsinta luodaksesi responsiivisia navigaatiovalikoita, jotka mukautuvat eri näyttökokoihin tiettyjen valikkokohtien olemassaolon perusteella.

Kuvittele tilanne, jossa haluat näyttää erilaisen navigaatiovalikon riippuen siitä, onko käyttäjä kirjautunut sisään vai ei. Jos hän on kirjautunut sisään, saatat näyttää profiili- ja uloskirjautumistoiminnot, jos ei, saatat näyttää sisäänkirjautumisen/rekisteröitymisen.

nav:has(.user-profile) { /* Tyylit sisäänkirjautuneille käyttäjille */ } nav:not(:has(.user-profile)) { /* Tyylit uloskirjautuneille käyttäjille */ }

Esimerkki 9: Korttikomponenttien tyylittely

:has()-valitsinta voidaan käyttää korttikomponenttien tyylittelyyn niiden sisällön perusteella. Voit esimerkiksi lisätä varjon kortille vain, jos se sisältää kuvan.

.card:has(img) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

Esimerkki 10: Dynaamisten teemojen toteuttaminen

Voit käyttää :has()-valitsinta dynaamisten teemojen toteuttamiseen käyttäjän mieltymysten tai järjestelmäasetusten perusteella. Voit esimerkiksi muuttaa sivun taustaväriä sen mukaan, onko käyttäjä ottanut käyttöön tumman tilan.

body:has(.dark-mode) { background-color: #333; color: #fff; }

Nämä esimerkit havainnollistavat :has()-valitsimen monipuolisuutta ja sen kykyä ratkaista laaja valikoima suunnitteluhaasteita.

CSS:n tulevaisuus: Mitä seuraavaksi?

:has()-valitsimen käyttöönotto merkitsee merkittävää edistysaskelta CSS:n kehityksessä. Se antaa kehittäjille mahdollisuuden luoda dynaamisempia, responsiivisempia ja ylläpidettävämpiä tyylisivuja vähemmällä riippuvuudella JavaScriptistä. Kun :has()-valitsimen selaintuki kasvaa jatkuvasti, voimme odottaa näkevämme entistä innovatiivisempia ja luovempia käyttötapoja tälle tehokkaalle valitsimelle.

Tulevaisuudessa CSS Working Group tutkii muita jännittäviä ominaisuuksia ja parannuksia, jotka laajentavat edelleen CSS:n ominaisuuksia. Näitä ovat muun muassa:

Pysymällä ajan tasalla uusimmista CSS-kehityksistä ja omaksumalla uusia ominaisuuksia, kuten :has(), kehittäjät voivat vapauttaa CSS:n täyden potentiaalin ja luoda todella poikkeuksellisia verkkokokemuksia.

Yhteenveto

:has()-valitsin on tehokas lisä CSS-työkalupakkiin, joka mahdollistaa vanhemman elementin valinnan ja avaa uusia mahdollisuuksia dynaamiselle ja responsiiviselle tyylittelylle. Vaikka selaimen yhteensopivuus ja suorituskykyvaikutukset on otettava huomioon, :has()-valitsimen käytön hyödyt puhtaamman, ylläpidettävämmän ja suorituskykyisemmän CSS-koodin saavuttamiseksi ovat kiistattomat. Ota tämä mullistava valitsin käyttöösi ja mullista CSS-tyylisi jo tänään!

Muista ottaa huomioon saavutettavuus ja tarjota varamekanismeja vanhemmille selaimille. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit hyödyntää :has()-valitsimen täyden potentiaalin ja luoda todella poikkeuksellisia verkkokokemuksia käyttäjille ympäri maailmaa.