Perché un + o - deve essere circondato da spazi bianchi all'interno del metodo Calc()?

Question

Recentemente ho iniziato a utilizzare il metodo calc (...) all'interno dei CSS. Ho appreso rapidamente che il codice come: width: calc(100%-2) non funziona, sebbene l'aggiunta di spazi bianchi prima e dopo l'operatore - risolverà il problema e il metodo calc funzionerà correttamente.

Dopo aver fatto un po 'di ricerca ho trovato più post del blog di riferimento che lo spazio bianco è richiesto e molti hanno anche sottolineato la specifica (CSS3 8.1.1) in cui si afferma:

Inoltre, spazi bianchi è richiesto entrambi i lati degli operatori + e - . (Il * e/operaters possono essere utilizzati senza spazi bianchi intorno a loro.)

Ora, chiaramente, le specifiche ci dice che questi operatori devono essere avvolti in spazi, ma perché? Ho letto oltre le specifiche (attraverso le sezioni 8.1.2-4) e se è spiegato in queste parti aggiuntive, non capisco il ragionamento.

In termini semplici, qualcuno potrebbe spiegare perché è stato specificato che calc(100% - 1) o anche calc(100%/2) è sintassi accettabile ma non calc(100%-1)?

Answer 1

Il carattere - è uno dei caratteri consentiti negli identificativi CSS. A giudicare dalla risoluzione data here, sembra che volessero evitare le ambiguità sintattiche che potrebbero derivare dall'uso di - senza spazi, in particolare con valori di parole chiave come min-content (sebbene i valori di parole chiave AFAIK non siano ancora consentiti entro calc() - correggimi se sono sbagliato).

Not everyone agrees con questa risoluzione, però.

Answer 2

Il Mozilla Developer Network spiega abbastanza bene:

Nota: I + e - gli operatori devono essere sempre circondati da spazi bianchi. L'operando di calc(50% -8px) per esempio verrà analizzato come percentuale seguita da una lunghezza negativa, un'espressione non valida, mentre l'operando di calc(50% - 8px) è una percentuale seguita da un segno meno e una lunghezza. Inoltre, calc(8px + -50%) viene considerato come una lunghezza seguita da un segno più e una percentuale negativa.

Gli operatori * e / non richiedono spazi bianchi, ma è possibile aggiungerli per coerenza, e raccomandati.

Answer 3

Penso che dovresti prima considerare come i CSS identificano una lunghezza.Una lunghezza è definita come un segno opzionale seguito da un modulo e un'unità opzionale di misura (anche se molte proprietà effettivamente richiedono):

<CSSlength> := [<sign>]<module>[<unit>] 

Così, per esempio, lunghezze CSS validi sono:

-3px 
100em 
+10pc 
0 
91 
5% 

Definizione di una durata come questo, il motore CSS analizza il seguente:

calc(100% -1px); 

come una lunghezza seguita da un'altra lunghezza. In questo caso sarebbe 100% seguito da -1px, che non ha alcun senso per calc(). Questo è anche spiegato nel relativo MDN documentation page.

Per mettere due lunghezze in relazione è necessario utilizzare un operatore distinto, pertanto, con la logica di cui sopra, è necessario usare spaziature:

calc(100% - 1px);