2012-12-14 13 views
12

Warum kann kein Browser diese Farb-RGB-Regel anwenden?Warum ist "rgb (224, 226, 213)" ein ungültiger Eigenschaftswert?

HTML

<header> 
    <h1>Header</h1> 
</header> 

CSS

header h1 { 
    background-color: red; 
    color: rgb (224, 226, 213); 
} 

Chrome Web Developer Tools ist mir zu sagen, dass es ein ungültiger Eigenschaftswert ist, aber ich kann nicht verstehen, warum. Sie können das Ergebnis in JSFiddle sehen.

+0

Es gibt einen Platz nach rgb – Esailija

+6

Während dies eine Tippfehlerfrage ist, denke ich nicht, dass es "unwahrscheinlich ist, zukünftigen Lesern zu helfen". Das ist ein ziemlich gewöhnlicher Fall, und ich unterziehe das in meiner Antwort. – BoltClock

Antwort

28

Sie haben einen Raum zwischen den rgb und den (, was nicht erlaubt ist:

header h1 { 
    background-color: red; 
    color: rgb(224, 226, 213); 
} 

Nein, ich bin ernst, ist es nicht.

Im Gegensatz zu vielen Programmiersprachen verbietet CSS ausdrücklich Leerzeichen zwischen einem Funktionsnamen und der öffnenden Klammer. Dies gilt nicht nur für rgb() und rgba(), sondern auch für andere funktionale Werte wie url() und attr(), sowie für funktionale Pseudoklassen wie :nth-child(), :lang() und :not().

Siehe section 4.3.6 of CSS2.1, in dem es heißt:

Das Format eines RGB-Wert in der funktionalen Notation ‚rgb (‘, gefolgt von einer durch Kommata getrennte Liste von drei numerischen Werte (entweder drei ganzzahlige Werte oder drei Prozentwerte) gefolgt von ')'. [...] Leerzeichen sind um die numerischen Werte zulässig.

und auch Appendix G für die Grammatik beziehen, genau die folgenden tokenization, die deutlich zeigt, dass Leerzeichen nicht zwischen der Kennung und der öffnenden Klammer erwartet wird:

{ident}"("  {return FUNCTION;} 
+2

Das war eine Überraschung für mich, aber die Syntax von CSS 2.1 definiert die Funktionsbezeichnungen wirklich so, und sogar die Prosabeschreibung des 'rgb (...)' macht es klar (und es sagt auch explizit, dass Leerzeichen erlaubt sind) die Zahlen bedeuten, dass ansonsten Leerzeichen in der Notation nicht erlaubt sind). –

+2

Der einfachste Weg, solche Fehler zu beheben, besteht darin, sie zu validieren. Sie können Ihre CSS in [W3C validator] validieren (http://jigsaw.w3.org/css-validator/#validate_by_input). –

+0

Während der Jigsaw-Validator Fehler für Sie erkennen kann, ist es notorisch unzuverlässig, Ihnen zu zeigen, wie Sie sie * reparieren * können. Zum Beispiel sagt es Ihnen nicht, dass das Vorhandensein des Platzes das Problem verursacht (weil es den Platz nicht als Problem sieht). Und für jemanden, der es gewohnt ist, Sprachen zu programmieren, die Räume erlauben, wird es nicht sofort offensichtlich sein. Bonuspunkte, wenn der Fragesteller sein CSS tatsächlich durch Jigsaw ausgeführt hat, bevor er seine Frage gepostet hat (nicht gesagt, dass ich das glaube, aber selbst wenn dies der Fall wäre, wäre ich nicht überrascht, wenn sie trotzdem posten würden). – BoltClock

1

Sie müssen den Raum entfernen, nachdem rgbrgb(224, 226, 213)

Verwandte Themen