Il potere di :has() nei CSS

Ciao a tutti voi, meravigliosi sviluppatori là fuori! In questo post esploreremo l'uso di :has() nel tuo prossimo progetto web. :has() è relativamente nuovo ma ha guadagnato popolarità nella comunità front-end offrendo il controllo su vari elementi nell'interfaccia utente. Diamo un'occhiata a cos'è la pseudoclasse e come possiamo utilizzarla.

Sintassi

I :has() La pseudo-classe CSS aiuta a definire lo stile di un elemento se una qualsiasi delle cose che stiamo cercando al suo interno viene trovata e contabilizzata. È come dire "Se c'è qualcosa di specifico all'interno di questa scatola, allora modellala in questo modo E solo in questo modo."

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

“Il funzionale :has() La pseudo-classe CSS rappresenta un elemento se uno qualsiasi dei relativi selettori passati come argomento corrisponde ad almeno un elemento quando è ancorato a questo elemento. Questa pseudo-classe presenta un modo per selezionare un elemento genitore o un elemento fratello precedente rispetto a un elemento di riferimento prendendo come argomento un elenco di selettori relativo.

Per una spiegazione più solida, ND lo fa perfettamente

Il problema dello stile

Negli anni passati non avevamo modo di definire uno stile per un elemento genitore basato su un figlio diretto di quel genitore con CSS o un elemento basato su un altro elemento. Se dovessimo farlo, dovremmo utilizzare alcuni JavaScript e attivare/disattivare le classi in base alla struttura dell'HTML. :has() risolto quel problema.

Supponiamo che tu abbia un elemento di livello 1 dell'intestazione (h1) ovvero il titolo di un post o qualcosa del genere nella pagina di un elenco di blog e quindi hai un'intestazione di livello 2 (h2) che lo segue direttamente. Questo h2 potrebbe essere un sottotitolo per il post. Se quello h2 è presente, importante e direttamente dopo il h1, potresti voler far risaltare h1. Prima avresti dovuto scrivere una funzione JS.

Stile vecchia scuola – JavaScript

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

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

Questa funzione JS cerca tutti gli h1 che hanno un file h2 procedendo e applicando una classe di contenuti evidenziati per creare il file h1 distinguersi come un articolo importante.

Nuovo e migliorato con i moderni CSS in arrivo! Le capacità di ciò che possiamo fare nel browser hanno fatto molta strada. Ora possiamo sfruttare i CSS per fare cose che tradizionalmente dovremmo fare con JavaScript, non tutto, ma alcune cose.

Nuovo modo di scuola – CSS

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

Mettici sopra un po' di :has()!

Ora puoi usare :has() per ottenere la stessa cosa ottenuta dalla funzione JS. Questo CSS verifica la presenza di qualsiasi h1 e utilizza il file combinatore fratello controllando la presenza di un h2 che lo segue immediatamente e aggiunge il colore blu al testo. Di seguito sono riportati un paio di casi d'uso di quando :has() può tornare utile.

:ha il selettore Esempio 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;
}

:ha il selettore Esempio 2

Molte volte noi, come lavoratori del web, manipoliamo o lavoriamo con le immagini. Potremmo usare strumenti che Nuvoloso consente di utilizzare varie trasformazioni sulle nostre immagini, ma di solito vogliamo aggiungere ombre esterne, raggi del bordo e didascalie (da non confondere con il testo alternativo in un attributo alt).

L'esempio seguente sta usando :has() per vedere se una figura o un'immagine ha un elemento figcaption e, in tal caso, applica uno sfondo e un raggio del bordo per far risaltare l'immagine.

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

Posso :has() che?

Potete vederlo :has() ha un ottimo supporto su tutti i browser moderni.

:has() nella comunità!

Ho contattato la mia rete su Twitter per vedere come stavano utilizzando i miei colleghi :has() nel loro lavoro quotidiano e questo è ciò che hanno da dire al riguardo.

"Un esempio che ho è lo styling di un SVG specifico da un pacchetto di terze parti in @saucedopen perché non potevo modellarlo direttamente.

Questo è ciò Nick Taylor da OpenSaced aveva da dire sull'utilizzo :has().

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

Lol l'ultima volta che l'ho usato stavo costruendo la funzionalità della tastiera in una visualizzazione ad albero, quindi avevo bisogno di rilevare stati e classi di elementi fratelli, ma non era ancora in Firefox, quindi ho dovuto trovare un'altra soluzione. 🫠

Abbazia Perini da Nexcor Tecnologie per la sicurezza alimentare, Inc.

È bello vedere come i membri della comunità utilizzano i moderni CSS per risolvere i problemi del mondo reale, e anche un ringraziamento ad Abbey che li utilizza per motivi di accessibilità!

Cose da tenere in mente

Ci sono alcuni punti chiave da tenere a mente durante l'utilizzo :has() Punti elenco a cui si fa riferimento MDN.

• La pseudo-classe assume la specificità del selettore più specifico nel suo argomento
• Se l' :has() la pseudo-classe stessa non è supportata in un browser, l'intero blocco selettore fallirà a meno che :has() si trova in un elenco di selezione indulgente, come in :is() ed :where()
• I :has() la pseudo-classe non può essere annidata all'interno di un'altra :has() 
• Anche gli pseudo-elementi non sono selettori validi all'interno :has() e gli pseudo-elementi non sono ancore valide per :has()

Conclusione

Sfruttare la potenza dei CSS, comprese funzionalità avanzate come :has() pseudo-classe, ci consente di creare esperienze web eccezionali. I punti di forza dei CSS risiedono nella sua cascata e specificità... la parte migliore, che ci consente di sfruttare tutto il suo potenziale. Abbracciando le funzionalità dei CSS, possiamo portare avanti la progettazione e lo sviluppo web, sbloccando nuove possibilità e creando interfacce utente rivoluzionarie.

Collegamento:

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• PlatoData.Network Generativo verticale Ai. Potenzia te stesso. Accedi qui.
• PlatoAiStream. Intelligenza Web3. Conoscenza amplificata. Accedi qui.
• PlatoneESG. Carbonio, Tecnologia pulita, Energia, Ambiente, Solare, Gestione dei rifiuti. Accedi qui.
• Platone Salute. Intelligence sulle biotecnologie e sulle sperimentazioni cliniche. Accedi qui.
• Fonte: https://css-tricks.com/the-power-of-has-in-css/