:has():n teho CSS:ssä

Hei kaikki upeat kehittäjät! Tässä postauksessa aiomme tutkia sen käyttöä :has() seuraavassa verkkoprojektissasi. :has() on suhteellisen uusi, mutta se on saavuttanut suosiota käyttöliittymäyhteisössä antamalla hallita käyttöliittymäsi eri elementtejä. Katsotaanpa mitä pseudoluokka on ja miten voimme hyödyntää sitä.

Syntaksi

- :has() CSS-pseudoluokka auttaa elementin tyylistämisessä, jos jokin sen sisältä etsimistämme asioista löydetään ja huomioidaan. Se on kuin sanoisi, "Jos tässä laatikossa on jotain erityistä, muotoile laatikko tällä tavalla JA vain tällä tavalla."

:has(<direct-selector>) {
  /* ... */
}

"Toiminta :has() CSS-pseudoluokka edustaa elementtiä, jos jokin argumenttina välitetyistä suhteellisista valitsimista vastaa vähintään yhtä elementtiä, kun se on ankkuroitu tätä elementtiä vasten. Tämä pseudoluokka esittää tavan valita yläelementti tai edellinen sisarelementti suhteessa viiteelementtiin ottamalla argumentiksi suhteellinen valitsinluettelo."

Jos haluat tarkemman selityksen, DND tekee sen täydellisesti

Muotoiluongelma

Aikaisempina vuosina meillä ei ollut tapaa muotoilla ylätason elementtiä, joka perustui kyseisen vanhemman CSS:n suoraan aliryhmään tai johonkin toiseen elementtiin. Siinä tapauksessa, että meidän täytyisi tehdä niin, meidän olisi käytettävä joitain JavaScriptiä ja kytkettävä luokat päälle/pois HTML-rakenteen perusteella. :has() ratkaisi sen ongelman.

Oletetaan, että sinulla on otsikkotason 1 elementti (h1), joka on blogiluettelosivulla olevan postauksen otsikko tai jotain vastaavaa, ja sitten sinulla on otsikkotaso 2 (h2), joka seuraa sitä suoraan. Tämä h2 voisi olla viestin alaotsikko. Jos se h2 on läsnä, tärkeä ja välittömästi sen jälkeen h1, haluat ehkä saada h1:n erottumaan joukosta. Ennen kuin sinun olisi pitänyt kirjoittaa JS-funktio.

Old School Way - JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Tämä JS-toiminto etsii kaikkia h1:itä, joissa on a h2 jatkamalla sitä ja käyttämällä korostussisältöluokkaa h1 erottua tärkeänä artikkelina.

Uutta ja parannettua nykyajan CSS:llä, joka on tulossa kuumana! Selaimen ominaisuudet ovat kehittyneet pitkälle. Voimme nyt hyödyntää CSS:ää tehdäksemme asioita, joita meillä perinteisesti on tehtävä JavaScriptin kanssa, ei kaikkea, mutta joitain asioita.

Uusi koulutapa – CSS

h1:has(+ h2) {
    color: blue;
}

Heitä jotain :has() päälle!

Nyt voit käyttää :has() saavuttaakseen saman asian kuin JS-funktio teki. Tämä CSS tarkistaa minkä tahansa h1:n ja käyttää sisarusten kombinaattori tarkistaa h2:n, joka seuraa sitä välittömästi, ja lisää tekstiin sinisen värin. Alla on pari käyttötapausta, jolloin :has() voi olla kätevä.

:has Selector Esimerkki 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:has Selector Esimerkki 2

Usein me verkon työntekijät käsittelemme kuvia tai työskentelemme niiden kanssa. Voisimme käyttää työkaluja Pilvinen mahdollistaa erilaisten muunnosten hyödyntämisen kuvissamme, mutta yleensä haluamme lisätä varjoja, reunasäteitä ja kuvatekstejä (jota ei pidä sekoittaa vaihtoehtoiseen tekstiin alt-attribuutissa).

Alla oleva esimerkki käyttää :has() nähdäksesi, onko kuviossa tai kuvassa kuvatekstielementti, ja jos on, se lisää taustaa ja reunasäteen, jotta kuva erottuu.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Voinko :has() että?

Näet sen :has() on suuri tuki nykyaikaisissa selaimissa.

:has() yhteisössä!

Otin yhteyttä verkostooni Twitterissä nähdäkseni, kuinka ikätoverini käyttävät :has() jokapäiväisessä työssään, ja tämä on se, mitä heillä oli sanottavaa siitä.

"Yksi esimerkki minulla on tietyn SVG:n muotoilu kolmannen osapuolen paketista @saucedopen koska en voinut muotoilla sitä suoraan."

Tämä on mitä Nick Taylor alkaen OpenSauced piti sanoa käytöstä :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

Lol, kun viimeksi käytin sitä, rakensin näppäimistön toimintoja puunäkymään, joten minun piti havaita sisarelementtien tilat ja luokat, mutta se ei ollut vielä Firefoxissa, joten minun piti löytää toinen ratkaisu. 🫠

Abbey Perini alkaen Nexcor Food Safety Technologies, Inc.

On hienoa nähdä, kuinka yhteisön jäsenet käyttävät nykyaikaista CSS:ää todellisen maailman ongelmien ratkaisemiseen, ja myös huuto Abbeylle, joka käyttää sitä saavutettavuussyistä!

Muistettavaa

On muutamia keskeisiä seikkoja, jotka tulee muistaa käytettäessä :has() Luettelokohdat viitataan kohteesta MDN.

• Pseudoluokka ottaa käyttöön tarkimman valitsimen spesifisyyden argumentissaan
• Jos :has() Itse pseudoluokkaa ei tueta selaimessa, koko valitsinlohko epäonnistuu, ellei :has() on anteeksiantavassa valintaluettelossa, kuten in :is() ja :where()
• - :has() pseudoluokkaa ei voi upottaa toiseen :has() 
• Pseudoelementit eivät myöskään ole kelvollisia valitsimia sisällä :has() ja pseudoelementit eivät ole kelvollisia ankkureita :has()

Yhteenveto

CSS:n tehon hyödyntäminen, mukaan lukien edistyneet ominaisuudet, kuten :has() pseudoluokka, antaa meille mahdollisuuden luoda poikkeuksellisia verkkokokemuksia. CSS:n vahvuudet piilevät sen kaskadissa ja spesifisyydessä… paras osa, jonka avulla voimme hyödyntää sen täyden potentiaalin. Hyväksymällä CSS:n ominaisuudet voimme viedä web-suunnittelua ja -kehitystä eteenpäin, avata uusia mahdollisuuksia ja luoda uraauurtavia käyttöliittymiä.

Linkit:

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• PlatoData.Network Vertical Generatiivinen Ai. Vahvista itseäsi. Pääsy tästä.
• PlatoAiStream. Web3 Intelligence. Tietoa laajennettu. Pääsy tästä.
• PlatoESG. hiili, CleanTech, energia, ympäristö, Aurinko, Jätehuolto. Pääsy tästä.
• PlatonHealth. Biotekniikan ja kliinisten kokeiden älykkyys. Pääsy tästä.
• Lähde: https://css-tricks.com/the-power-of-has-in-css/