Una risorsa CSS affidabile, potente e stabile che puoi utilizzare subito.
Credo che ogni sviluppatore front-end dovrebbe sapere che :has() non è solo un "selettore principale",
le modalità e i motivi di un subgrid, come nidificare con la sintassi CSS integrata, come consentire al
browser di bilanciare il testo del titolo a capo e come utilizzare le unità di query del container.
Questo post è una continuazione dei 6 snippet CSS dell'anno scorso che ogni sviluppatore front-end dovrebbe conoscere nel 2023.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() è arrivato su tutti i principali browser alla fine del 2023. Questo nuovo selettore sembra
piccolo e innocente, ma ti sorprenderà per tutti i casi d'uso che può offrire:
giochi, reattività, layout basato sui contenuti, componenti intelligenti e
molto altro ancora, che è illustrato in questo articolo di Jhey.
Ecco un paio di esempi di utilizzo di :has() come selettore principale. Ha questo nome perché
di solito il soggetto di un selettore si trova alla fine, ad esempio ul li, dove li è il soggetto
e riceve gli stili. Con :has(), l'elemento all'inizio del selettore può diventare
il soggetto. Nell'esempio seguente, il pulsante presenta uno spazio vuoto se all'interno è presente un elemento con classe .icon. Se all'interno è presente un'immagine, la scheda cambia l'orientamento.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Un selettore desiderato lungo deve modificare un layout in base al numero di elementi che contiene. Ora questo è possibile con :has() perché può mantenere il container come oggetto durante l'esecuzione della query sul numero di figli.
main:has(> :nth-child(5)) {…}
Un altro esempio di livello superiore consiste nel modificare gli stili impostati sull'intero documento quando viene attivata una casella di controllo specifica nella pagina:
html:has(#dark-mode:checked) {…}
Questi sono casi d'uso semplici che non cambiano l'oggetto del selettore. Se guardi solo esempi come questo, potresti pensare che :has() sia un selettore padre. Considera però gli esempi
che seguono. Questi cercano qualcosa in base a un predecessore comune, quindi ruotano il selettore in base a un elemento figlio in un punto più interno della pagina.
Questo mostra un elemento di errore del modulo se uno qualsiasi dei suoi input non è valido:
form:has(:user-invalid) .error {
display: block;
}
Questo fa scorrere l'area dei contenuti principale quando una barra di navigazione laterale ha una classe .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Ecco una demo divertente che utilizza :has() come selettore principale, :has() con query sulla quantità e query container per creare un layout a griglia in grado di visualizzare elegantemente da 1 a 12 elementi con orientamenti verticale o orizzontale:
Crea una griglia
subgrid
Per molti anni la community web front-end ha chiesto che la sottogriglia aiutasse a completare e completare il popolarissimo e potente motore di layout a griglia CSS. Ora è disponibile in tutti e tre i motori principali.
Per una panoramica, scopri di più sulla griglia di sottotitoli qui.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Nest in modalità CSS
nesting
La nidificazione CSS integrata è diventata disponibile in tutti i principali browser nel 2023. Ho anche aggiornato il sito web rimuovendo il processo di compilazione con nidificazione e ora spedisco un foglio di stile più piccolo. Esatto, i fogli di stile con nidificazione hanno dimensioni più piccole e tutti gli strumenti per sviluppatori dei browser sono pronti per rappresentarli.
Puoi trovare una panoramica della sintassi di nidificazione dei CSS qui, per tutti i dettagli. Il seguente esempio di codice mostra un esempio di sintassi.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Consenti al browser di bilanciare i titoli
balance
pretty
Senza text-wrap: balance, gli sviluppatori e gli autori dei testi possono lasciare i suggerimenti di interruzione di riga, ad esempio gli elementi <wbr> o ­. È per lo più una battaglia persa perché, non appena i contenuti vengono tradotti, ingranditi o modificati in alcun modo, non c'è garanzia che quei suggerimenti siano nel posto giusto per la nuova presentazione dei contenuti.
Con il testo a capo bilanciato, puoi lasciare questa operazione al browser. Puoi visualizzare un confronto nel codepen di seguito.
Utilizza unità di query container
cqw
Il post dell'anno scorso suggeriva che ogni sviluppatore front-end dovrebbe sapere come scrivere una query container. Se non l'hai ancora fatto, fai in modo che il 2024 sia l'anno giusto e dai un'occhiata alle unità di query dei container. Per riassumere, Ahmad Shadeed ha scritto un ottimo articolo sulle unità di query container nel 2021.
Sono disponibili sei nuove unità di poster:
- Una variante in linea
cqi. - Una variante di larghezza
cqw. - Una variante di blocco
cqb. - Una variante di altezza
cqh. - Una variante per qualsiasi lunghezza inferiore a
cqmin. - Una variante per qualsiasi lunghezza è maggiore di
cqmax.
Considera uno scenario per animazioni relative e intrinseche in un contenitore. Un elemento secondario che esce completamente dal container utilizzando 100cqi, che corrisponde al 100% delle dimensioni incorporate del container.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Ecco una scheda con una tipografia adattabile al container e un'immagine che si adatta all'orientamento del contenitore, diventando metà delle dimensioni se l'orientamento è orizzontale.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Se non conosci queste unità, probabilmente sarebbe opportuno esaminare tutte le unità disponibili nel 2024.