У посиланні на елемент відсутня обов’язкова властивість атрибута

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 типу Також атрибут title має особливу семантику щодо цього елемент.

html 
— No9
джерело
Я не можу відтворити це повідомлення про помилку.
— Квентін
це дивно ... але валідатор все одно видає помилку.
— no9
Імовірно, є якийсь контекст, якого ви втрачаєте у своєму питанні.
— Квентін
1
можливо, проблема в тому, що це не в заголовку?
— no9
@ No9: Як Юкка пояснено нижче (і яку відповідь повинен бути вказаний як в відповідь, таким чином , ви можете мати <посилання> всередині <тіло> , а також: <link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />.. Працює у всіх браузерах, і підтверджує це все про атрибут property.
— Frank Conijn

Відповіді:

82

Порада @stevelove, очевидно, є практичним рішенням, але ось теоретична відповідь на запитання "чому":

Хоча в попередніх специфікаціях HTML linkелемент беззастережно недійсний body, HTML5 має більш дозвільні правила. Відповідно до HTML 5.1 Nightly (що більш-менш намагається не відставати від валідатора), linkелемент також допускається в тілі документа (скрізь, де дозволено вміст фраз), за умови, що він має itempropатрибут. Здається, це робить повідомлення про помилку ще більш загадковим. Пояснення полягає в тому, що валідатор насправді перевіряє HTML5 + RDFa, а RDFa визначає propertyатрибут. Проблема все ще залишається, щодо якого конкретного визначення RDFa перевіряє валідатор, оскільки у цьому визначенні також потрібно буде перевизначити правила для HTML.

Інформація в повідомленні про помилку в будь-якому випадку застаріла. Повідомлення про помилки, очевидно, оновлюються не так швидко, як основна функціональність валідатора.

— Юкка К. Корпела
джерело
5
Дивіться відповідь hawkeye126 про те, як це виправити.
— французька
Це повідомлення про помилку більше НЕ присутнє станом на 2017.
— 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>вгорі документа.

— стевелов
джерело
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атрибута. 」

Itself Сама специфікація HTML також говорить про те, що linkелемент дозволений у тілі, якщо він має itempropатрибут, але лише якщо linkелемент не має relзначення. ( itempropце атрибут "Мікродані", мета якого в основному така ж, як і propertyатрибут RDFa ).

Отже, ми маємо два різних атрибути, які обидва незалежно впливають на те, де в документі linkдозволено з'являтись елемент, і це ускладнює логіку перевірки у валідаторі таким чином, що ускладнює видачу кращого, кориснішого повідомлення про помилку для цього випадку.

— боковий шоубаркер
джерело
1

Лише для майбутніх потреб, ось мій коментар:

На сторінці w3c ми маємо такий коментар:

Якщо використовується атрибут rel, елемент обмежений елементом head. При використанні з атрибутом itemprop елемент може використовуватися як в елементі head, так і в тілі сторінки, з урахуванням обмежень моделі мікроданих.

Отже, помилку можна вирішити, замінивши 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, який повідомляє, що потрібно помістити його в нижню частину тіла.

Як приклад, я використовую одну з тем jquery (redmond) для стилізації мого автозавершення. Не потрібно розміщувати це у верхній частині моєї сторінки, оскільки це просто сповільнить усе інше.

Тож не турбуйтеся надто про ідеальну перевірку w3c.

— Ренді Грінкорн
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.