- :has()
pseudoluokka on, kädet alaspäin, suosikkini uusi CSS-ominaisuus. Tiedän, että se koskee myös monia teistä, ainakin ne teistä, jotka osallistuivat CSS-tilan kyselyyn. Kyky kirjoittaa valitsimet ylösalaisin antaa meille enemmän supervoimia, joita en olisi koskaan uskonut mahdolliseksi.
Sanon "lisää supervoimia", koska joukko superälykkäitä ihmisiä on jo julkaissut todella hämmästyttäviä fiksuja ideoita, kuten:
Tämä artikkeli ei ole lopullinen opas :has()
. Se ei myöskään tarkoita sitä, että jouduttiin toistamaan sitä, mitä on jo sanottu. Olen vain minä (hei 👋) hyppään kelkkaan hetkeksi jakaakseni joitain tapoja, joita todennäköisimmin käytän :has()
jokapäiväisessä työssäni… eli kun Firefox tukee sitä virallisesti joka on välitön.
Kun se tapahtuu, voit lyödä vetoa, että aloitan käytön :has()
levällään. Tässä on joitain tosielämän esimerkkejä asioista, joita olen rakentanut äskettäin ja ajatellut itsekseni: "Hei, tästä tulee niin paljon mukavampaa kerran :has()
on täysin tuettu."
Vältä kurkottamista JavaScript-komponentin ulkopuolelle
Oletko koskaan rakentanut interaktiivista komponenttia, jonka täytyy joskus vaikuttaa tyyleihin jossain muualla sivulla? Otetaan seuraava esimerkki missä <nav>
on mega-valikkoja avaamalla sen värit muuttuvat <header>
sisältöä sen yläpuolella.
Minusta tuntuu, että minun on tehtävä tällainen koko ajan.
Tämä esimerkki on sivustolle tekemäni React-komponentti. Minun piti päästä sivun React-osan ulkopuolelle document.querySelector(...)
ja vaihda luokka päälle <body>
, <header>
tai muu komponentti. Se ei ole maailmanloppu, mutta se tuntuu varmasti vähän hassulta. Jopa täysin React-sivustossa (esimerkiksi Next.js-sivustossa), minun on valittava hallinnan välillä menuIsOpen
tilaa paljon ylempänä komponenttipuussa tai tee sama DOM-elementtivalinta – mikä ei ole kovin React-y.
Kanssa :has()
, ongelma poistuu:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Enää ei tarvitse puskea DOM:n muiden osien kanssa JavaScript-komponenteissani!
Parempi pöydän raidoitus UX
Vaihtoehtoisten rivien "raitojen" lisääminen taulukoihisi voi olla mukava parannus käyttökokemukseen. Ne auttavat silmiäsi seuraamaan, millä rivillä olet, kun skannaat taulukkoa.
Mutta kokemukseni mukaan tämä ei toimi hyvin pöydissä, joissa on vain kaksi tai kolme riviä. Jos sinulla on esimerkiksi taulukko, jossa on kolme riviä <tbody>
ja "raitaat" joka "parillisen" rivin, saatat saada vain yhden raidan. Se ei todellakaan ole mallin arvoinen, ja käyttäjät saattavat pohtia, mikä tuossa korostetussa rivissä on niin erikoista.
Käyttämällä tätä tekniikkaa missä Bramus käyttää :has()
soveltaa tyylejä lasten lukumäärän perusteella, voimme käyttää taulukkoraitoja, kun rivejä on enemmän kuin kolme:
Mitä tehdä ihastuttavammaksi? Voit myös päättää tehdä tämän vain, jos taulukossa on myös vähintään tietty määrä sarakkeita:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Poista ehdollinen luokkalogiikka malleista
Minun on usein vaihdettava sivun asettelua sen mukaan, mitä sivulla on. Otetaan seuraava ruudukkoasettelu, jossa pääsisällön sijoitus muuttaa ruudukkoalueita sen mukaan, onko siellä sivupalkkia.
Se saattaa riippua siitä, onko CMS:ssä asetettu sisarussivuja. Tavallisesti tekisin tämän mallilogiikalla ehdollisesti lisättäväksi BEM-muuntajaluokat asettelun kääreeseen ottaaksesi huomioon molemmat asettelut. CSS saattaa näyttää suunnilleen tältä (responsiiviset säännöt ja muut asiat jätetty pois lyhyyden vuoksi):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
CSS:n kannalta tämä on tietysti täysin kunnossa. Mutta se tekee mallikoodista hieman sotkuisen. Mallikielestäsi riippuen voi olla melko rumaa lisätä ehdollisesti joukko luokkia, varsinkin jos sinun on tehtävä tämä myös monilla lapsielementeillä.
Vertaa sitä a :has()
-perustainen lähestymistapa:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
Rehellisesti sanottuna se ei ole paljon parempi CSS: n kannalta. Mutta ehdollisten muokkausluokkien poistaminen HTML-mallista on hieno voitto, jos minulta kysytään.
Mikrosuunnittelupäätöksiä on helppo miettiä :has()
- kuin kortti, kun siinä on kuva - mutta uskon, että siitä on todella hyötyä myös näissä makroasettelumuutoksissa.
Parempi spesifisyyden hallinta
Jos luet viimeinen artikkeli, tiedät, että olen tarkkuuden kaipuu. Jos, kuten minä, et halua spesifisyytesi putoavan lisäämisen yhteydessä :has()
ja :not()
kaikissa tyyleissäsi, muista käyttää :where()
.
Tämä johtuu erityisyydestä :has()
perustuu tarkin elementti argumenttiluettelossaan. Joten jos sinulla on jotain tunnuksen kaltaista, valitsinta on vaikea ohittaa sarjassa.
Toisaalta, erikoisuus :where()
on aina nolla, ei koskaan lisää spesifisyyttä.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Tulevaisuus on valoisa
Nämä ovat vain muutamia asioita, joita en malta odottaa, että pääsen käyttämään tuotannossa. CSS-Tricks Almanakissa on myös joukko esimerkkejä. Mitä odotat tekeväsi :has()
? Millaisiin tosielämän esimerkkeihin olet törmännyt :has()
olisiko ollut täydellinen ratkaisu?
- SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
- Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
- Lähde: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- kyky
- pystyy
- Meistä
- edellä
- Tili
- vaikuttaa
- Kaikki
- jo
- aina
- hämmästyttävä
- ja
- Toinen
- käyttää
- lähestymistapa
- alueet
- perustelu
- artikkeli
- perustua
- koska
- Veto
- Paremmin
- välillä
- Bitti
- puhallus
- rakennettu
- Nippu
- Voi saada
- kortti
- vesiputouksia
- tietty
- muuttaa
- Muutokset
- lapsi
- Valita
- luokka
- luokat
- Cm
- koodi
- Pylväät
- komponentti
- sisältää
- pitoisuus
- voisi
- Kurssi
- CSS
- päätökset
- lopullinen
- Riippuen
- Malli
- ei
- tekee
- DOM
- Dont
- alas
- elementtejä
- erityisesti
- jne.
- Jopa
- EVER
- Joka
- esimerkki
- Esimerkit
- experience
- katse
- Suosikki
- Ominaisuus
- harvat
- loppu
- Firefox
- jälkeen
- Eteenpäin
- alkaen
- täysin
- saada
- antaa
- Goes
- menee
- suuri
- ruudukko
- grid-template-alueet
- ohjaavat
- tapahtua
- ottaa
- auttaa
- tätä
- hi
- korkeampi
- Korostettu
- HTML
- HTTPS
- Minä
- ideoita
- kuva
- parannus
- in
- vuorovaikutteinen
- IT
- JavaScript
- vain yksi
- Pitää
- laji
- Tietää
- Kieli
- Sukunimi
- Layout
- Todennäköisesti
- vähän
- katso
- näköinen
- Erä
- Makro
- tehty
- tärkein
- tehdä
- toimitusjohtaja
- monet
- ehkä
- hetki
- lisää
- eniten
- mozilla
- Tarve
- tarpeet
- Uusi
- seuraava
- Next.js
- Normaalisti
- numero
- Virallisesti
- ONE
- avaaminen
- Muut
- ulkopuolella
- osa
- erityinen
- osat
- Kuvio
- Ihmiset
- täydellinen
- Paikka
- Platon
- Platonin tietotieto
- PlatonData
- mahdollinen
- esittää
- aika
- Ongelma
- tuotanto
- julkaistu
- tavoittaa
- suhtautua
- Lue
- todellinen maailma
- äskettäin
- poistamalla
- herkkä
- RIVI
- säännöt
- ajaa
- Said
- sama
- skannata
- valinta
- setti
- Jaa:
- paikka
- fiksu
- So
- ratkaisu
- jonkin verran
- jotain
- jonnekin
- erityinen
- erityinen
- erityispiirteet
- Alkaa
- Osavaltio
- raita
- Stripes
- tyyli
- suuri
- Tuetut
- taulukko
- ottaa
- TD
- sapluuna
- -
- Valtion
- maailma
- asia
- asiat
- ajatus
- kolmella
- kauttaaltaan
- että
- tonni
- liian
- TÄYSIN
- raita
- totta
- yläpuoli
- us
- käyttää
- Käyttäjät
- ux
- odottaa
- tavalla
- Mitä
- onko
- joka
- KUKA
- voittaa
- Mietitkö
- Referenssit
- maailman-
- arvoinen
- olisi
- kirjoittaa
- Voit
- Sinun
- zephyrnet