Esercizio - Calcolo della specificità e della cascata (applicazione web)

Contesto. La pagina delle prenotazioni delle aule ha un foglio di stile che è cresciuto nel tempo, e alcune regole "non funzionano". Per capire perché si calcola, per ogni elemento, quale dichiarazione vince. Teoria: CSS3 - selettori, cascata, box model e layoutCSS descrive la presentazione: regole selettore { proprietà: valore }. Selettori: tipo, classe (.a), id (#a), attributo ([type="date"]), universale, combinatori (spazio discendente, > figlio, + fratello adiacente, ~ fratelli seguenti), pseudo-classi (:hover, :focus-visible, :nth-child, :not, :checked) e pseudo-elementi (::before, ::after). Cascata: tra più regole che toccano la stessa proprietà vince, nell'ordine, l'importanza (!important vince, e lo stile inline batte gli stili normali), poi la specificità (a,b,c) = (id, classi+attributi+pseudo-classi, tipi+pseudo-elementi) confrontata come numeri uno alla volta da sinistra, infine l'ordine di comparsa (l'ultima vince). Ereditarietà: color, font, line-height, text-align passano ai figli; margin, padding, border, background, width no; inherit, initial, unset la controllano. Box model: content, padding, border, margin; con content-box width è solo il contenuto, con border-box include padding e bordo; i margini verticali adiacenti collassano nel maggiore. display: block, inline, inline-block, none, flex, grid. position: static, relative, absolute (rispetto all'antenato posizionato), fixed, sticky. Flexbox è per una dimensione (justify-content, align-items, gap, flex-grow, flex-wrap), grid per due (grid-template-columns, fr, repeat, minmax, gap). Responsive: meta viewport, unità relative (rem, %, fr), media query @media (min-width), approccio mobile-first.CSS3 - selettori, cascata, box model e layout →; la struttura HTML è quella di HTML5 - struttura del documento, elementi semantici e formUn documento HTML5 ha la forma doctype (), html con lang, head (meta charset UTF-8, viewport, title, link, script) e body. Il parser HTML5 non dà mai errore: corregge (aggiunge il tbody, chiude i p). Gli elementi semantici (header, nav, main, section, article, aside, footer, figure, time) descrivono il ruolo del contenuto e danno ai lettori di schermo i punti di riferimento; div e span sono neutri. Link: a href (assoluto, relativo, #frammento, mailto), rel e target; immagini con alt obbligatorio. Tabelle: table, caption, thead, tbody, th con scope, td, colspan e rowspan, solo per dati. Form: action, method (GET mette i campi nella query string, per letture idempotenti e ricercabili; POST li mette nel corpo, per modificare lo stato), enctype (application/x-www-form-urlencoded predefinito, multipart/form-data per i file); si invia solo ciò che ha name; label for collega etichetta e campo; tipi di input (text, email, number, date, time, radio, checkbox, hidden...); validazione nativa con required, minlength, maxlength, min, max, step, pattern e type, aggirabile e quindi da ripetere sul server; novalidate la spegne. Accessibilità: lang, alt, label, gerarchia dei titoli, navigazione da tastiera, ARIA solo quando l'HTML nativo non basta.HTML5 - struttura del documento, elementi semantici e form →. Tutti i risultati sono stati verificati leggendo gli stili calcolati in un browser (Edge, motore Chromium).

Parte 1 - Calcolo della specificità

Calcolare la specificità (a, b, c) di ciascun selettore, con a = id, b = classi, attributi e pseudo-classi, c = tipi e pseudo-elementi.

1. p
2. p.c
3. ul.elenco li:first-child
4. #app .elenco > li.aula::before
5. input[type="date"]:not(.piccolo)
6. *
7. :is(#a, .b) p
8. :where(#a) p
9. a:hover
10. #lab.occupata
11. h2 + p
12. Chi vince su un elemento <div id="x" class="a b c d e f g h i j k">: #x oppure .a.b.c.d.e.f.g.h.i.j.k (undici classi)?

Soluzione.

Parte 2 - La cascata su un frammento della pagina

HTML:

<div id="app" class="contenitore">
  <ul class="elenco">
    <li class="aula libera">Aula A1</li>
    <li class="aula">Aula B2</li>
    <li class="aula occupata" id="lab">Lab Info</li>
  </ul>
  <p>Prenotazioni di <em>oggi</em></p>
</div>

CSS (le regole sono numerate nel commento):

body              { font-size: 16px; color: #333333; }           /* R1  */
li                { color: black; }                              /* R2  */
.aula             { color: green; font-weight: bold; }           /* R3  */
.libera           { font-weight: normal; }                       /* R4  */
ul li.aula        { color: blue; }                               /* R5  */
li.aula.libera    { color: teal; }                               /* R6  */
.contenitore .elenco .libera { color: orange; }                  /* R7  */
#lab              { color: purple; }                             /* R8  */
#app li.occupata  { color: red; }                                /* R9  */
.occupata         { color: gray !important; }                    /* R10 */
.elenco           { font-size: 0.875rem; }                       /* R11 */
li                { font-size: 1.25em; }                         /* R12 */
em                { color: inherit; }                            /* R13 */

Domande:

1. Che colore hanno le tre voci di elenco?
2. Che peso del carattere (font-weight) hanno?
3. Che dimensione del carattere hanno i li, il paragrafo e l'em?
4. Di che colore sarebbe "Lab Info" senza !important in R10?
5. Di che colore è il testo "oggi" dentro l'em, e perché?

Soluzione.

Colore di "Aula A1" (classi aula e libera). Le regole di colore che la riguardano:

La più specifica è R7 (b = 3, più delle altre): arancione. R6 e R5 perdono anche se hanno più tipi, perché prima si confronta b, e c non si guarda.

Colore di "Aula B2" (solo aula): R2, R3, R5. Vince R5 (0,1,2): blu.

Colore di "Lab Info" (aula occupata, id="lab"): R2, R3, R5, R8 (1,0,0), R9 (1,1,1) e R10. R9 batte R8 (a uguale, b = 1 contro 0), ma R10 è !important: le dichiarazioni importanti vincono su tutte quelle normali, qualunque sia la specificità: grigio.

Senza !important (domanda 4): resta R9 (1,1,1): rosso.

Peso del carattere. R3 dà bold ai tre li; R4 dà normal solo a .libera. Per "Aula A1" valgono entrambe, con la stessa specificità (0,1,0): vince la seconda nel foglio, R4: normal (400). "Aula B2" e "Lab Info": solo R3, bold (700).

Dimensioni.

• li: R11 imposta 0.875rem sulla ul: rem si riferisce all'elemento radice html, che qui ha la dimensione predefinita del browser (16 px), quindi 14 px. R12 imposta 1.25em sul li, e l'em si riferisce al carattere del padre: 1,25 x 14 = 17,5 px;
• paragrafo: nessuna regola lo tocca, eredita da body (font-size si eredita): 16 px;
• em: eredita dal paragrafo: 16 px.

Colore dell'em. R13 dice color: inherit, cioè lo stesso del padre, il paragrafo. Il paragrafo non ha regole di colore (R2 vale solo per i li), ma eredita color da body: #333333. Quindi "oggi" è #333333 (rgb 51, 51, 51). Nel browser: voci di elenco arancione, blu, grigio (rosso senza !important), peso 400, 700, 700, dimensione 17,5 px; paragrafo ed em rgb(51, 51, 51) e 16 px.

Parte 3 - Una regola che non si applica

Nella tabella delle prenotazioni le righe libere devono avere sfondo verde chiaro:

tbody tr:nth-child(even) { background: rgb(247, 249, 251); }    /* zebra */
.libera                  { background: lightgreen; }

<table><tbody>
  <tr class="libera"><td>Aula A1</td></tr>
  <tr class="libera"><td>Aula B2</td></tr>
  <tr class="libera"><td>Lab Info</td></tr>
</tbody></table>

Le righe 1 e 3 sono verdi, la riga 2 no. Perché? Correggere senza !important.

Soluzione.

• La riga 2 è pari e libera: due regole competono per background. tbody tr:nth-child(even) vale (0,1,2): una pseudo-classe, due tipi. .libera vale (0,1,0). Vince la prima (0,1,2) > (0,1,0): c è 2 contro 0. Nelle righe dispari la prima regola non si applica e vince .libera. Verificato: sfondi lightgreen, grigio chiaro, lightgreen.
• Correzione: alzare la specificità di .libera almeno a (0,1,2) e scriverla dopo la regola zebra. Con tbody tr.libera { background: lightgreen; } la specificità è (0,1,2): pari a quella della regola zebra, e a parità vince la regola scritta per ultima. Verificato: le tre righe sono lightgreen.
• Perché non !important? Una volta usato, per vincere bisognerebbe usare ancora !important con selettori più specifici: il foglio diventa ingestibile. Meglio selettori simili per specificità e ordinati dal più generale al più particolare.

Parte 4 - Raggruppare con :not, :is, :where

Dire il colore del paragrafo (ognuno è in un div con la classe indicata nella prima colonna) e perché.

Soluzione.

• A: blu. .sA p.c vale (0,2,1). .sA :where(#a1) vale (0,1,0) (:where conta 0, resta solo .sA), anche se è scritta dopo. Perde per specificità.
• B: arancione. .sB p.c è (0,2,1); .sB p:not(.zz) è (0,2,1) (:not(.zz) vale come .zz, quindi b = 2, più p). Specificità uguale: vince la seconda perché scritta dopo.
• C: verde. :is(#c1, .zz) vale come l'argomento più specifico, #c1: (1,0,0); con .sC è (1,1,0) e batte (0,2,1) a prescindere dall'ordine.

Verificato: blu, arancione, verde.

Errori tipici

• Trattare (0,11,0) come 11 e confrontarlo con (1,0,0) come 1: non è un numero in base 10.
• Contare i combinatori (>, +, spazio) o * nella specificità.
• Dimenticare che a parità di specificità conta l'ordine nel foglio, e che :where() vale 0.
• Pensare che !important batta solo regole meno specifiche: batte tutte le regole normali.
• Dimenticare che color e font-size si ereditano, background no, e che em si riferisce al padre.
• Leggere .contenitore .elenco .libera come (0,1,2) perché ha "più parti": sono tre classi, (0,3,0).