Perché un browser non può applicare questa regola rgb a colori?Perché "rgb (224, 226, 213)" è un valore di proprietà non valido?
HTML
<header>
<h1>Header</h1>
</header>
CSS
header h1 {
background-color: red;
color: rgb (224, 226, 213);
}
Chrome strumenti Web Developer mi sta dicendo che si tratta di un valore di proprietà non valido, ma non riesco a capire perché. Puoi vedere il risultato in JSFiddle.
avete uno spazio tra il rgb e (, che non è consentito:
header h1 {
background-color: red;
color: rgb(224, 226, 213);
}
No, dico sul serio, non lo è.
A differenza di molti linguaggi di programmazione, i CSS vietano espressamente di avere spazi bianchi tra un nome di funzione e la parentesi di apertura. Ciò si applica non solo a rgb() e rgba(), ma anche ad altri valori funzionali come url() e attr(), nonché a pseudo-classi funzionali come :nth-child(), :lang() e :not().
Fare riferimento alla section 4.3.6 of CSS2.1, in cui si afferma:
Il formato di un valore RGB nella notazione funzionale è 'rgb (' seguito da un elenco separato da virgole di tre valori numerici (sia i tre valori o tre valori percentuali) seguito da ')'. [...] I caratteri di spazio bianco sono consentiti attorno ai valori numerici.
e vedere anche Appendix G per la grammatica, precisamente il seguente tokenizzazione, che mostra chiaramente che gli spazi bianchi non è previsto tra l'identificatore e la parentesi di apertura:
{ident}"(" {return FUNCTION;}
Questa è stata una sorpresa per me, ma la sintassi CSS 2.1 definisce veramente le notazioni della funzione in questo modo, e anche la descrizione in prosa del 'rgb (...)' lo rende chiaro (e dice anche esplicitamente che gli spazi sono permessi in giro i numeri, il che implica che non sono consentiti spazi nella notazione). –
Il modo più semplice per risolvere tali errori è di convalidarlo. Puoi convalidare il tuo css in [validatore W3C] (http://jigsaw.w3.org/css-validator/#validate_by_input). –
Mentre il validatore di Jigsaw può individuare errori per te, è notoriamente inaffidabile mostrarti come correggerli *. Ad esempio, in realtà non ti dice che la presenza dello spazio sta causando il problema (perché non * vede * lo spazio come un problema per cominciare). E a qualcuno che è abituato a programmare i linguaggi consentendo spazi lì, non sarà immediatamente evidente. Punti bonus se il richiedente ha effettivamente eseguito il proprio CSS tramite Jigsaw prima di pubblicare la sua domanda (non dicendo che credo lo abbiano fatto, ma anche se lo facessero non sarei sorpreso se finissero per postare comunque). – BoltClock
È necessario rimuovere lo spazio dopo rgbrgb(224, 226, 213)
C'è uno spazio dopo rgb – Esailija
Mentre questa è una domanda di battitura, non penso che sia "improbabile che aiuti i futuri lettori". Questo è un trucco abbastanza comune, e sottolineo tanto nella mia risposta. – BoltClock