CSS :has() Selektoriaus Įvaldymas: Atskleidžiant Tėvinio Elemento Pasirinkimo Galią

Daugelį metų CSS kūrėjai troško paprasto ir efektyvaus būdo pasirinkti tėvinius elementus pagal jų vaikinius elementus. Laukimas baigėsi! :has() pseudo-klasė pagaliau čia, ir ji iš esmės keičia tai, kaip rašome CSS. Šis galingas selektorius leidžia jums nukreipti tėvinį elementą, jei jame yra konkretus vaikinis elementas, atverdamas daugybę galimybių dinamiškam ir adaptyviam stiliavimui.

Kas yra :has() selektorius?

:has() pseudo-klasė yra CSS santykinė pseudo-klasė, kuri kaip argumentą priima selektorių sąrašą. Ji pasirenka elementą, jei bent vienas iš selektorių sąraše atitinka bent vieną elementą tarp to elemento palikuonių. Paprasčiau tariant, ji patikrina, ar tėvinis elementas turi konkretų vaikinį elementą, ir jei taip, tėvinis elementas yra pasirenkamas.

Pagrindinė sintaksė yra:

tėvinis:has(vaikinis) { /* CSS taisyklės */ }

Tai pasirenka tėvinį elementą tik tuo atveju, jei jame yra bent vienas vaikinis elementas.

Kodėl :has() yra toks svarbus?

Tradiciškai CSS galimybės pasirinkti tėvinius elementus pagal jų vaikinius elementus buvo ribotos. Šis apribojimas dažnai reikalavo sudėtingų JavaScript sprendimų ar apeities būdų, norint pasiekti dinamišką stiliavimą. :has() selektorius pašalina šių sudėtingų metodų poreikį, leisdamas rašyti švaresnį, lengviau prižiūrimą ir našesnį CSS kodą.

Štai kodėl :has() keičia žaidimo taisykles:

• Supaprastintas stiliavimas: Sudėtingos stiliavimo taisyklės, kurioms anksčiau reikėjo JavaScript, dabar gali būti pasiektos naudojant gryną CSS.
• Geresnė priežiūra: Švarus ir glaustas CSS kodas yra lengviau suprantamas, derinamas ir prižiūrimas.
• Padidintas našumas: Naudojant natūralius CSS selektorius paprastai pasiekiamas geresnis našumas, palyginti su JavaScript pagrįstais sprendimais.
• Didesnis lankstumas: :has() selektorius suteikia daugiau lankstumo kuriant dinamiškus ir adaptyvius dizainus.

Pagrindiniai :has() selektoriaus pavyzdžiai

Pradėkime nuo kelių paprastų pavyzdžių, iliustruojančių :has() selektoriaus galią.

1 pavyzdys: Tėvinio Div stiliavimas pagal paveikslėlio buvimą

Tarkime, norite pridėti rėmelį <div> elementui tik tada, jei jame yra <img> elementas:

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

Ši CSS taisyklė pritaikys mėlyną rėmelį bet kuriam <div> elementui, kuriame yra bent vienas <img> elementas.

2 pavyzdys: Sąrašo elemento stiliavimas pagal Span buvimą

Tarkime, turite elementų sąrašą ir norite paryškinti sąrašo elementą, jei jame yra <span> elementas su konkrečia klase:

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

Ši CSS taisyklė pakeis bet kurio <li> elemento, kuriame yra <span> su klase „highlight“, fono spalvą į geltoną.

3 pavyzdys: Formos etiketės stiliavimas pagal įvesties lauko galiojimą

Galite naudoti :has() norėdami stilizuoti formos etiketę pagal tai, ar su ja susijęs įvesties laukas yra galiojantis ar negaliojantis (kartu su :invalid pseudo-klase):

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

Dėl šios taisyklės etiketė taps raudona ir paryškinta, jei iškart po jos einantis įvesties laukas yra negaliojantis.

Pažangūs :has() selektoriaus naudojimo būdai

:has() selektorius tampa dar galingesnis, kai derinamas su kitais CSS selektoriais ir pseudo-klasėmis. Štai keletas pažangių naudojimo atvejų:

4 pavyzdys: Tuščių elementų pasirinkimas

Galite naudoti :not() pseudo-klasę kartu su :has(), kad pasirinktumėte elementus, kurie *neturi* konkretaus vaikinio elemento. Pavyzdžiui, norėdami stilizuoti div elementus, kuriuose *nėra* paveikslėlių:

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

Tai pritaikys šviesiai pilką foną bet kuriam <div> elementui, kuriame nėra <img> elemento.

5 pavyzdys: Sudėtingų maketų kūrimas

:has() selektorius gali būti naudojamas kuriant dinamiškus maketus, atsižvelgiant į konteinerio turinį. Pavyzdžiui, galite keisti tinklelio maketą pagal tai, ar tinklelio langelyje yra tam tikro tipo elementas.

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

Dėl to tinklelio elementas užims du stulpelius, jei jame yra paveikslėlis.

6 pavyzdys: Dinamiškas formų stiliavimas

