엄밀히 말하면, style
태그가 head
HTML 문서 내부에 있어야 합니까? 4.01 표준은 다음과 같이 암시하지만 명시 적으로 언급되지 않았습니다.
STYLE 요소를 사용하면 작성자가 문서 헤드에 스타일 시트 규칙을 넣을 수 있습니다. HTML은 문서의 HEAD 섹션에 원하는 수의 STYLE 요소를 허용합니다.
스타일 요소를 본문에 넣는 앱이 있고 테스트 한 모든 브라우저가 스타일 요소를 사용하는 것처럼 보이기 때문에 “엄격히 말해서”라고 말합니다. 그것이 실제로 합법적인지 궁금합니다.
답변
style
head
문서 에만 포함되어야 합니다.
검증 포인트 이외에 사용하는 경우 당신이 관심을 가질만한 한 가지주의 style
온이 body
는 IS 스타일이 적용되지 않은 내용의 플래시 . 브라우저 는 표시 후 스타일이 지정된 요소를 가져 와서 크기 / 모양 / 글꼴 및 / 또는 깜박임으로 이동합니다. 그것은 일반적으로 나쁜 장인의 징조입니다. 일반적으로 style
원하는 위치에 놓아 둘 수 있지만 가능할 때마다 피하십시오.
HTML 5는 태그를 본문 어디에나 포함 scoped
시킬 수 있는 속성을 도입 style
했지만 다시 제거했습니다.
답변
짧은 답변
-
현재 사양에 따르면 예,
style
요소 는 항상에 있어야 합니다head
. 예외는 없습니다 (style
요소 를 계산하려는 경우 element 내부의template
요소 제외 ). -
역사적으로 항상 그런 것은 아닙니다. 스펙의 세부 사항 및 히스토리에 관심이있는 경우 계속 읽으십시오.
-
사양 사용, 말씀 상관없이
style
요소body
않는 모든 주요 브라우저에서 다소간 일을. 그러나 스펙을 위반하고 렌더링 성능 저하 또는 “스타일이 지정되지 않은 컨텐츠의 플래시”와 같은 바람직하지 않은 결과를 초래할 수 있기 때문에 나쁜 습관으로 간주됩니다.
사양 내역
style
요소가 HTML 2에 존재하지 않았습니다 . 그것들은 HTML 3.0에서 도입되었으며, 여기서 Head Element 에는 포함될 수있는 요소 목록에는 포함 되었지만 The Body Element 에는있을 수있는 요소 목록에는 포함 되지 않았습니다 . 따라서 요소가 처음 지정된 시점에는 해당 요소 만에 포함될 수 있습니다 head
.
HTML 5 scoped
가 style
요소에 대해 (제거 된 이후) 속성을 도입 할 때까지는 (다른 표현을 사용하여 표현되었지만) 여전히 그렇습니다 . 이 속성은 존재 style
하는 경우 해당 요소의 하위 항목 만 스타일링하기 위해 요소를 본문의 요소 내에 배치 할 수 있도록하기 위한 것입니다. 그러나이 기능은 실제 브라우저에서는 구현되지 않았으며 (적어도 개발자 플래그를 통해 활성화하지 않아도 됨) “구현 자의 관심 부족으로 인해” W3C 및 WhatWG 사양에서 제거되었습니다 . 그 이후에는 style
메타 데이터 컨텐츠를 허용하는 컨텍스트에서만 요소가 허용되었으며, 이는 헤드뿐입니다. 따라서 우리는 HTML 5 이전과 같은 규칙으로 돌아 왔습니다.
그러나, 두 규격 조직에 의한 오류로 인해, 두 규격에 부록으로 포함 된 비 규범 적 요소의 인덱스는의 제거를 반영하도록 적절히 업데이트되지 않아 scoped
, 규범 규격과 일치하지 않습니다. 나는 이것을 WhatWG 와 W3C에 지적했다. 했으며, 두 가지 사양이 발산되는 모션 이벤트에 무의식적으로 설정했습니다.
규범 사양과 비 규범 색인 사이의 불일치에 대한 WhatWG의 솔루션은 내 패치 를 수락하는 것이 었습니다 수정하는 .
반면에 W3C는 대신 에 표준을 업데이트하여 표준 사양 을 업데이트하기 위해 동등한 패치를 거부 style
했습니다.body
문제를 일으킬 수 있으며 “주의를 기울여”수행해야한다는 점에주의를 기울였습니다. 이 변경의 원인은 사양을 실제 브라우저 동작과 일치시키는 것입니다.
따라서 2017 년 3 월부터이 질문에 대한 공식 답변은 귀하가 청취하기로 선택한 표준 조직에 따라 다릅니다. (일반적으로 더 존경받는) WhatWG 사양에 나열된 경우에는 style
요소가 허용되지 않습니다 body
. W3C 사양에 나열된 경우 허용되었지만 권장되지는 않습니다.
W3C와 WhatWG 사이의 2019 년 4 월 평화 조약으로이 어리석은 일이 (아마도 다른 많은 불일치와 같이) 끝났으며 , WhatWG 사양이 진정한 살아있는 HTML 표준이 될 것이라는 데 동의했으며 W3C는 단순히 번호가 매겨진 스냅 샷을 공개합니다. 경쟁 사양을 병렬로 개발하는 대신 HTML 사양. 따라서 2017 년에서 W3C 포크로 변경 style
하여body
임의의 전류 사양의 더이상 부분 없다; 그것은 단지 역사의 호기심 일뿐입니다.
따라서 오늘날 공식적으로 허용되는 사항을 결정 하기 위해 WhatWG 사양 만 검토하면 됩니다. 다음과 같이 말합니다.
4.2.6. 그만큼
style
요소카테고리 :
이 요소를 사용할 수있는 컨텍스트 :
어디 메타 데이터 콘텐츠는 예상된다.
A의<noscript>
A 원소의 자식입니다<head>
요소입니다.
단일 페이지 스펙을 통한 CTRL-Fing 은 컨텐츠 모델에 메타 데이터 컨텐츠가 포함 된 유일한 요소가 요소라는 것을 보여줍니다 head
.
앞에서 언급 한 비 규범 적 요소 색인은 요소에 대해 허용되는 유일한 부모 style
가 head
또는 noscript
요소 임을 확인합니다 .
답변
다른 답변은 정확하지만 표준이 외부 스타일을 허용하지 않는 곳을 아무도 설명 하지 않은 것에 놀랐습니다.head
.
실제로 The head
Element (및 DTD ) 섹션에 있습니다 .
<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->
예, 알아요 DTD는 읽기가 어렵습니다.
이것은 STYLE
요소가 발생 하는 유일한 장소 이므로 암시 적으로 다른 곳에서는 유효하지 않습니다.
답변
그들은 머리 밖으로 나가지 않아도되지만 어쨌든 효과가 있습니다. 빠르게 깜박 거릴 수 있습니다. 사이트는 헤드 외부의 스타일 태그로 유효성을 검사해서는 안되지만 실제로 중요합니까? 또한 링크 태그는 의도하지 않아도 헤드 외부에서도 작동합니다.
답변
다른 답변과 마찬가지로 실제로있을 필요는 없습니다. 그러나 유효성을 검사하지는 않습니다. 이 경우에는 이것이 중요하거나 중요하지 않을 수 있지만 html 렌더링은 전적으로 브라우저에 달려 있습니다. 내가 아는 바로는 오늘날 사용되는 모든 브라우저가 헤드 외부에 배치하는 것을 지원하지만 향후 브라우저 및 향후 브라우저 릴리스에 대해 보장 할 수는 없습니다.
표준을 지키면 더 안전합니다. 토론에 훨씬 더 안전합니다.
답변
2017 년 12 월 14 일 (위에서 언급 한 초기 초안 이 아님) HTML5.2 W3C 권장 사항에 포함 할 수 있다고 나와 있습니다 <style>
.
“유량 함량이 예상되는 신체에서.”
(4.2.6 항)
답변
내부 및 외부의 스타일 태그 <head>
는 W3C 규칙으로 검증되지 않습니다.