5 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2024

CSS potente, stabile e degno di essere aggiunto alla tua cassetta degli attrezzi, che puoi utilizzare oggi stesso.

Adam Argyle

Credo che ogni sviluppatore front-end dovrebbe sapere che :has() è più di un "selettore principale", il come e il perché di un subgrid, come nidificare con la sintassi CSS integrata, come consentire al browser di bilanciare il wrapping del testo del titolo e come utilizzare le unità di query del contenitore.

Questo post è la continuazione dei 6 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2023 dell'anno scorso.

CSS:has(.potential-beyond-being-a-parent-selector)

:has() è stato implementato in tutti i principali browser alla fine del 2023. Questo nuovo selettore sembra piccolo e innocuo, ma ti sorprenderà per tutti i casi d'uso che può sbloccare: giochi, reattività, layout sensibile ai contenuti, componenti intelligenti e molto altro ancora, ben esplorato in questo articolo di Jhey.

Ecco alcuni esempi di utilizzo di :has() come selettore principale. Ha questo nome perché di solito il soggetto di un selettore si trova alla fine, come in 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 ha uno spazio se all'interno è presente un elemento con una classe .icon. La scheda cambia orientamento se contiene un'immagine.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Un selettore a lungo desiderato è quello che consente di modificare un layout in base al numero di elementi che contiene. Ora è possibile con :has() perché può mantenere il contenitore come soggetto durante l'interrogazione del numero di figli.

main:has(> :nth-child(5)) {…}

Un altro esempio di livello superiore: modifica gli stili impostati sull'intero documento quando è selezionata una casella di controllo specifica nella pagina:

html:has(#dark-mode:checked) {…}

Questi sono semplici casi d'uso che non modificano l'oggetto del selettore. Se guardi solo esempi come questo, potresti pensare che :has() sia limitato a essere un selettore principale. Considera però gli esempi seguenti. Questi controlli cercano qualcosa in base a un antenato comune, quindi ruotano il selettore in base a un elemento secondario in una posizione più profonda della pagina.

Questo mostra un elemento di errore del modulo se uno dei suoi input non è valido:

form:has(:user-invalid) .error {
  display: block;
}

Questo fa scorrere verso l'esterno l'area dei contenuti principali quando la barra di navigazione laterale ha la classe .--is-open:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Ecco una demo divertente che utilizza :has() come selettore principale, :has() con query di quantità e query del contenitore per creare un layout a griglia in grado di visualizzare elegantemente da 1 a 12 elementi in orientamento verticale o orizzontale:

Creare una sottogriglia

Per molti anni, la community web front-end ha chiesto la griglia secondaria per completare e rifinire il motore di layout a griglia CSS, molto popolare e potente. Ora è disponibile in tutti e tre i principali motori.

Scopri di più sulla sottogriglia qui, se vuoi una panoramica.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Nidificare alla maniera del CSS

L'annidamento CSS integrato è diventato disponibile in tutti i principali browser nel 2023. Ho persino aggiornato il mio sito web per rimuovere il processo di compilazione che eliminava la nidificazione e ora spedisco un foglio di stile più piccolo. Sì, i fogli di stile con nidificazione sono più piccoli e tutti gli strumenti di sviluppo del browser sono pronti a rappresentarli.

Puoi trovare una panoramica della sintassi di nidificazione 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;
  }
}

Lascia che il browser bilanci i titoli

Senza text-wrap: balance, gli sviluppatori e i copywriter devono affidarsi a suggerimenti per l'interruzione di riga come gli elementi <wbr> o ­. Si tratta per lo più di una battaglia persa in partenza perché, non appena i contenuti vengono tradotti, ingranditi o modificati in qualsiasi modo, non vi è alcuna garanzia che i suggerimenti per la disposizione si trovino nella posizione corretta per la nuova presentazione dei contenuti.

Con il wrapping del testo bilanciato, puoi lasciare questo lavoro al browser. Puoi vedere un confronto nel seguente Codepen.

Utilizzo di unità di query dei container

Il post dell'anno scorso suggeriva che ogni sviluppatore front-end dovrebbe sapere come scrivere una query sui contenitori. Se non l'hai ancora fatto, il 2024 è l'anno giusto per fare il grande passo e dai un'occhiata anche alle unità di query sui contenitori. A titolo di panoramica, Ahmad Shadeed ha scritto un ottimo articolo sulle unità di query dei contenitori nel 2021.

Sono disponibili sei nuove unità di query contenitore:

1. Una variante in linea cqi.
2. Una variante di larghezza cqw.
3. Una variante di blocco cqb.
4. Una variante di altezza cqh.
5. Una variante per la lunghezza più breve cqmin.
6. Una variante per la lunghezza maggiore cqmax.

Considera uno scenario per le animazioni relative e intrinseche a un contenitore. Un elemento secondario che scorre completamente fuori dal contenitore utilizzando 100 cqi, ovvero il 100% delle dimensioni in linea del contenitore.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Ecco una scheda con tipografia adattabile al container e un'immagine che si adatta all'orientamento del container, diventando la 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 queste unità sono nuove per te, ti consigliamo di esaminare tutte le unità disponibili nel 2024.