Corso di CSS per principianti – Ripasso completo

Flashcard a domande & risposte che coprono i concetti principali del corso: parsing e rendering, cascata e specificità, unità di misura, colori, immagini, form, tabelle, cascade layers, debugging, organizzazione, testo, posizionamento, float, media/feature queries, variabili, proprietà logiche, animazioni e altro.

Che cos’è il CSS?

Un linguaggio di stile che definisce la presentazione (colori, layout, tipografia, ecc.) dei documenti HTML.

Qual è il compito del parser CSS durante il pre-parsing del browser?

Scaricare i file CSS, tokenizzare il codice in base alla sintassi e creare una struttura dati con selettori, proprietà e valori.

In che cosa si trasformano le shorthand dopo la tokenizzazione?

In proprietà estese (longhand), poiché il browser non memorizza le shorthand.

Cosa rappresenta il CSSOM?

Il CSS Object Model, ovvero l’oggetto JavaScript accessibile in document.stylesheets che riflette tutte le regole CSS parseate.

Quali sono i tre possibili valori computati che il browser restituisce dopo la computazione?

auto, percentuale o valore in pixel.

Come si chiamano le tre origini degli stili in CSS e qual è l’ordine di priorità?

Utente, Autore, User Agent; l’ordine di importanza è utente → autore → user agent.

Che cos’è la specificità di un selettore?

Una formula a quattro colonne (più !important) che conteggia id, classi/pseudo-classi/attributi, elementi e determina quale regola prevale.

Cosa accade in caso di pari specificità tra due selettori?

Vince la regola scritta per ultima nel foglio di stile (regola dell’ordine).

Quando un valore con !important può essere sconfitto?

Solo da un altro valore !important con origine o layer più prioritario.

Quali sono le fasi principali del rendering dopo la costruzione del CSSOM?

Layout (creazione del Box Tree), Painting (colore, bordi, ombre), Compositing (layer e bitmap).

Che cos’è lo stacking context?

Un nuovo contesto di impilamento creato da certe proprietà (es. z-index, opacity) che isola l’ordine di pittura dei suoi discendenti.

A cosa serve l’algoritmo di hit testing?

A determinare quale box l’utente sta interagendo (es. hover) per aggiornare selettivamente stile e painting.

Qual è la sintassi base di una regola CSS?

Selettore { proprietà: valore; … }

Quali sono i principali tipi di selettori?

Elemento, classe, id, attributo, pseudo-classi, pseudo-elementi, universale (*).

Che cosa rappresentano i combinatori > , + , ~ e lo spazio in CSS?

Relazioni di discendenza: figlio diretto (>), fratello adiacente (+), fratello generico (~) e discendente qualsiasi (spazio).

Qual è la specificità del selettore universale (*)?

0 (zero).

Come funzionano :is() e :where() riguardo alla specificità?

:is() assume la specificità più alta tra i selettori interni; :where() ha sempre specificità 0 indipendentemente dai selettori interni.

Quante unità di misura definisce CSS e come si suddividono?

29 unità divise in assolute (cm, mm, in, px, ecc.) e relative (em, rem, vw, vh, ecc.).

Perché 100vh o 100vw su mobile non corrispondono sempre al viewport visibile?

Perché non considerano la UI del browser (barra indirizzi) che può comparire o scomparire durante lo scroll.

Quali nuove unità risolvono il problema di vh/vw mobili?

svh/svw, lvh/lvw, dvh/dvw.

Nomina tre metodi comuni per definire un colore in CSS.

