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.

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()

Supporto dei browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Origine

: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.

Sono mostrati 4 riquadri, ciascuno con un'immagine e una didascalia.
Ogni immagine mostra un cervello che attiva sempre più potenza cerebrale. Il primo riquadro è
dice :has(). Il secondo riquadro dice figura:ha(caption) come selettore principale.
Il terzo riquadro indica .layout:has(> :nth-child(5)) come selettore della quantità.
Il quarto riquadro indica html:has(#checked) .new-subject come selettore per la modifica dell'oggetto condizionale.

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:

Prova su Codepen

Creare una sottogriglia

subgrid

Supporto dei browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Origine

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

nesting

Supporto dei browser

  • Chrome: 120.
  • Bordo: 120.
  • Firefox: 117.
  • Safari: 17.2.

Origine

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

balance

Supporto dei browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Origine

pretty

Supporto dei browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

Senza text-wrap: balance, gli sviluppatori e i copywriter devono fare affidamento su suggerimenti per l'interruzione di riga come gli elementi <wbr> o &shy;. 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

cqw

Supporto dei browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origine

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.