Как оценивается правило CSS в отношении дублирующих (резервных) атрибутов?

Question

Как веб-браузеры интерпретируют дублирующиеся атрибуты в правиле CSS?
Вот пример того, что имеется в виду:

body
{
    background-color:red;
    background-color:blue;
    background-color:rgba(0,0,255,1);
}

Важный аспект для меня:

1. Допустимо ли указывать атрибут несколько раз?

2. Оценивается ли правило так, что используется значение атрибута, равное последнему значению ( last - как в появлении позже в тексте правила ), которое используется? Экспериментируя, я вижу, что в приведенном выше примере используется rgba(0,0,255,1), но это совпадение или определено?

3. Что произойдет, если значение не понято браузером? Будет ли это «откат» к последнему значению, замеченному ранее, все еще понятному или , станет undefined из-за непонятного последнего значения?

   Например, если браузер не поддерживает rgba(r,g,b), но вместо этого red и blue. будет ли тогда цвет фона установлен равным blue, как это было последнее значение (своего рода запасной вариант), или он полностью потерпит неудачу?

4. (Предполагается, что существует определенное поведение для использования последнего «понятого» значения), будет ли это действительно для всех понятых атрибутов? ( Microsoft IE6 Например, браузер Apple Safari не реализует все значения touch-action, только auto и manipulation, поэтому я могу сделать следующее:

body
{
    /* first set to manipulation, to at*/
    /* least disable double-tap-zoom on iOS Safari*/
    touch-action:manipulation;
    /* then set it to the actually desired */
    /* value of pan-y, supported by other */
    /* modern browsers */
    touch-action:pan-y;
}

Answer 1

Поскольку я понимаю ваш вопрос, я постараюсь дать вам более широкую картину и постараюсь объяснить каждый важный аспект, упомянутый вами.

1. Нет смысла создавать одно и то же правило и просто менять его значение снова и снова. Как CSS читает сверху вниз в теге или классе i.e; body {} в вышеприведенном случае, каждый раз, когда он читает одно и то же правило в пакете, он повторно создает экземпляр правила до тех пор, пока он не будет явно определен с помощью «важных» в конце правила.

2. Да, он работает так же просто, как вы указали для второго аспекта, и он определен.

3. Согласно MDN: CSS Если браузер обнаружит правило, которое он не понимает, он пропустит его и пойдет дальше.

Answer 2

Написано правило CSS и названы его части, например:

at-rule optional (conditions) {
  /* rule */
  /* begins with a selector list */
  selector1, selector2 /* {
    /* block rule */
    property1: valueA;
    property2: value2;
    property1: valueB;
  }
  /* end of rule */
}

• at-rule как @media <media-query-list> должно применяться, иначе все внутри игнорируется (может применяться через 2 секунды или раньше, если пользователь изменяет размер своего окна просмотра, например). Если он недействителен, он никогда не будет применен
• если какой-либо селектор в списке селекторов недопустим в этом браузере, все правило игнорируется
• для каждого свойства применяется последнее значение, понятное браузеру. Не имеет значения, находится ли оно в одном и том же правиле или в разных, в разных таблицах стилей и т. Д. Применяется специфичность селекторов (у at-rules нет никакой специфичности), поэтому селектор последнего допустимого объявления должен иметь более высокий или равной специфичности, чем вторая для последней, иначе она не будет применяться.

Итак:

1. Допустимо указывать свойство CSS несколько раз
2. Да
3. См. Выше (у вас есть опечатка: rgb(r, g, b) и rgba(r, g, b, a) понимаются современными браузерами, но не rgba(r, g, b))
4. Да

РЕДАКТИРОВАТЬ: это для авторских таблиц стилей (вы и я - авторы, веб-разработчики / дизайнеры) и есть еще один набор приоритетов, если учесть пользовательских стилей, пользовательских стилевых таблиц и !important ( У пользователя всегда есть последнее слово в сети: p).

Answer 3

Вы правы в своих предположениях. Согласно MDN: CSS Если браузер встречает объявление или правило, которое он не понимает, он просто пропускает его полностью, не применяя и не выдавая ошибку.

Читайте здесь: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS