요소 링크에 필수 속성 속성이 없습니다.

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
소스
나는 재현 할 수없는 그 오류 메시지.
— Quentin
그 이상한 ...하지만 유효성 검사기는 어쨌든 오류를 던지고 있습니다.
— no9 2013-08-31
아마도 귀하의 질문에서 누락 된 컨텍스트가 있습니다.
— Quentin
1
헤더에 없기 때문에 문제일까요?
— no9 2013-08-31
@ no9 :만큼 유카는 아래에 설명 (어느 응답으로 표시되어야 , 대답 당신은 <링크>를 가질 수있는이 방법을뿐만 아니라 <BODY> 내부 : .. 모든 브라우저 및 유효성의 작품이 속성에 대한 모든입니다 .<link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />property
— Frank Conijn 2014 년

답변:

82

@stevelove의 조언은 분명히 실용적인 해결책이지만 여기에 "왜"질문에 대한 이론적 대답이 있습니다.

이전 HTML 사양에서는 link요소가 무조건 유효하지 않지만 bodyHTML5에는 더 관대 한 규칙이 있습니다. HTML 5.1 Nightly (검증자가 따라 잡으려고 시도하는 것)에 따르면, link요소 는 속성 이있는 경우 문서 본문에서도 허용됩니다 (구문 내용이 허용되는 경우) itemprop. 이것은 오류 메시지를 더욱 혼란스럽게 만드는 것 같습니다. 설명의 일부는 유효성 검사기가 실제로 HTML5 + RDFa에 대해 유효성을 검사하고 있으며 RDFa는 property속성을 정의한다는 것입니다. 정의가 HTML에 대한 규칙을 재정의해야하므로 유효성 검사기가 검사하는 특정 RDFa 정의에 대한 문제는 여전히 남아 있습니다.

어쨌든 오류 메시지의 정보가 오래되었습니다. 오류 메시지는 유효성 검사기의 기본 기능만큼 빠르게 업데이트되지 않습니다.

— 주카 K. 코르 펠라
소스
5
이 문제를 해결하는 방법에 대한 hawkeye126의 답변을 참조하십시오.
— frenchie
이 오류 메시지는 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 (1 년 후 / 향후 참조 용) 자주 최적화되지 않습니다. 가능한 모든 세계에서 중요한 <style>것은 문서 상단에 스크롤없이 볼 수있는 CSS를 배치하고 나머지는 하단에 배치해야합니다. 페이지를 더 빨리 여는 가장 좋은 방법입니다. 웹에서 이에 대한 문서를 찾을 수 있지만 항상 가능한 것은 아닙니다 (그리고 종종 비즈니스 코드의 효율성> 성능).
— Ludovic Guillaume
15

W3C HTML5 유효성 검사기 관리자는 여기에 있습니다. 다른 답변에서 지적했듯이 HTML5 사양 자체의 요구 사항을 확인하는 것 외에도 유효성 검사기는 HTML + RDFa 1.1 사양의 요구 사항을 확인합니다.

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

HTML 스펙 자체 link는 일반적으로 body *에서 허용되지 않는다고 말하지만 RDFa 스펙은 link요소에 property속성 이 있으면 본문에서 허용된다고 말합니다 .

따라서 유효성 검사기 메시지는 기본적으로`` link요소는 property속성 이있는 경우에만 여기에서 허용됩니다 . 하지만이 특정 link요소에는 property속성 이 없습니다 .」

＊ HTML 스펙 자체에서도 속성 link이있는 경우 본문에 요소가 허용 itemprop되지만 link요소에 rel값 이없는 경우에만 해당 요소가 허용 된다고 말합니다 . ( itemprop은 목적이 기본적으로 RDFa property속성 과 동일한 "마이크로 데이터"속성입니다 .)

따라서 문서에서 link요소가 표시 될 수 있는 위치에 독립적으로 영향 을 미치고이 경우에 더 좋고 유용한 오류 메시지를 생성하기 어렵게 만드는 방식으로 유효성 검사기의 검사 논리를 복잡하게 만드는 두 가지 다른 속성 이 있습니다.

— 사이드 쇼바 커
소스
1

미래의 필요를 위해 여기에 내 의견이 있습니다.

에서 W3C 페이지 우리는 다음과 같은 논평을 가지고 :

rel 속성이 사용되는 경우 요소는 head 요소로 제한됩니다. itemprop 속성과 함께 사용하면 마이크로 데이터 모델의 제약 조건에 따라 헤드 요소와 페이지 본문 모두에서 요소를 사용할 수 있습니다.

오류가 변경함으로써 해결 될 수 있도록 rel위해 itemprop때문에 rel, 헤드에 사용되어야하며, itemprop본문에 사용될 수있다.

누군가에게 도움이되기를 바랍니다.

— h3nr1ke
소스
2
난 당신이 예를 들어, 동일한 태그에 확인해과 재산을 결합 할 수 있습니다, 그것을 해결하는 또 다른 방법을 발견했다 <link rel='stylesheet' property='stylesheet' href='custom.css' type='text/css' media='screen' />
— h3nr1ke
0

그것은 당신의 머리 속에 있기를 원합니다. 그러나 CSS가 즉시로드하기에 너무 중요하지 않은 경우 Google의 pagespeed 도구가 본문 하단에 삽입하라는 메시지를 표시합니다.

예를 들어, jquery 테마 (redmond) 중 하나를 사용하여 자동 완성 스타일을 지정합니다. 다른 모든 것을 느리게 할 뿐이므로 내 페이지 상단에 넣을 필요가 없습니다.

따라서 완벽한 w3c 유효성 검사에 대해 너무 걱정하지 마십시오.

— 랜디 그린 콘
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.