Galite naudoti :has() norėdami dinamiškai stilizuoti formos elementus pagal jų būseną (pvz., ar jie sufokusuoti, užpildyti ar galiojantys).

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

Tai pridės mėlyną šešėlį, kai įvesties laukas bus sufokusuotas, žalią rėmelį, jei įvestis galiojanti, ir raudoną rėmelį, jei įvestis negaliojanti.

7 pavyzdys: Stiliavimas pagal vaikinių elementų skaičių

Nors :has() tiesiogiai neskaičiuoja vaikinių elementų skaičiaus, galite jį derinti su kitais selektoriais ir CSS savybėmis, kad pasiektumėte panašų efektą. Pavyzdžiui, galite naudoti :only-child norėdami stilizuoti tėvinį elementą, jei jis turi tik vieną tam tikro tipo vaikinį elementą.

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

Tai stilizuos <div> šviesiai žaliu fonu tik tuo atveju, jei jame yra vienas <p> elementas kaip tiesioginis vaikinis elementas.

Suderinamumas su naršyklėmis ir atsarginiai variantai

2023 metų pabaigoje :has() selektorius puikiai palaikomas moderniose naršyklėse, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau prieš diegiant jį gamybinėje aplinkoje, ypač jei reikia palaikyti senesnes naršykles, labai svarbu patikrinti suderinamumą Can I use svetainėje.

Štai suderinamumo aspektų apžvalga:

• Modernios naršyklės: Puikus palaikymas naujausiose Chrome, Firefox, Safari ir Edge versijose.
• Senesnės naršyklės: Nėra palaikymo senesnėse naršyklėse (pvz., Internet Explorer).

Atsarginių variantų pateikimas

Jei reikia palaikyti senesnes naršykles, turėsite pateikti atsarginius variantus. Štai kelios strategijos:

• JavaScript: Naudokite JavaScript, kad nustatytumėte, ar naršyklė palaiko :has(), ir prireikus pritaikytumėte alternatyvų stilių.
• Savybių užklausos: Naudokite CSS savybių užklausas (@supports), kad pateiktumėte skirtingus stilius, atsižvelgiant į naršyklės palaikymą.
• Laipsniškas tobulinimas: Pradėkite nuo pagrindinio, veikiančio dizaino, kuris veikia visose naršyklėse, ir tada laipsniškai tobulinkite dizainą naršyklėms, kurios palaiko :has().

Štai savybių užklausos naudojimo pavyzdys:

.parent { /* Pagrindinis stilius visoms naršyklėms */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* Patobulintas stilius naršyklėms, kurios palaiko :has() */ border: 3px solid blue; } }

Šis kodas pritaikys juodą rėmelį .parent elementui visose naršyklėse. Naršyklėse, kurios palaiko :has(), jis pritaikys mėlyną rėmelį, jei .parent elemente yra paveikslėlis.

Našumo aspektai

Nors :has() suteikia didelių pranašumų, svarbu atsižvelgti į galimą poveikį našumui, ypač kai jis naudojamas plačiai arba su sudėtingais selektoriais. Naršyklėms reikia įvertinti selektorių kiekvienam puslapio elementui, o tai gali tapti skaičiavimams imliu procesu.

Štai keletas patarimų, kaip optimizuoti :has() našumą:

• Naudokite paprastus selektorius: Venkite pernelyg sudėtingų selektorių :has() pseudo-klasės viduje.
• Apribokite taikymo sritį: Taikykite :has() konkretiems elementams ar konteineriams, o ne globaliai.
• Testuokite našumą: Naudokite naršyklės kūrėjo įrankius, kad stebėtumėte savo CSS taisyklių našumą ir nustatytumėte galimas kliūtis.

Dažniausios klaidos, kurių reikia vengti

Dirbant su :has() selektoriumi, lengva padaryti klaidų, kurios gali lemti netikėtus rezultatus. Štai keletas dažniausių spąstų, kurių reikia vengti:

• Specifiškumo problemos: Įsitikinkite, kad jūsų :has() taisyklės turi pakankamai specifiškumo, kad galėtų perrašyti kitas CSS taisykles. Naudokite tuos pačius specifiškumo trikčių šalinimo veiksmus, kaip ir visada.
• Neteisingas įdėjimas: Dukart patikrinkite elementų įdėjimą, kad įsitikintumėte, jog :has() selektorius nukreiptas į teisingą tėvinį elementą.
• Pernelyg sudėtingi selektoriai: Venkite naudoti pernelyg sudėtingus selektorius :has() pseudo-klasėje, nes tai gali paveikti našumą.
• Prielaida apie tiesioginius vaikinius elementus: Atminkite, kad :has() tikrina *bet kurį* palikuonį, o ne tik tiesioginius vaikinius elementus. Naudokite tiesioginio vaikinio elemento jungiklį (>), jei reikia pasirinkti tik tiesioginius vaikinius elementus (pvz., div:has(> img)).

Geriausios :has() naudojimo praktikos

Norėdami maksimaliai išnaudoti :has() selektoriaus privalumus ir išvengti galimų problemų, laikykitės šių geriausių praktikų:

