2014-04-29 18 views
10

Ho chiesto in precedenza molto similar question per una versione precedente di Chrome. Tuttavia, sto avendo di nuovo difficoltà a far funzionare le variabili CSS, questa volta su Chrome 34 (versione 34.0.1847.131 m) su Windows 7. (Non ho tentato su altri sistemi operativi.)Impossibile ottenere le variabili CSS che funzionano in Chrome 34

Vedo che la sintassi ha stato cambiato (per quello vecchio, vedi la domanda legata sopra) e il nuovo è ciò che è attualmente in CSS Variables spec.:

:root { 
    --main-color: #06c; 
    --accent-color: #006; 
} 

/* The rest of the CSS file */ 
h1#foo { 
    color: var(--main-color); 
} 

e 'anche importante notare, ho la Abilita piattaforma web sperimentale caratteristiche flag abilitato. Tuttavia, se guardi allo this fiddle non riesco né a ottenere la sintassi più vecchia né la nuova sintassi che funziona su Chrome 34.

Google non ha rilevato alcun bug di Chrome noto. Sono curioso di sapere se c'è qualcosa di nuovo che devo fare per farlo funzionare? Ho fatto qualcosa di male? Qualcun altro l'ha incontrato?

+0

Questa domanda sembra essere su una specifica applicazione/software, piuttosto che di codifica in generale. È troppo vecchio per migrare, ma per riferimenti futuri, domande come questa dovrebbero essere poste su [SuperUser.SE] (http://superuser.com/help/on-topic). – chharvey

+0

Quando consideri il contesto della risposta finale suppongo di essere d'accordo con te, in parte. Tuttavia, non sono d'accordo sul fatto se la questione riguardasse o meno la codifica in generale. Al momento di chiedere questo era come usare la sintassi della variabile css (Chrome era l'unico browser di supporto in quel momento ...). Non sapevo se la mia sintassi fosse corretta o meno, dato l'aggiornamento alle specifiche e al browser. Non vedo nulla di fondamentalmente scorretto nel chiedere questo qui come secondo [la domanda sull'argomento] (http://stackoverflow.com/help/on-topic) con quel contesto. –

+0

Suppongo che dipenda dalla prospettiva. Se stai chiedendo la sintassi CSS in generale, allora direi che va bene su questo sito. Ma se stai chiedendo una specifica sintassi CSS nel contesto di Chrome 34, allora direi che si tratta di un problema riguardante il software. – chharvey

risposta

19

Variabili CSS è ora supported in all modern browsers

tranne IE11 che non ha alcuna intenzione di implementare

La sintassi in questione era corretta, e il contenuto sotto è probabilmente ancora prezioso per scopi storici. Si prega di vedere questo fiddle for a working example


risposta originale:

ho fatto qualche ricerca e avuto modo di fondo di questo. Chrome ha temporaneamente rimosso l'implementazione delle variabili CSS. (Vedere comment 5 on the Chrome ticket I reported per la verifica.) Tuttavia, anche se mi è stata fornita una risposta, rimaneva la domanda sul perché - così ho fatto più scavo.

avevo sentito dire che WebKit (Safari) piantato in asso la sua attuazione Variabili CSS e questo è stato confermato con i seguenti due messaggi email/page e webkit.bugs.org feature removed CSS Variables - questo era dovuto alla cattiva attuazione/codice iniziale, nonché le variabili CSS sviluppatori WebKit concentrandosi maggiormente sulle Prestazioni dei Blink di Google.

Chrome 33 ha rilasciato il prefisso del fornitore per le variabili CSS. Sembra che Blink abbia ereditato la povera implementazione delle variabili CSS e una patch recente abbia rimosso il codice ereditato da WebKit. Di seguito sono osservazioni del dev vantaggio da un Chrome ticket on the matter (febbraio 2014)

Variabili Rimuovere CSS

Questa patch elimina l'attuale implementazione Variabili CSS ereditato da WebKit.

L'implementazione delle variabili CSS nel suo stato attuale necessita di una riscrittura prima che sia pronta per la spedizione. Il nostro Parser CSS Bison è previsto per essere riscritto da zero, ciò comporterebbe un'altra riscrittura dell'implementazione delle variabili . Le variabili CSS devono essere rimosse per il tempo per impedire bitrot.

In quello stesso biglietto Chrome è stato espresso che gli sviluppatori vogliono migliorare le prestazioni dei Blink prima di riscrivere le variabili CSS:

Se dovessimo spedire variabili CSS con il nostro parser attuali avremmo visto poco prestazioni trarre vantaggio dall'utilizzo di un framework JavaScript per realizzare la stessa cosa. La nostra priorità per Blink quest'anno sono le prestazioni sui dispositivi mobili, le variabili CSS saranno rivisitate dopo aver affrontato le nostre carenze di prestazioni.

C'è un bug tracking the new implementation.

Nel frattempo, se desideri giocare con le variabili CSS, Firefox ha un'implementazione funzionante - è fornito di default con Firefox 31, per Firefox 29 devi attivare layout.css.variables.enabled in about:config (inserisci nella barra degli indirizzi).