В ссылке на элемент отсутствует обязательное свойство атрибута

79 
<!DOCTYPE html>
...
<link rel='stylesheet' id='basecss-css' href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />

Почему валидатор ( http://validator.w3.org/ ) отклоняет это? Какой атрибут является «обязательным», о котором я не знаю?

Ошибка:

Строка ошибки 408, столбец 142: в ссылке на элемент отсутствует обязательное свойство атрибута. … / Modules / 14ce1e21 / peadig-eucookie.css 'type =' text / css 'media =' all '/> Атрибуты для ссылки на элемент: Глобальные атрибуты href crossorigin rel media hreflang type sizes Кроме того, атрибут title имеет особую семантику для этого элемент.

html no9
источник
Я не могу воспроизвести это сообщение об ошибке.
Квентин
это странно ... но валидатор все равно выдает ошибку.
no9
Предположительно, в вашем вопросе отсутствует какой-то контекст.
Квентин
1
возможно, проблема в том, что ее нет в заголовке?
no9
@ No9: Как Юкка объяснено ниже (и какой ответ должен быть указан как в ответ, таким образом , вы можете иметь <ссылка> внутри <тело> , а также: <link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />.. Работает во всех браузерах, и подтверждает это все об атрибуте property.
Фрэнк Конейн,

Ответы:

82

Совет от @stevelove, по-видимому, является практическим решением, но вот теоретический ответ на вопрос «почему»:

Хотя linkэлемент безусловно недопустим в bodyстарых спецификациях HTML, HTML5 имеет более разрешительные правила. Согласно HTML 5.1 Nightly (что более или менее то, за чем пытается не отставать валидатор), linkэлемент также разрешен в теле документа (везде, где разрешено фразовое содержание), при условии, что у него есть itempropатрибут. Это, кажется, делает сообщение об ошибке еще более загадочным. Частично это объясняется тем, что валидатор фактически проверяет соответствие HTML5 + RDFa, а RDFa определяет propertyатрибут. Проблема по-прежнему заключается в том, какое именно определение RDFa проверяет валидатор, поскольку определение также потребует переопределения правил для HTML.

В любом случае информация в сообщении об ошибке устарела. Сообщения об ошибках, по-видимому, обновляются не так быстро, как базовые функции валидатора.

Юкка К. Корпела
источник
5
См. Ответ hawkeye126 о том, как это исправить.
frenchie 01
Это сообщение об ошибке больше НЕ
TheAmazingKnight,
91

Добавить 

property='stylesheet'

если вы не хотите перемещать ссылку на <head>документ.

<link rel='stylesheet' property='stylesheet' id='basecss-css'  href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />
9ete
источник
43

Ты <link>внутри <body>? Если да, попробуйте поместить его <head>вверху документа.

Stevelove
источник
4
Помимо проверки, вы всегда должны размещать таблицы стилей вверху документа, чтобы избежать блокировки остальной части страницы от рендеринга, как описано здесь: developer.yahoo.com/performance/rules.html#css_top
stevelove
10
@stevelove (год спустя / для справки в будущем) Это не часто оптимизируется. В лучшем из возможных вариантов вы должны поместить критически важные CSS-файлы в <style>верхней части документа, а остальные - внизу. Это лучший способ открыть страницу быстрее. Вы можете найти документацию по этому поводу в Интернете, НО не всегда это возможно (и часто эффективность бизнес-кода> производительность).
Людовик Гийом
15

Сопровождение валидатора W3C HTML5 здесь. Как указано в другом ответе, помимо проверки требований в самой спецификации HTML5, валидатор также проверяет соответствие требованиям спецификации HTML + RDFa 1.1:

http://www.w3.org/TR/html-rdfa/

И хотя сама спецификация HTML говорит, linkчто обычно не разрешается в теле ＊, спецификация RDFa говорит, что если linkэлемент имеетproperty атрибут, он разрешен в теле.

Таким образом, это сообщение валидатора в основном говорит: 「linkЭлемент разрешен здесь, только если у него есть propertyатрибут. Но у этого конкретного linkэлемента нет propertyатрибута. 」

＊ В самой спецификации HTML также говорится, что linkэлемент разрешен в теле, если у него есть itempropатрибут, но только если linkэлемент не имеет relзначения. ( itempropэто атрибут «Микроданные», назначение которого в основном такое же, как у propertyатрибута RDFa ).

Таким образом, у нас есть два разных атрибута, каждый из которых независимо влияет на то, где в документе linkразрешено появляться элементу, и это усложняет логику проверки в валидаторе таким образом, что в этом случае сложно создать более полезное сообщение об ошибке.

сторонник
источник
1

На всякий случай вот мой комментарий:

На странице w3c есть следующий комментарий:

Если используется атрибут rel, элемент ограничивается элементом head. При использовании с атрибутом itemprop элемент может использоваться как в элементе заголовка, так и в теле страницы, в зависимости от ограничений модели микроданных.

Таким образом, ошибку можно решить, изменив relна itemprop, потому что relэто должно использоваться в голове и itempropможет использоваться в теле.

Надеюсь, это кому-то поможет.

h3nr1ke
источник
2
Я нашел другой способ решить эту проблему, например, вы можете объединить rel и property в одном теге <link rel='stylesheet' property='stylesheet' href='custom.css' type='text/css' media='screen' />
h3nr1ke
0

Он хочет, чтобы это было у вас в голове. Однако, если CSS не слишком важен для загрузки сразу, вы получите инструмент Google Pagespeed, предлагающий поместить его в нижнюю часть тела.

В качестве примера я использую одну из тем jquery (редмонд) для стилизации автозаполнения. Не нужно помещать это в начало страницы, так как это просто замедлит все остальное.

Так что не беспокойтесь об идеальной проверке w3c.

Рэнди Гринкорн
источник