Фоновые градиенты CSS3 не проверяются, может кто-нибудь сказать мне, почему? Пример кода внутри - PullRequest
Новая
       14

Фоновые градиенты CSS3 не проверяются, может кто-нибудь сказать мне, почему? Пример кода внутри

5 голосов
/ 27 декабря 2011

Может кто-нибудь сказать мне, почему следующий css не проверяет?Я пытался исследовать это сам без удачи.Вся документация, которую я прочитал, говорит, что именно поэтому нужно делать градиенты в css3. 

#header {
  color: white;
  font-size: 12px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  background: black;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  width: 100%;
  height: 35px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  position: fixed;
  top: 0px;
  z-index: 1000;
}

Вот ошибки проверки, которые я получаю:

W3C CSSРезультаты валидатора для TextArea (уровень CSS 3)

Извините!Мы нашли следующие ошибки (6)

URI: TextArea

6 # Ошибка значения заголовка: background-color -moz-linear-Gradient (top, rgba (0,0,0,0.65) 0%, rgba (0,0,0,0) 100%) не является значением цвета фона: -moz-linear-Gradient (top, rgba (0,0,0,0.65) 0%, rgba (0, 0,0,0) 100%)

7 # Ошибка значения заголовка: background-color -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, rgba (0,0), 0,0.65)), color-stop (100%, rgba (0,0,0,0))) не является значением цвета фона: -webkit-градиент (линейный, слева вверху, слева внизу, цвет-стоп)(0%, rgba (0,0,0,0.65)), color-stop (100%, rgba (0,0,0,0)))

8 # Ошибка значения заголовка: background-color-webkit-linear-Gradient (сверху, RGBA (0,0,0,0,65) 0%, RGBA (0,0,0,0) 100%) не является значением цвета фона: -WebKit-линейный-градиент (top, rgba (0,0,0,0,65) 0%, rgba (0,0,0,0) 100%)

9 # Ошибка значения заголовка: background-color -o-linear-Gradient (top, rgba (0,0,0,0.65) 0%, rgba (0,0,0,0) 100%) не является значением цвета фона: -o-linear-Gradient (top, rgba (0,0,0,0,65) 0%, rgba (0,0,0,0) 100%)

10 # Ошибка значения заголовка: фоновый цвет -ms-линейный градиент (top, rgba (0,0,0,0.65) 0%, rgba (0,0,0,0) 100%) не является значением цвета фона: -ms-linear-Gradient (top, rgba (0,0), 0,0.65) 0%, rgba (0,0,0,0) 100%)

11 # Ошибка значения заголовка: линейный градиент цвета фона (верхний, rgba (0,0,0,0,65) 0%, rgba (0,0,0,0) 100%) не является значением цвета фона: линейный градиент (верх, rgba (0,0,0,0.65) 0%, rgba (0,0, 0,0) 100%)

Ответы [ 3 ]

2 голосов
/ 27 декабря 2011

Это дубликат: Проверка градиента фона CSS

Хорошее объяснение:

«Действительный» - очень изменчивый термин в отношении CSS3 в современном веб-дизайне. развитие.

Если вы пытались проверить код 'this' в CSS3 W3C Валидатор, он покажет кучу ошибок разбора. Это связано с характер реализации CSS3 на данный момент, и в основном из-за префиксы вендоров, необходимые для создания градиентов CSS3.

Теперь на флип сторона, мы использовали правильный и «правильный» синтаксис в соответствии с производители браузеров для этих градиентов. Тот факт, что W3C еще предстоит доработать спецификации CSS3 означает, что до этого у нас не будет конкретный ответ относительно того, что является действительным или недействительным, когда дело доходит до CSS3. Все, что мы можем сделать прямо сейчас, это следовать прогрессивным методам улучшения, и обратите внимание на поставщиков браузеров для направления и правильного реализация CSS3.

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/comment-page-1/#comment-243334

0 голосов
/ 27 декабря 2011

убедитесь, что у вас установлена ​​правильная опция для "профиля". Это должен быть уровень 3 CSS. И валидатор на самом деле не поддерживает специфичные для поставщика CSS.

0 голосов
/ 27 декабря 2011

Расширения, специфичные для поставщика не проверять .Кроме того, вам может потребоваться изменить параметры службы проверки W3C, чтобы изменить уровень профиля CSS, как показано в этой ссылке .

В любом случае, я не буду беспокоиться о том, что мои объявления CSS3 не проверяют, поскольку валидация - это всего лишь руководство для исправления возможных ошибок кода.

...