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

CSS potente, stabile e adatto alla cassetta degli attrezzi che puoi utilizzare oggi.

Adam Argyle

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

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

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

:has() è stato reso disponibile su tutti i principali browser alla fine del 2023. Questo nuovo selettore sembra piccolo e innocuo, ma rimarrai sorpreso di tutti i casi d'uso che può sbloccare: giochi, reattività, layout basato sui contenuti, componenti intelligenti e molto altro che è ben esplorato in questo articolo di Jhey.

Ecco un paio di esempi di utilizzo di :has() come selettore principale. Ha questo nome perché solitamente l'oggetto di un selettore si trova alla fine, ad esempio ul li, dove li è l'oggetto e riceve gli stili. Con :has(), l'elemento all'inizio del selettore può diventare l'oggetto. Nell'esempio seguente, il pulsante presenta uno spazio se al suo interno è presente un elemento con una classe .icon. La scheda cambia orientamento se all'interno è presente un'immagine.

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

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

Un selettore a lungo desiderato è la possibilità di modificare un layout in base al numero di elementi. Ora è possibile con :has() perché può mantenere il contenitore come soggetto durante la query sul numero di bambini.

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

Un altro esempio di livello superiore: modifica gli stili impostati sull'intero documento quando è attivata 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. Tuttavia, considera gli esempi riportati di seguito. Questi controllano la presenza di un elemento in base a un antenato comune, quindi ruotano l'elemento selezionato in base a un elemento secondario più in basso nella pagina.

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

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

Questo fa scorrere verso l'esterno l'area dei contenuti principali quando una barra 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 relative alla quantità e query dei contenitori per creare un layout a griglia in grado di mostrare elegantemente da 1 a 12 elementi in orientamenti verticali o orizzontali:

Creare una sottogriglia

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

Scopri di più sulla griglia secondaria 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;
  }
}

Nidifica il CSS

Nel 2023, il nidificazione CSS integrata è diventata disponibile in tutti i principali browser. Ho persino aggiornato il mio sito web per rimuovere il processo di compilazione che ha rimosso la nidificazione e ora fornisco un foglio di stile più piccolo. Sì, gli stili CSS 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 sia il browser a bilanciare i titoli

Senza text-wrap: balance, gli sviluppatori e i copywriter devono fare affidamento su suggerimenti per l'interruzione di riga come gli elementi <wbr> o ­. Si tratta per lo più di una battaglia persa perché, non appena i contenuti vengono tradotti, aumentati o modificati in qualsiasi modo, non c'è alcuna garanzia che i suggerimenti di a capo siano al posto giusto per la nuova presentazione dei contenuti.

Con l'a capo bilanciato, puoi lasciare questa operazione al browser. Puoi vedere un confronto nel seguente Codepen.

Utilizzare le unità di query dei contenitori

Il post dello scorso anno suggeriva che ogni sviluppatore front-end dovrebbe sapere come scrivere una query del contenitore. Se non l'hai ancora fatto, scegli il 2024 come anno per iniziare e dai un'occhiata anche alle unità di query dei contenitori. Come panoramica, Ahmad Shadeed ha scritto un ottimo articolo sulle unità di query dei contenitori nel 2021.

Sono disponibili sei nuove unità di query per i contenitori:

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 durata più breve cqmin.
6. Una variante per la lunghezza maggiore cqmax.

Considera uno scenario per le animazioni relative e intrinseche di un contenitore. Un elemento secondario che esce completamente 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 la tipografia adattabile del contenitore 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 hai mai utilizzato queste unità, ti consigliamo di esaminare tutte le unità a tua disposizione nel 2024.