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

CSS degno di nota, potente e stabile, che puoi usare oggi stesso.

Adam Argyle

Credo che ogni sviluppatore front-end debba sapere che :has() è molto più di un "selettore padre". scoprire come e perché di subgrid, come nidificare con la sintassi CSS integrata, come lasciare che bilanciare il testo a capo del browser nei titoli e come utilizzare le unità di query del contenitore.

Questo post è una continuazione di i 6 snippet CSS dello scorso anno che ogni sviluppatore front-end dovrebbe conoscere nel 2023.

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

:has() alla fine del 2023 è stato visualizzato su tutti i principali browser. Questo nuovo selettore sembra piccole e innocenti, ma rimarrete sorprese da tutti i casi d'uso che può sbloccare: giochi, reattività, layout sensibile ai contenuti, componenti intelligenti e molto altro ancora ben approfondito in questo articolo di Jhey.

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

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

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

Un selettore lungo consiste nel modificare un layout in base al numero di elementi che contiene. Ora è possibile con :has() perché può mantenere il container come oggetto durante l'esecuzione di query sul numero di elementi figlio.

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

Un altro esempio di livello superiore è la modifica degli stili impostati nell'intero documento Quando viene attivata una casella di controllo specifica nella pagina:

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

Questi sono semplici casi d'uso che non cambiano l'oggetto del selettore, semplicemente guardando degli esempi come questo, potresti pensare che :has() sia limitato a essere un selettore principale. Considera quanto segue. esempi. Questi controlli verificano qualcosa in base a un predecessore comune, quindi utilizzano il selettore a un bambino in una parte più profonda della pagina.

Qui viene mostrato un elemento di errore di modulo se uno qualsiasi degli input non è valido:

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

Questa diapositiva mostra l'area dei contenuti principale quando una 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 container per creare un layout a griglia in grado di mostrare in modo elegante Da 1 a 12 elementi con orientamento verticale o orizzontale:

Crea una griglia secondaria

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

Se vuoi una panoramica, scopri di più sulla griglia secondaria qui.

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

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

Nidifica in modo originale i CSS

La nidificazione CSS integrata è diventata disponibile in tutti i principali browser nel 2023. Ho persino aggiornato il mio sito web per rimuovere il processo di compilazione che compilava l'annidamento, e ora ho spedito un foglio di stile più piccolo. Sì, i fogli di stile con nidificazione sono più piccoli e gli strumenti di sviluppo del browser sono pronti a rappresentarla.

Puoi trovare una panoramica della sintassi di nidificazione dei CSS qui. per tutti i dettagli. Il codice di esempio riportato di seguito 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;
  }
}

Fai in modo che il browser bilancia i titoli

Senza text-wrap: balance, gli sviluppatori e gli autori di testi possono utilizzare i suggerimenti di interruzione di riga come elementi <wbr> o ­. È soprattutto una battaglia persa perché non appena vengono tradotti, ingranditi o modificati in qualsiasi modo, non vi è alcuna garanzia che tali i suggerimenti di wrapping saranno nel posto giusto per la nuova presentazione dei contenuti.

Con il wrapping di testo bilanciato, puoi lasciare questa operazione al browser. Nel codepen riportato di seguito puoi vedere un confronto.

Utilizzare le unità di query del container

Il post dell'anno scorso suggeriva che ogni sviluppatore front-end doveva sapere come scrivere un una query containerizzata. Se non l'hai ancora fatto, considera il 2024 l'anno giusto per fare il grande passo e controlla anche le unità di query container. Per avere un'idea generale, Ahmad Shadeed ha scritto un ottimo articolo sulle unità di query container nel 2021.

Esistono sei nuove container quari unità:

1. Una variante in linea cqi.
2. Una variante larghezza cqw.
3. Una variante del blocco cqb.
4. Una variante di altezza cqh.
5. Una variante per qualsiasi lunghezza inferiore a cqmin.
6. Una variante per la lunghezza maggiore di cqmax.

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

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

Ecco una scheda con tipografia adattabile a un contenitore e un'immagine che si adatta l'orientamento del container, diminuendo le 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, probabilmente esamina tutte le unità a tua disposizione nel 2024.