元素链接缺少必需的属性

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 size另外，title属性对此具有特殊的语义元件。

html

— 9号
source

我无法重现该错误消息。

— 昆汀

它很奇怪...但是验证器仍然抛出错误。

— 2013年

大概您的问题中缺少某些上下文。

— 昆汀，

1

也许是它的问题，因为它不在标题中？

— 2013年

@ NO9：作为尤卡下面解释（和答案应该被表示为的答案，这样你可以有一个<link>的<body>以及内部：<link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />。适用于所有的浏览器，并验证它的所有有关的属性property。

— Frank Conijn 2014年

82

@stevelove的建议显然是可行的解决方案，但这是“为什么”问题的理论答案：

尽管在较旧的HTML规范中某个link元素无条件地无效body，但是HTML5具有更宽松的规则。根据HTML 5.1 Nightly（每夜或多或少，验证器会尝试跟上），只要link元素具有itemprop属性，也可以在文档正文中允许该元素（无论允许短语内容如何）。这似乎使错误消息更加令人困惑。解释的部分原因是验证器实际上是针对HTML5 + RDFa进行验证，而RDFa定义了该property属性。问题仍然是验证者要检查的特定RDFa定义，因为该定义也需要重新定义HTML规则。

无论如何，错误消息中的信息已过时。错误消息显然没有像验证程序的基本功能那样快地更新。

— Jukka K.Korpela
source

5

有关如何解决此问题，请参见hawkeye126的答案。

— frenchie 2015年

截至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
source

43

你<link>在里面<body>吗？如果是这样，请尝试将其放在<head>文档顶部。

— 史蒂夫洛夫
source

4

除了进行验证之外，您应该始终将样式表放在文档的顶部，以避免阻塞页面的其余部分，如此处所述：developer.yahoo.com/performance/rules.html#css_top

— stevelove 2013年

10

@stevelove（一年后/将来供参考）并非经常优化。在所有可能的情况中，最好将关键的CSS放在<style>文档的顶部，而将其余部分放在底部。这是更快打开页面的最佳方法。您可以在网上找到有关此BUT的文档，但并非总是可以做到这一点的（通常，业务代码的效率>性能）。

— Ludovic Guillaume

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是“微数据”属性，其用途与RDFaproperty属性基本相同）。

因此，我们有两个不同的属性，它们都独立影响link元素在文档中的出现位置，并且使验证器中的检查逻辑复杂化，从而使这种情况下很难发出更好，更有用的错误消息。

— sideshowbarker
source

1

为了将来的需要，这是我的评论：

在w3c页面中，我们有以下评论：

如果使用rel属性，则该元素仅限于head元素。与itemprop属性一起使用时，该元素可以在head元素和页面正文中使用，但要遵守微数据模型的约束。

因此，可以通过将更改为来解决错误，因为它将rel用于头部并且可以用于身体。itemproprelitemprop

希望它能帮助到别人。

— h3nr1ke
source

2

我找到了另一种解决方法，您可以将rel和property组合在同一标签中，例如 <link rel='stylesheet' property='stylesheet' href='custom.css' type='text/css' media='screen' />

— h3nr1ke 2014年

0

它希望它在您的脑海中。但是，如果CSS不太重要，无法立即加载，您将获得google的pagespeed工具，告诉您将其放在正文的底部。

例如，我使用一个jQuery主题（redmond）来设置我的自动完成的样式。无需将其放在我的页面顶部，因为它只会减慢其他所有内容的速度。

因此，不必太担心完美的w3c验证。

— 兰迪·格林康
source