Parola chiave (red), esadecimale (#ff0000), funzione rgb()/rgba() o hsl()/hsla().

A cosa serve color-mix()?

A miscelare due colori indicando anche lo spazio di interpolazione (es. srgb, lab).

Qual è la differenza tra object-fit e object-position?

object-fit controlla come l’immagine si adatta al contenitore, object-position ne definisce l’allineamento all’interno.

Che cos’è aspect-ratio?

Una proprietà che imposta il rapporto larghezza/altezza di un elemento.

Qual è la differenza tra filter e backdrop-filter?

filter applica l’effetto sull’elemento stesso; backdrop-filter lo applica all’area dietro l’elemento (es. glassmorphism).

Cosa fa clip-path?

Crea una maschera di ritaglio che mostra solo la porzione desiderata dell’elemento.

Perché molti form control erano difficili da personalizzare in passato?

I browser usavano i widget del sistema operativo e limitavano l’applicazione di CSS per motivi di usabilità/consistenza.

Elenca due elementi facili e due difficili da personalizzare con CSS.

Facili: , . Difficili: , .

Qual è lo scopo principale di table-layout: fixed?

Rendere la larghezza delle colonne prevedibile migliorando performance e semplicità di styling delle tabelle.

Perché sono stati introdotti i Cascade Layers (@layer)?

Per controllare l’ordine della cascata senza aumentare la specificità o usare !important, riducendo i conflitti.

Come si risolve un conflitto tra layer diversi?

In base all’ordine dei layer: quelli dichiarati dopo sovrascrivono i precedenti, salvo !important o stili fuori da qualsiasi layer.

Quali sono due tecniche base di debugging CSS consigliate?

Disattivare tutte le proprietà e riattivarle una alla volta; usare gli strumenti devtools per controllare cascata e layout.

Cita tre buone pratiche per organizzare un foglio di stile.

Essere consistenti, suddividere in sezioni logiche/commentate, preferire la semplicità e spezzare file troppo grandi.

Che differenza c’è tra font-family e font-face?

font-family sceglie famiglie disponibili sul dispositivo; @font-face permette di caricare font personalizzati (es. WOFF/WOFF2).

Nomina i cinque tipi di posizionamento supportati da CSS.

static, relative, absolute, fixed, sticky.

Come agiscono top/right/bottom/left su un elemento position: relative?

Spostano l’elemento rispetto alla sua posizione originale nel flusso senza rimuoverlo dal layout.

Qual è la regola d’oro di z-index?

Funziona solo su elementi che generano uno stacking context (position diverso da static, z-index non auto, ecc.).

Che cosa fa la proprietà float?

Rimuove l’elemento dal flusso normale e lo sposta a destra/sinistra permettendo al testo circostante di avvolgerlo.

A cosa serve clear?

Impedisce che gli elementi successivi fluiscano attorno a quelli flottanti, liberando lo spazio (left, right, both).

Cosa sono le media queries?

At-rule che applicano stili in base a caratteristiche del dispositivo/viewport (es. larghezza, orientamento, preferenze utente).

Quali media type esistono per le media queries?

screen, print, all.

Che cosa fa l’at-rule @supports?

Esegue una feature query: applica dichiarazioni solo se il browser supporta (o non supporta) una data proprietà, selettore, font-tech, ecc.

Perché si scrivono fallback CSS?

Per garantire un layout accettabile anche su browser che non supportano feature moderne (es. gradienti, grid).

Come si dichiara una variabile CSS?

Con una proprietà personalizzata: --nome-variabile: valore; e si usa con var(--nome-variabile).

Che problema risolvono le proprietà logiche (block-start, inline-end, ecc.)?

Adattano margini, padding, bordi e dimensioni all’orientamento di scrittura (LTR, RTL, verticale) senza duplicare CSS.

Quali assi definiscono block e inline?

Block è l’asse di scorrimento dei paragrafi (verticale in LTR/RTL), inline è l’asse del testo (orizzontale in LTR/RTL).

Che cosa sono container queries?

Media queries che si applicano in base alla dimensione del contenitore anziché del viewport.

Quali otto sotto-proprietà compongono animation?

animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state.

Per cosa si usa @keyframes?

Per definire gli stati intermedi (frame) di un’animazione CSS personalizzata.

Cita una best practice per animazioni accessibili.

Offrire una riduzione delle animazioni se l’utente ha attivato prefers-reduced-motion.

Che differenza c’è tra Flexbox e Grid?

Flexbox gestisce layout monodimensionale (riga o colonna), Grid gestisce layout bidimensionale (righe e colonne contemporaneamente).

Quando è consigliato usare logical properties invece di scrivere due fogli LTR/RTL?

Quando si vuole un’unica base di codice che si adatti automaticamente alla direzione del testo, riducendo manutenzione.

Che cos’è prefers-reduced-motion?

Una media query che rileva la preferenza dell’utente nel ridurre le animazioni per motivi di comfort/accessibilità.

Qual è la tecnica «definitiva» di debugging menzionata nelle slide?

Disattivare tutte le proprietà, poi riattivarle una alla volta per isolare quella che causa il bug.

Qual è il principale vantaggio di table-layout: fixed?

Riduce il calcolo dinamico delle celle e migliora performance e prevedibilità delle larghezze.

Perché flexbox/grid hanno reso obsoleto l’uso di float per il layout?

Perché forniscono metodi più semantici e robusti per creare layout complessi senza hack di clearing.

Che cosa significa i18n nel contesto CSS?

Internationalization: adattare layout, direzione testo, colori, ecc. per lingue e culture diverse.

Qual è la differenza fra srgb e lab in color-mix()?

srgb interpola nel classico spazio RGB, lab in uno spazio percettivo più uniforme, producendo transizioni cromatiche diverse.

Come si inserisce un’immagine di sfondo in CSS?

Con background-image: url('percorso');

A cosa servono backdrop-filter e clip-path insieme?

Permettono di creare elementi con effetto vetro (glassmorphism) ritagliati in forme personalizzate.

Qual è la funzione di prefers-contrast nelle media query?

Rileva se l’utente richiede un contrasto maggiore per migliorare la leggibilità.

Perché @layer anonimi non sono riordinabili?

Perché non avendo nome non possono essere richiamati né spostati tramite dichiarazioni successive, mantenendo la posizione originale.

Che cosa fa revert-layer?

Ripristina il valore di una proprietà al valore risultante nel layer corrente ignorando le dichiarazioni successive dello stesso layer.