DanLevy.net

Quiz: Conosci il CSS moderno? (per il 2025)

Sei abbastanza front‑end?

Quiz: Conosci il CSS?

1. 

Riscaldamento

Qual è il modo corretto di usare una variabile CSS chiamata --main-color per impostare il colore di sfondo di un elemento?

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

Le variabili CSS si usano con la funzione var, quindi la risposta corretta è background-color: var(--main-color);. Questa sintassi recupera il valore di --main-color e lo applica.

Le altre opzioni possono ricordare altri linguaggi o sintassi di preprocessori, come Sass o Less.

2. 

Funzioni CSS

Se la larghezza del genitore/contenitore è 400px, qual è la larghezza calcolata del seguente elemento?

div {
  width: min(250px, 50%);
}

La funzione min() sceglierà il valore più piccolo tra 250px e il 50% della larghezza del suo genitore.

Per capire il valore calcolato, dobbiamo convertire le unità relative in pixel:

  • 50% di 400px è 200px
  • 250px è già in pixel
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

La funzione min() è particolarmente utile per il design responsivo, dove puoi assicurarti che un componente (o la dimensione del font) non superi un certo limite.

3. 

Funzioni CSS

Dato un contenitore largo 200 px, qual è la larghezza calcolata del <div>?

div {
  width: max(50px, 10%, 6rem);
}

La funzione max() accetta 2 o più valori e utilizza automaticamente il più grande. Supponendo che la dimensione del font radice sia il valore predefinito del browser 16px, la larghezza risulta 96px.

Per capire il valore calcolato, dobbiamo convertire le unità relative in pixel:

  • 50px è già in pixel
  • 10% di 200px è 20px
  • 6rem è 6 * 16px (la dimensione del font predefinita) che equivale a 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

Funzioni Grid CSS

Qual è l’effetto di usare minmax(100px, 200px) per una traccia di grid CSS?

grid-template-columns: minmax(100px, 200px);

Usare minmax(100px, 200px) consente alla traccia di grid di ridimensionarsi tra 100px e 200px, adattandosi allo spazio disponibile ma senza scendere sotto 100px né superare 200px.

Puoi creare layout auto‑regolanti in cui contenitore e figli partecipano al calcolo del layout. È potente quando combinato con repeat() e auto-fill o auto-fit, che creano quante più tracce possibile entro i vincoli.

5. 

Variabili CSS

Quale colore avrà lo sfondo per il seguente CSS?

div {
  background: var(--primary, olivedrab);
}

La funzione var() ti consente di impostare un valore di fallback se la variabile non è definita. In questo caso, lo sfondo sarà olivedrab (#6b8e23) perché --primary non è definito.

Questo è un ottimo modo per garantire che i tuoi stili non si rompano se una variabile manca o non è supportata.

6. 

Funzioni CSS

Cosa fa clamp()?

.card {
  width: clamp(200px, 50vw, 500px);
}

La funzione clamp() consente alla larghezza di scalare in base a 50vw, ma la mantiene entro un intervallo di 200px a 500px.

Questo significa che la larghezza sarà 200px quando 50vw sarebbe inferiore a 200px, 500px quando 50vw sarebbe superiore a 500px, e lineare tra questi limiti.

Ti rende automaticamente responsivo! La cosa da sapere su clamp è che combina unità fisse con unità responsive o calcolate.

Normalmente non vorresti usare unità viewport per le dimensioni dei font, ma con clamp() possiamo assicurarci che la dimensione del font non diventi troppo piccola né troppo grande.

7. 

Nesting CSS

Il CSS supporta il nesting nativamente?

Sì! Finalmente abbiamo il nesting nativo in CSS! CSS ha introdotto la sintassi di nesting nativo negli ultimi anni (2023), consentendo lo styling gerarchico direttamente nel CSS.

8. 

Annidamento CSS

È questo un uso corretto dell’annidamento CSS nativo?

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

La classe .title è annidata all’interno della classe .container e le proprietà vengono applicate come previsto.

Questo è un ottimo modo per tenere insieme gli stili correlati ed evitare selettori lunghi.

9. 

Annidamento CSS

Quale colore di sfondo verrà applicato ai div figli diretti di .container?

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

Il selettore > nella regola annidata applica background-color: white solo ai div figli diretti all’interno di .container.

L’ultima regola, background-color: blue !important;, è una piccola distrazione. È fuori dalla regola annidata e verrà applicata a tutti gli elementi .container.

10. 

Variabili CSS

Come puoi modificare il valore di una variabile CSS a runtime?

Le variabili CSS possono essere impostate usando classi e JavaScript. Possono anche essere definite ‘dopo’ che sono tecnicamente utilizzate.

document.documentElement.style.setProperty('--main-color', 'blue');

Questo cambierà il valore di --main-color in blue per l’intero documento.

Le variabili CSS sono mutabili e possono essere cambiate a runtime usando JavaScript.

Possono anche essere modificate aggiungendo o rimuovendo classi, un pattern comune per il theming.

11. 

Variabili CSS

Quale sarà la larghezza calcolata dell’elemento?

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

La funzione calc() combina il valore di --base-width (100px) con 10px aggiuntivi, risultando in una larghezza di 110px.

Loading comments...