Cosa significa .container. \ 31 25 \ 25 in CSS?

Question

Nel seguente codice, mi chiedo che cosa potrebbe significare la barra rovesciata \? Non ho incontrato il carattere backslash nelle lezioni che ho seguito. Questo pezzo di codice è usato per identificare le dimensioni del browser, credo.

.container.\31 25\25 { 
    width: 100%; 
    max-width: 1500px; /* max-width: (containers * 1.25) */ 
    min-width: 1200px; /* min-width: (containers) */ 
} 
.container.\37 5\25 { /* 75% */ 
    width: 900px;  /* width: (containers * 0.75) */ 
} 
.container.\35 0\25 { /* 50% */ 
    width: 600px;  /* width: (containers * 0.50) */ 
} 
.container.\32 5\25 { /* 25% */ 
    width: 300px;  /* width: (containers * 0.25) */ 
} 

Answer 1

Secondo il spec,

identificatori possono contenere anche caratteri di escape e qualsiasi carattere ISO 10646 come un codice numerico (vedi voce successiva). Ad esempio, l'identificatore "B & W?" può essere scritto come "B \ & W \?" o "B \ 26 W \ 3F". [...]

In CSS 2.1, un carattere barra rovesciata (\) può indicare uno dei tre tipi di escape caratteri. All'interno di un commento CSS, , una barra rovesciata è di per sé stessa, e se una barra rovesciata è immediatamente seguita dalla fine del foglio di stile, rappresenta anche (ad esempio un token DELIM).

Innanzitutto, all'interno di una stringa, una barra rovesciata seguita da un capo viene ignorato (cioè, la stringa si considera non contenere la barra rovesciata o nuova riga). Al di fuori di una stringa, una barra rovesciata seguita da una nuova riga sta per per sé (vale a dire, un DELIM seguito da una nuova riga).

In secondo luogo, annulla il significato di caratteri CSS speciali. Qualsiasi carattere (ad eccezione di una cifra esadecimale, avanzamento riga, ritorno a capo o feed di modulo ) può essere sostituito con una barra rovesciata per rimuovere il suo significato speciale . Ad esempio, "\"" è una stringa costituita da una camera preventivo. Preprocessori foglio stile non devono rimuovere questi backslash da un foglio stile dal momento che avrebbe cambiato il significato del foglio di stile.

In terzo luogo, fughe backslash consentono agli autori di fare riferimento ai caratteri che non è possibile inserire in un documento . In questo caso, la barra rovesciata è seguita da al massimo sei cifre esadecimali (0..9A..F), che corrispondono a il carattere ISO 10646 ([ISO10646]) con quel numero, che non deve essere zero (non è definito in CSS 2.1 cosa succede se un foglio di stile contiene un carattere con punto di codice Unicode zero.) Se un carattere nell'intervallo [0-9a-fA -F] segue il numero esadecimale, la fine di il numero deve essere chiarito. Ci sono due modi per farlo:

1. con uno spazio (o un altro carattere di spazio bianco): "\ 26 B" ("& B"). In questo caso, i programmi utente dovrebbero trattare una coppia "CR/LF" (U + 000D/U + 000A) come un singolo carattere di spazio bianco.
2. fornendo esattamente 6 cifre esadecimali: "\ 000026B" ("& B")

Infatti, questi due metodi possono essere combinati. Solo un carattere bianco carattere viene ignorato dopo una fuga esadecimale. Nota che questo significa che che uno spazio "reale" dopo la sequenza di escape deve essere raddoppiato.

Se il numero è esterno all'intervallo consentito da Unicode (ad es., "\ 110000" è sopra il massimo 10FFFF consentito nell'attuale Unicode), l'UA può sostituire l'escape con il "carattere di sostituzione" (U + FFFD). Se il carattere deve essere visualizzato, l'UA dovrebbe mostrare un simbolo visibile, come un glifo "carattere mancante" (vedere 15.2, punto 5).

Pertanto, i seguenti sono equivalenti:

.container.\31 25\25 <--> .container[class ~= "125%"] 
.container.\37 5\25 <--> .container[class ~= "75%"] 
.container.\35 0\25 <--> .container[class ~= "50%"] 
.container.\32 5\25 <--> .container[class ~= "25%"] 

Si noti che la fuga è importante, altrimenti non sarebbero identificatori validi (sottolineatura mia):

In CSS, identificatori (compresi nomi di elementi, classi e ID in selectors) può contenere solo i caratteri [a-zA-Z0-9] e ISO 10646 caratteri U + 0 0A0 o superiore, più il trattino (-) e il carattere di sottolineatura (_); essi non possono iniziare con una cifra, due trattini o un trattino seguito da una cifra da .

Pertanto, i seguenti sono validi:

.container.125% 
.container.75% 
.container.50% 
.container.25% 

Forse potrebbe essere più chiaro con questo violino:

.container { 
 
    background: red; 
 
    margin: 10px; 
 
} 
 
.container.\31 25\25 { /* 125% */ 
 
    width: 100%; 
 
    max-width: 1500px; /* (containers * 1.25) */ 
 
    min-width: 1200px; /* (containers * 1.00) */ 
 
} 
 
.container.\37 5\25 { /* 75% */ 
 
    width: 900px;  /* (containers * 0.75) */ 
 
} 
 
.container.\35 0\25 { /* 50% */ 
 
    width: 600px;  /* (containers * 0.50) */ 
 
} 
 
.container.\32 5\25 { /* 25% */ 
 
    width: 300px;  /* (containers * 0.25) */ 
 
}

<div class="container 125%">125%</div> 
 
<div class="container 75%">75%</div> 
 
<div class="container 50%">50%</div> 
 
<div class="container 25%">25%</div>