Почему "rgb (224, 226, 213)" является недопустимым значением свойства?

Почему браузер не может применять это правило цвета rgb?

HTML

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

CSS

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

Инструменты Chrome Web Developer говорят мне, что это недопустимое значение свойства, но я не могу понять, почему. Результат можно увидеть в JSFiddle.

Ответ 1

У вас есть пробел между rgb и (, который не разрешен:

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

Нет, я серьезно, это не так.

В отличие от многих языков программирования, CSS категорически запрещает иметь пробел между именем функции и открывающей скобкой. Это относится не только к rgb() и rgba(), но также к другим функциональным значениям, таким как url() и attr(), а также к функциональным псевдоклассам, таким как :nth-child(), :lang() и :not().

Обратитесь к разделу раздел 4.3.6 CSS2.1, в котором говорится:

Формат значения RGB в функциональной нотации - "rgb (", за которым следует список из трех цифр (три целых числа или три процентных значения), за которыми следует ")". [...] Символы пробела разрешены вокруг числовых значений.

а также ссылаться на Приложение G для грамматики, а именно следующую токенизацию, которая ясно показывает, что между идентификатором и открывающая скобка:

{ident}"("      {return FUNCTION;}

Ответ 2

Вам нужно удалить пробел после rgb rgb(224, 226, 213)