Gli identificatori CSS possono iniziare con due trattini?

Question

CSS 2.1 definisce identifiers come

In CSS, identificatori possono contenere solo i caratteri [a-zA-Z0-9] e ISO 10646 U + 00A0 e superiori, più il trattino (-) e il carattere di sottolineatura (_); non possono iniziare con una cifra, due trattini o un trattino seguito da una cifra. Gli identificatori possono anche contenere caratteri di escape e qualsiasi carattere ISO 10646 come codice numerico.

Pertanto, -- dovrebbe essere un identificatore valido, e quindi non dovrebbe #-- selezionare l'elemento con id="--":

body { color: black } 
 
#-- { color: red }

<p id="--">I should be black.</p>

In attribute selectors,

attributo i valori devono essere identificatori o stringhe.

Ma -- sembra funzionare come un identificatore per i valori degli attributi, almeno su Firefox:

body { color: black } 
 
[id=--] { color: red }

<p id="--">I am red on Firefox.</p>

Inoltre, CSS.escape è stato modificato per consentire --:

Sono state apportate piccole modifiche in Firefox 32, per abbinare le specifiche e l'evoluzione della sintassi CSS. L'identificatore ora può iniziare con -- e il secondo trattino non deve essere scappato.

Secondo il Wayback Machine, il cambiamento è avvenuto tra il 19 e il 30 Apr 2014:

• 6 Feb 2014 editor's draft, memorizzato il 19 apr 2014.

  Se il carattere è il secondo carattere e è "-" (U + 002D) e il primo carattere è "-", quindi il carattere di escape.

• 30 Apr 2014 editor's draft, memorizzati in data 4 maggio 2014.

  Se il personaggio [...] è "-" (U + 002D) [...], poi il carattere stesso.

Quindi, ha qualche nuovo modulo CSS3 ha cambiato la definizione di identificatori, in modo che possano a volte cominciare --, o che cosa esattamente sta succedendo qui?

Answer 1

standard

In effetti, un cambiamento nel CSS Sintassi modulo ora consente identificatori di iniziare con due trattini:

4.3.9. Check if three code points would start an identifier

un'occhiata al primo punto di codice:

• U + 002D HYPHEN-MINUS

  Se il secondo punto di codice è un punto di inizio del nome o un U + 002D HYPHEN-MINUS oppure il secondo e il terzo punto di codice sono una fuga valida, restituisce true. Altrimenti, restituisci falso.

Questo cambiamento è apparso nel 21 Mar 2014 Editor's Draft (changelog), e non è ancora presente nella Candidate corrente Recomendation, che è il 20 Feb 2014 CR.

è anche descritto in Modifiche:

11.1. Changes from the 20 February 2014 Candidate Recommendation

• cambiare la definizione di gettoni ident-like per consentire "-" per avviare un ident.

Motivo

Nel www-style, il filo ...let's change the syntax ha proposto di modificare la sintassi di CSS Variables:

1. Tab Atkins Jr. proposed cambiare la sintassi di proprietà personalizzate a "qualsiasi ident a cominciare/contenente un trattino basso ".
2. Chris Eppstein disagreed perché _property è un hack comune IE6.
3. Brian Kardell proposed--.

4. Zack Weinberg warned:

   Purtroppo, "-" richiederebbe una modifica della sintassi. IDENT non è permesso di iniziare con due trattini di fila.

5. C'è stata una lunga discussione su cosa dovrebbe essere fatto.

6. Tab Atkins Jr. informed hanno deciso di utilizzare un prefisso -- per indicare proprietà personalizzate e altre cose personalizzate.

Quindi il giorno seguente ha commited il cambio di CSS Sintassi su github (è un editor delle specifiche).

Implementazioni

Firefox

Firefox permette identificatori di iniziare con -- dal Nightly 31 2014-04-03 (pushlog).Il comportamento è stato modificato in bug 985838:

Bug 985.838 - cambiare var- prefisso delle variabili CSS per --

deciso Recentemente modifiche alle variabili CSS spec:

• il prefisso del costume cambio di proprietà da var- a --
• all'interno dello var() si utilizza il f ull nome di proprietà personalizzata (ad es. con il prefisso --)
• una proprietà personalizzata che consiste solo del prefisso, --, è consentito
• idents nel parser CSS consentono ora le cose come -- e --0

Il cambiamento atterrato su Firefox 31.0. Da allora, [id=--] funziona.

Tuttavia, #-- continua a non funzionare anche su latest Nightly 41. Ho archiviato bug 1175192 per sistemarlo.

Chrome

cromo costruita a new CSS parser:

Ora permettiamo idents di iniziare con --

E 'stato spedito in this commit, che faceva parte della this commitlist, che è stato arrotolato in this commit. Quindi è stato finalmente implementato nella build 44.0.2370.0 325166 (pushlog since 325152).

Da allora, Chromium consente sia [id=--] e #--.

Answer 2

Non sono sicuro se c'è una risposta definitiva a questo, ma per quello che vale, i trattini doppio compaiono nell'CSS Variables module, che definisce le proprietà personalizzate. Ecco un esempio (attualmente funziona solo in Firefox, che può essere il motivo per cui ci lavora in CSS.escape()):

:root { --color: red; } 
 
p { color: var(--color); }

<p>I am red on Firefox.</p>

Mentre definizione di identificatori css-syntax-3 s' sembra coerente con quella di CSS2. 1, fa un certo numero di riferimenti alle variabili css stesso. Nessuno di questi riferimenti sembra tuttavia indirizzare il prefisso utilizzato dai nomi di proprietà personalizzate.

CSS-variabili si says:

Un proprietà personalizzata è un qualsiasi proprietà il cui nome inizia con due trattini (U + 002D HYPHEN-meno), come --foo. La produzione <custom-property-name> corrisponde a questo: è definita come qualsiasi identificatore valido che inizia con due trattini.

L'ultima affermazione è particolarmente interessante, perché l'unico modo di interpretare in modo che non sia in conflitto con le definizioni di cui CSS 2.1 e CSS-sintassi-3 è uno dei vaghezza: "identificatore che inizia con due trattini" può significare sia che i due trattini non fanno parte dell'identificativo, vale a dire:

<custom-property-name> = '-' '-' <ident> 

Oppure sono, il che significherebbe che le proprietà personalizzate sono esenti dalla definizione generale di un identificatore. Non aiuta che la grammatica per la produzione <custom-property-name> non si trovi da nessuna parte, non in css-sintassi, né in variabili css, né in CSSOM; questa affermazione prosaica è l'unica definizione disponibile.

Ovviamente, questo non spiega perché lo standard #-- sia riconosciuto valido da Chrome, soprattutto perché Chrome non ha un'implementazione funzionante delle proprietà personalizzate.