<STYLE>이 HTML 문서의 <HEAD>에 있어야합니까?

136

엄밀히 말하면, style태그가 headHTML 문서 내부에 있어야 합니까? 4.01 표준은 다음과 같이 암시하지만 명시 적으로 언급되지 않았습니다.

STYLE 요소를 사용하면 작성자가 문서 헤드에 스타일 시트 규칙을 넣을 수 있습니다. HTML은 문서의 HEAD 섹션에 원하는 수의 STYLE 요소를 허용합니다.

스타일 요소를 본문에 넣는 앱이 있고 테스트 한 모든 브라우저가 스타일 요소를 사용하는 것처럼 보이기 때문에 "엄격히 말해서"라고 말합니다. 그것이 실제로 합법적인지 궁금합니다.

html  coding-style  html-head 
— 이 올슨
소스
1
확실치 않은 경우 W3C 마크 업 유효성 검사기가 항상 도움이됩니다. :) http://validator.w3.org/
— Lazlo
많은 웹 메일 서비스가 단순히 헤드 요소를 제거하여 스타일이 사라졌기 때문에 <head>의 <put> 스타일에 대한 예외는 html 전자 메일입니다.
— user132837
1
사양은 필요로 지원 브라우저 style에를 body그 관계없이 저자 가이드 라인 섹션 암시 무슨의 나를 위해 충분히 좋은, 그래서.
— 레이스 케니

답변:

104

stylehead문서 에만 포함되어야 합니다.

검증 포인트 이외에 사용하는 경우 당신이 관심을 가질만한 한 가지주의 style온이 body는 IS 스타일이 적용되지 않은 내용의 플래시 . 브라우저 는 표시 후 스타일이 지정된 요소를 가져 와서 크기 / 모양 / 글꼴 및 / 또는 깜박임으로 이동합니다. 그것은 일반적으로 나쁜 장인의 징조입니다. 일반적으로 style원하는 위치에 놓아 둘 수 있지만 가능할 때마다 피하십시오.

HTML 5는 태그를 본문 어디에나 포함 scoped시킬 수 있는 속성을 도입 style했지만 다시 제거했습니다.

— 에스테반 ber 베르
소스
6
지금까지 Firefox 만 scoped속성을 지원하는 것으로 보입니다 . caniuse.com/#feat=style-scoped를 참조하십시오 .
— Jaime Hablutzel
2
링크 된 기사가 링크 썩음으로 사라 졌으므로 다음은 사용 가능한 최신 아카이브 버전입니다. web.archive.org/web/20150525042412/http://bluerobot.com/web/css/…
— Zachary Murray
@ZacharyMurray 감사합니다! 본문의 링크를 웹 아카이브 링크로 업데이트했습니다.
— Esteban Küber
1
사양은 브라우저가 style태그 를 지원하도록 브라우저를 요구하므로 사양 body의 작성자 부분에도 불구하고 본문 스타일이 유효하다고 생각합니다. github.com/whatwg/html/issues/1605#issuecomment-235961103
— WraithKenny
19

짧은 답변

  • 현재 사양에 따르면 예, 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요소 임을 확인합니다 .

— 마크 애 머리
소스
18

다른 답변은 정확하지만 표준이 외부 스타일을 허용하지 않는 곳을 아무도 설명 하지 않은 것에 놀랐습니다.head .

실제로 The headElement (및 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요소가 발생 하는 유일한 장소 이므로 암시 적으로 다른 곳에서는 유효하지 않습니다.

— 사용자 123444555621
소스
6
나 진짜 혼란 스럽다.
— dav_i
1
IIRC에 DTD가없는 HTML5를 지금 사용해야합니다. HTML5 사양만으로 말하는 것은 존재하거나 존재하지 않는 것입니다.
— Jan Kyu Peblik
14

그들은 머리 밖으로 나가지 않아도되지만 어쨌든 효과가 있습니다. 빠르게 깜박 거릴 수 있습니다. 사이트는 헤드 외부의 스타일 태그로 유효성을 검사해서는 안되지만 실제로 중요합니까? 또한 링크 태그는 의도하지 않아도 헤드 외부에서도 작동합니다.

— geowa4
소스
5
"그들이 효과가있다"고 말하는 것은 약간 까다 롭습니다. 기껏해야 대부분의 최신 브라우저는 여전히 스타일을 렌더링한다고 말할 수 있지만 본질적으로 "작동"하는이 오류에 대해서는 아무것도 없습니다. 향후 버전의 모든 브라우저에서는 작동하지 않으며 아무런 문제가 없습니다.
— 척
6
imo, 스타일 렌더링 = 작동; 까다로운 일은 없습니다. 마지막 문장을 다시 써야합니다. 그것은 말도 안돼. 나는 그것이 유효하지 않다고 말했을 때 그것이 "올바르지 않은"방법을 언급 했으므로, 나는 당신이 그 문장의 의미를 이해해서는 안됩니다.
— geowa4
문제는 스타일 이 지정 되어 있어도 컨텐츠가 시작될 때 내용이 약간 깜박 거리는 것 style입니다.
— Esteban Küber
2
스타일 태그는 본문에서 첫 번째 경우를 제외하고
— geowa4
집에서 시도하지 마십시오.
— TechNyquist
3

다른 답변과 마찬가지로 실제로있을 필요는 없습니다. 그러나 유효성을 검사하지는 않습니다. 이 경우에는 이것이 중요하거나 중요하지 않을 수 있지만 html 렌더링은 전적으로 브라우저에 달려 있습니다. 내가 아는 바로는 오늘날 사용되는 모든 브라우저가 헤드 외부에 배치하는 것을 지원하지만 향후 브라우저 및 향후 브라우저 릴리스에 대해 보장 할 수는 없습니다.

표준을 지키면 더 안전합니다. 토론에 훨씬 더 안전합니다.

— 루이스
소스
3

2017 년 12 월 14 일 (위에서 언급 한 초기 초안 이 아님) HTML5.2 W3C 권장 사항에 포함 할 수 있다고 나와 있습니다 <style>.

"유량 함량이 예상되는 신체에서." (4.2.6 항)

— 아나 하타
소스
W3C는 공식적으로 WhatWG 사양이 이전의 모든 사양을 더 이상 사용하지 않으며 WhatWG 사양은 style에서 허용하지 않는다고 공식적으로 명시 하고 있지만, body우리는이를 명백히 금지하고 있습니다. 우리가 도착한 비틀기 길에 관심이 있다면 내 대답을 참조 하십시오.
— Mark Amery
2

내부 및 외부의 스타일 태그 <head>는 W3C 규칙으로 검증되지 않습니다.

— mp
소스
-1

헤드 섹션 또는 본문 섹션 내부 또는 html 태그 외부에서도 스타일 태그를 사용할 수 있습니다 (html 외부는 권장되지 않음). 실시간 프로젝트에서는 여러 번 HTML 태그의 스타일 태그를 사용하는 것을 볼 수 있습니다.

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