"HTML"페이지의 "HEAD"요소 외부에 CSS 스타일을 선언 하시겠습니까?
내 사용 사례는 다음과 같습니다.
Divs 와 같이 유효한 HTML 조각 이지만 유효한 페이지가 아닌 부분을 사용하여 HTML 페이지 를 작성하고 있습니다 . 이러한 요소는 CSS 를 사용하여 스타일을 관리합니다.
각 조각이 고유 한 스타일 요구 사항을 담당하고 기본 조각 ( "HTML"태그가있는 조각)의 스타일 시트 선언에 의존하지 않도록하고 싶습니다.
그래서 여기에 질문 이 있습니다. HEAD 요소 외부에 CSS 스타일을 추가하는 (표준) 방법이 있습니까 ( "style"속성을 통한 인라인 스타일 제외)?
프레임을 사용할 수 있다고 생각하지만이 솔루션을 피하고 싶습니다.
도움을 주셔서 미리 감사드립니다.
최종 편집 :
zzzzBov , JMC Creative 및 moontear 의 제안 덕분에 몇 가지 테스트 후 답이 있습니다.
- 자바 스크립트를 사용 하여 일부 CSS 스타일 시트를 동적으로로드 : HTML4 / XHTML 및 HTML5 호환 ,
- "스타일"요소를 포함 직접 조각 내부 : 비 호환 으로 HTML4 / XHTML을 하지만 것 같다 광범위하게 지원 하고있다 HTML5 규격을 .
이메일 클라이언트를 지원해야하므로 더 간단한 두 번째 솔루션을 사용했습니다.
여러분의 관심과 참여에 감사드립니다.
tl; dr :
당신의 성숙도 수준에 도달하지 않은 HTML 기능을 사용하여 편안하지 않은 경우 W3C 권고안을 추가하는 표준 방법이없는 <style>받는 <body>페이지.
덜 성숙한 기능을 사용하는 것이 편하다면 HTML5.2 <style>는 흐름 콘텐츠가 예상되는 모든 곳 (즉 <body>, 대부분의 요소) 이 허용되도록 요소를 표준화하는 것으로 보입니다 .
이미 [scoped]속성을 사용하고있는 [scoped]경우에는 표준화되지 않았고 브라우저 지원이 손실 되므로 속성 사용을 중지하십시오 .
역사:
HTML 4.01
HTML4.01에서는 스타일 요소 <head>만 허용되었습니다 . 브라우저는 저자 가 쓴 것보다 저자 가 원하는 것을 렌더링하려고 노력하는 데 부지런히 해당 페이지가 기술적으로 유효하지 않음에도 불구하고 <style>요소를 존중 했습니다 <body>.
HTML 5
<style>요소는 무효로 계속<body>
HTML 5.1
HTML5.1 사양 의 일부 작업 초안 에서 <style>요소는 [scoped]속성을 허용하여 <style>요소가 흐름 콘텐츠 (예 :) 에서 사용되도록 허용했습니다 <body>.
그것이 어떻게 사용될 수 있었는지에 대한 예는 다음과 같습니다.
<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
<style scoped>
p {
color: darkred;
}
</style>
<p>this text would be dark red</p>
</div>
<p>this text would be black</p>
범위 지정 기능에 대한 지원은 버전 21의 Firefox에 추가되었으며 버전 20의 플래그 뒤에 Chrome에 추가되었습니다 . 이 기능은 충분한 지원을받지 못했기 때문에 나중에 HTML5.1 작업 초안 에서 제거되었습니다 .
Chrome은 버전 36에서 처음으로 기능을 제거했습니다 . Firefox는 이후 버전 55의 플래그 뒤에 기능을 설정했습니다.
HTML 5.2
에서 HTML5.2 사양 7 월 2017 년 작업 초안 , 지원이 추가 된 <style>요소는 흐름의 내용에 허용 할 :
이 요소를 사용할 수있는 컨텍스트 :
- 메타 데이터 콘텐츠가 예상되는 위치입니다.
- A의
<noscript>A 원소의 자식입니다<head>요소입니다.- 흐름 콘텐츠가 예상되는 본문에서.
내 강조
At the time of writing this addition has remained in the HTML5.2 spec, which is currently at the Candidate Recommendation maturity level.
While this makes using <style> elements in the <body> still somewhat of a risk, this particular change is standardizing something that browsers have supported for many years.
There is no standard way (EDIT: as of HTML5 there apparently is!) of adding a <style> element outside of the <head> tag - it is only allowed there and NOT within the <body> tag (See the DTD here).
If you want to style your HTML fragments individually and not use CSS styles in your head, you will need to resort to inline styling. However: Most browsers understand <style> tags within the body, so you may as well use them, but your page won't be standards compliant.
In any way:
- You should not use inline styling
- You should adhere to standards
- You should put the CSS in the head where it belongs
From what I understand you use some kind of templating, where you insert different HTML snippets into the page with different designs. Is it so bad if you put all styles within one big CSS file?
Would it be impossible for you to dynamically load a another CSS file (via JS or server side scripting), when your HTML fragment gets inserted in the page (this would be the preferred method)?
I've found two hacks to do that. Both of which should be perfectly valid html.
The SVG way
Wrap your <style /> element inside a <svg /> element.
<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>The Data-Uri Link
Format your css as a data uri and use that in a <link /> element.
<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />'Program Tip' 카테고리의 다른 글
| Java에서 @Override는 무엇입니까? (0) | 2020.12.12 |
|---|---|
| Vim 정규식 역 참조 (0) | 2020.12.12 |
| Windows에서 node.js를 업그레이드하는 방법은 무엇입니까? (0) | 2020.12.12 |
| 메인 스레드에 NSNotification 게시 (0) | 2020.12.12 |
| tslint를 사용하여 전체 폴더를 린트하는 방법 (0) | 2020.12.11 |