Il :has()
pseudo-classe è, senza dubbio, la mia nuova funzionalità CSS preferita. So che lo è anche per molti di voi, almeno quelli di voi che hanno partecipato al sondaggio State of CSS. La capacità di scrivere i selettori capovolti ci dà più superpoteri che non avrei mai creduto possibili.
Dico "più superpoteri" perché ci sono già state un sacco di idee intelligenti davvero sorprendenti pubblicate da un gruppo di persone super intelligenti, come:
Questo articolo non è una guida definitiva a :has()
. Inoltre non è qui per rigurgitare ciò che è già stato detto. Sono solo io (ciao 👋) che salgo sul carro per un momento per condividere alcuni dei modi che più probabilmente userò :has()
nel mio lavoro quotidiano... ovvero, una volta supportato ufficialmente da Firefox che è imminente.
Quando ciò accadrà, puoi scommettere che inizierò a usarlo :has()
dappertutto. Ecco alcuni esempi reali di cose che ho costruito di recente e ho pensato tra me e me: "Accidenti, sarà molto più bello una volta :has()
è pienamente supportato.”
Evita di dover raggiungere l'esterno del tuo componente JavaScript
Hai mai creato un componente interattivo che a volte ha bisogno di influenzare gli stili da qualche altra parte nella pagina? Prendi il seguente esempio, dove <nav>
è un Menu mega, e aprendolo cambia i colori del <header>
contenuto sopra di esso.
Sento di dover fare questo genere di cose sempre.
Questo particolare esempio è un componente React che ho creato per un sito. Ho dovuto "raggiungere l'esterno" con la parte React della pagina document.querySelector(...)
e attiva o disattiva una classe su <body>
, <header>
, o un altro componente. Non è la fine del mondo, ma sicuramente fa un po' schifo. Anche in un sito completamente React (un sito Next.js, ad esempio), dovrei scegliere tra la gestione di a menuIsOpen
indica molto più in alto nell'albero dei componenti o fai la stessa selezione dell'elemento DOM, che non è molto React-y.
Con :has()
, il problema scompare:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Non dovrai più giocherellare con altre parti del DOM nei miei componenti JavaScript!
Migliore UX per lo striping della tabella
L'aggiunta di "strisce" di righe alternative alle tue tabelle può essere un bel miglioramento dell'UX. Aiutano i tuoi occhi a tenere traccia della fila in cui ti trovi mentre scruti il tavolo.
Ma nella mia esperienza, questo non funziona alla grande su tavoli con solo due o tre righe. Se hai, ad esempio, una tabella con tre righe nel file <tbody>
e stai "strisciando" ogni riga "pari", potresti ritrovarti con una sola striscia. Non vale davvero un modello e potrebbe far sì che gli utenti si chiedano cosa c'è di così speciale in quella riga evidenziata.
Usando questa tecnica dove Bramus usa :has()
per applicare gli stili in base al numero di figli, possiamo applicare tble stripes quando ci sono più di, diciamo, tre righe:
Cosa diventare più fantasioso? Puoi anche decidere di farlo solo se la tabella ha almeno un certo numero di colonne:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Rimuovi la logica della classe condizionale dai modelli
Spesso ho bisogno di cambiare il layout di una pagina a seconda di cosa c'è nella pagina. Prendi il seguente layout della griglia, in cui il posizionamento del contenuto principale cambia le aree della griglia a seconda che sia presente una barra laterale.
Questo è qualcosa che potrebbe dipendere dal fatto che nel CMS siano impostate pagine di pari livello. Normalmente lo farei con la logica del modello da aggiungere in modo condizionale Classi modificatrici BEM al layout wrapper per tenere conto di entrambi i layout. Quel CSS potrebbe assomigliare a questo (regole reattive e altre cose omesse per brevità):
/* 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 . .';
}
Per quanto riguarda i CSS, questo va benissimo, ovviamente. Ma rende il codice del modello un po' disordinato. A seconda del tuo linguaggio di template, può diventare piuttosto brutto aggiungere condizionalmente un gruppo di classi, specialmente se devi farlo anche con molti elementi figlio.
Confrontalo con a :has()
approccio basato su:
/* 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 . .';
}
Onestamente, non è molto meglio per quanto riguarda i CSS. Ma rimuovere le classi modificatrici condizionali dal modello HTML è una bella vittoria se me lo chiedi.
È facile pensare a decisioni di microprogettazione per :has()
- come una carta quando contiene un'immagine - ma penso che sarà davvero utile anche per queste modifiche al layout macro.
Migliore gestione della specificità
Se leggete il mio ultimo articolo, saprai che sono un pignolo per la specificità. Se, come me, non vuoi che i tuoi punteggi di specificità esplodano quando aggiungi :has()
ed :not()
in tutti i tuoi stili, assicurati di usare :where()
.
Questo perché la specificità di :has()
è basato su l'elemento più specifico nella sua lista di argomenti. Quindi, se hai qualcosa come un ID lì dentro, il tuo selettore sarà difficile da ignorare nella cascata.
D'altro canto, la specificità di :where()
è sempre zero, senza mai aggiungere al punteggio di specificità.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Il futuro è luminoso
Queste sono solo alcune cose che non vedo l'ora di poter utilizzare in produzione. Anche il CSS-Tricks Almanac ha un sacco di esempi. Con cosa non vedi l'ora di fare :has()
? Che tipo di esempi del mondo reale ti sei imbattuto in dove :has()
sarebbe stata la soluzione perfetta?
- Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
- Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
- Fonte: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- capacità
- capace
- WRI
- sopra
- Il mio account
- influenzare
- Tutti
- già
- sempre
- stupefacente
- ed
- Un altro
- APPLICA
- approccio
- aree
- argomento
- articolo
- basato
- perché
- Scommettere
- Meglio
- fra
- Po
- Blowing
- costruito
- Mazzo
- Può ottenere
- carta
- cascata
- certo
- il cambiamento
- Modifiche
- bambino
- Scegli
- classe
- classi
- cms
- codice
- colonne
- componente
- contiene
- contenuto
- potuto
- Portata
- CSS
- decisioni
- definitivo
- Dipendente
- Design
- non
- fare
- DOM
- Dont
- giù
- elementi
- particolarmente
- eccetera
- Anche
- EVER
- Ogni
- esempio
- Esempi
- esperienza
- Occhi
- preferito
- caratteristica
- pochi
- sottile
- Firefox
- i seguenti
- Avanti
- da
- completamente
- ottenere
- dà
- va
- andando
- grande
- Griglia
- aree-modello-griglia
- guida
- accadere
- avendo
- Aiuto
- qui
- hi
- superiore
- Evidenziato
- HTML
- HTTPS
- MALATO
- idee
- Immagine
- miglioramento
- in
- interattivo
- IT
- JavaScript
- solo uno
- mantenere
- Genere
- Sapere
- Lingua
- Cognome
- disposizione
- probabile
- piccolo
- Guarda
- cerca
- lotto
- Macro
- fatto
- Principale
- make
- gestione
- molti
- forza
- momento
- Scopri di più
- maggior parte
- Mozilla
- Bisogno
- esigenze
- New
- GENERAZIONE
- Next.js
- normalmente
- numero
- Ufficialmente
- ONE
- apertura
- Altro
- al di fuori
- parte
- particolare
- Ricambi
- Cartamodello
- Persone
- perfetta
- posto
- Platone
- Platone Data Intelligence
- PlatoneDati
- possibile
- presenti
- piuttosto
- Problema
- Produzione
- pubblicato
- raggiungere
- Reagire
- Leggi
- mondo reale
- recentemente
- rimozione
- di risposta
- RIGA
- norme
- Correre
- Suddetto
- stesso
- scansione
- prodotti
- set
- Condividi
- site
- smart
- So
- soluzione
- alcuni
- qualcosa
- da qualche parte
- la nostra speciale
- specifico
- specificità
- inizia a
- Regione / Stato
- striscia
- strisce
- style
- Super
- supportato
- tavolo
- Fai
- TD
- modello
- Il
- Lo Stato
- il mondo
- cosa
- cose
- pensiero
- tre
- per tutto
- a
- tonnellata
- pure
- COMPLETAMENTE
- pista
- vero
- upside
- us
- uso
- utenti
- ux
- aspettare
- modi
- Che
- se
- quale
- OMS
- vincere
- chiedendosi
- Lavora
- mondo
- valore
- sarebbe
- scrivere
- Tu
- Trasferimento da aeroporto a Sharm
- zefiro