• Naudokite apgalvotai: Naudokite :has() tik tada, kai tai suteikia aiškų pranašumą prieš kitas CSS technikas ar JavaScript sprendimus.
• Laikykitės paprastumo: Rinkitės paprastus, skaitomus selektorius, o ne sudėtingus ir painius.
• Testuokite kruopščiai: Išbandykite savo CSS taisykles skirtingose naršyklėse ir įrenginiuose, kad įsitikintumėte, jog jos veikia kaip tikėtasi.
• Dokumentuokite savo kodą: Pridėkite komentarus prie savo CSS kodo, kad paaiškintumėte savo :has() taisyklių paskirtį ir funkcionalumą.
• Atsižvelkite į prieinamumą: Užtikrinkite, kad jūsų :has() naudojimas neturėtų neigiamo poveikio prieinamumui. Pavyzdžiui, nepasikliaukite vien tik stiliaus pokyčiais, kuriuos sukelia :has(), kad perteiktumėte svarbią informaciją; naudokite ARIA atributus ar alternatyvius mechanizmus neįgaliesiems vartotojams.

Realūs pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą realių pavyzdžių, kaip :has() selektorius gali būti naudojamas sprendžiant įprastus dizaino iššūkius.

8 pavyzdys: Adaptyvių naršymo meniu kūrimas

Galite naudoti :has() kurdami adaptyvius naršymo meniu, kurie prisitaiko prie skirtingų ekrano dydžių, atsižvelgiant į konkrečių meniu elementų buvimą.

Įsivaizduokite scenarijų, kai norite rodyti skirtingą naršymo meniu priklausomai nuo to, ar vartotojas yra prisijungęs, ar ne. Jei jie prisijungę, galite rodyti profilio ir atsijungimo veiksmus, jei ne - prisijungimo/registracijos parinktis.

nav:has(.user-profile) { /* Stiliai prisijungusiems vartotojams */ } nav:not(:has(.user-profile)) { /* Stiliai neprisijungusiems vartotojams */ }

9 pavyzdys: Kortelių komponentų stiliavimas

:has() selektorius gali būti naudojamas stilizuoti kortelių komponentus pagal jų turinį. Pavyzdžiui, galite pridėti šešėlį kortelei tik tuo atveju, jei joje yra paveikslėlis.

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

10 pavyzdys: Dinamiškų temų įgyvendinimas

Galite naudoti :has() norėdami įgyvendinti dinamiškas temas, pagrįstas vartotojo nuostatomis ar sistemos nustatymais. Pavyzdžiui, galite pakeisti puslapio fono spalvą priklausomai nuo to, ar vartotojas įjungė tamsųjį režimą.

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

Šie pavyzdžiai iliustruoja :has() selektoriaus universalumą ir jo gebėjimą spręsti įvairius dizaino iššūkius.

CSS Ateitis: Kas toliau?

:has() selektoriaus įdiegimas žymi svarbų žingsnį į priekį CSS evoliucijoje. Jis suteikia kūrėjams galimybę kurti dinamiškesnius, adaptyvesnius ir lengviau prižiūrimus stilių aprašus, mažiau priklausomus nuo JavaScript. Kadangi naršyklių palaikymas :has() toliau auga, galime tikėtis dar daugiau inovatyvių ir kūrybiškų šio galingo selektoriaus panaudojimo būdų.

Žvelgiant į ateitį, CSS darbo grupė tiria kitas įdomias funkcijas ir patobulinimus, kurie dar labiau išplės CSS galimybes. Tarp jų:

• Konteinerių užklausos: Leidžia komponentams pritaikyti savo stilių pagal jų konteinerio, o ne peržiūros srities dydį.
• Kaskados sluoksniai: Suteikia daugiau kontrolės kaskadai ir CSS taisyklių specifiškumui.
• Pažangesni selektoriai: Pristatomi nauji selektoriai, galintys pasirinkti elementus pagal jų atributus, turinį ir padėtį dokumento medyje.

Būdami atnaujinti su naujausiais CSS pokyčiais ir priimdami naujas funkcijas, tokias kaip :has(), kūrėjai gali atskleisti visą CSS potencialą ir sukurti išties išskirtines interneto patirtis.

Išvada

:has() selektorius yra galingas papildymas CSS įrankių rinkiniui, leidžiantis pasirinkti tėvinius elementus ir atveriantis naujas galimybes dinamiškam ir adaptyviam stiliavimui. Nors labai svarbu atsižvelgti į naršyklių suderinamumą ir našumo pasekmes, :has() naudojimo privalumai, siekiant švaresnio, lengviau prižiūrimo ir našesnio CSS kodo, yra neabejotini. Priimkite šį žaidimą keičiantį selektorių ir pakeiskite savo CSS stiliavimą jau šiandien!

Nepamirškite atsižvelgti į prieinamumą ir pateikti atsarginių mechanizmų senesnėms naršyklėms. Laikydamiesi šiame vadove aprašytų geriausių praktikų, galite išnaudoti visą :has() selektoriaus potencialą ir sukurti išties išskirtines interneto patirtis vartotojams visame pasaulyje.