프로그래머 가 아닌 사용자가 사용하는 웹 시스템의 WYIWYG 편집기와 같은 제한된 컨텍스트에 대해서는 이것이 표준을 따르는 가능성을 제한하는 문제 일 수 있습니다. 때로는 TinyMCE와 같이 콘텐츠 / 코드를 textarea태그 안에 넣는 라이브러리이므로 편집기에서 큰 div태그 로 렌더링합니다 . 때로는 이러한 편집기의 이전 버전 일 수도 있습니다.
나는 그것을 추측하고있다 :
- 이러한 하지 프로그래머 사용자는 시스템의에서 일부 CSS 규칙 등을 요청, 시스템 관리자 (또는 기관의 webdevs)와 오픈 채널이없는
stylesheets . 실제로 관리자 (또는 웹 개발자)에게는 요청의 수를 고려할 때 비실용적입니다.
- 이 시스템은 기존 시스템이며 여전히 최신 버전의 HTML을 지원하지 않습니다.
경우에 따라 사용 style규칙이 없으면 설계 경험이 매우 좋지 않을 수 있습니다. 예, 이러한 사용자는 사용자 정의가 필요합니다. 좋습니다.하지만이 시나리오에서 어떤 해결책이 있습니까? html페이지에 CSS를 삽입하는 다른 방법을 고려할 때 다음 솔루션이 있다고 가정합니다.
첫 번째 옵션 : sysadm 요청
시스템에서 일부 CSS 규칙을 포함 시키려면 시스템 adm에 문의하십시오 stylesheets. 이것은있을 것입니다 외부 또는 내부 CSS의 솔루션입니다. 이미 말했듯이 불가능할 수도 있습니다.
두 번째 옵션 : <link>켜기<body>
사용하여 외부 스타일 시트 상의 body즉, 태그,의 사용 link태그 안에 당신이 액세스 할 수있는 영역 (즉 것, 사이트에, 내부 body태그가 아니라에서 head태그). 일부 소식통은 이것이 괜찮지 만 MDN 과 같은 "좋은 습관은 아닙니다"라고 말합니다 .
<link>요소는 하나의 발생 <head>또는 <body>그것이 링크 유형이 있는지 여부에 따라, 요소 바디 확인 . 예를 들어, stylesheet링크 유형은 body-ok이므로 <link rel="stylesheet">본문에서 허용됩니다. 그러나 이것은 따르는 것이 좋지 않습니다. <link>요소를 신체 콘텐츠와 분리하여에 배치 하는 것이 더 합리적 <head>입니다.
다른 일부 <head>는 w3schools 와 같이 섹션으로 제한합니다 .
참고 : 이 요소는 헤드 섹션에만 적용되지만 여러 번 나타날 수 있습니다.
테스팅
여기서 테스트했습니다 (바탕 화면 환경, 브라우저). 그리고 그것은 나를 위해 작동합니다. 파일을 작성하십시오 foo.html.
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
그런 다음 동일한 디렉토리에있는 CSS 파일 bar.css:
.test1 {
color: green;
};
기관 시스템 어딘가에 CSS 파일을 업로드하는 방법이 있다면 가능할 것입니다. 아마도 이런 경우 일 것입니다.
세 번째 옵션 : <style>켜기<body>
인터넷 스타일 시트 를 body태그 에 사용하십시오 . 즉, style액세스 할 수있는 영역 내부 (즉, 사이트가 body아닌 태그 내부가 아닌 태그 내부)에서 태그를 사용하십시오 head. 이것이 Charles Salvia 와 Sz 의 대답입니다. 이 옵션을 선택하면 우려 사항을 고려하십시오.
4 번째, 5 번째 및 6 번째 옵션 : JS 방법
경고이 <head>요소는 페이지 요소 수정과 관련이 있습니다 . 어쩌면 이것은 그렇지 않을 것입니다 기관의 시스템 관리자에 의해 허용 될 수있다. 따라서 먼저 허가를받는 것이 좋습니다.
좋아, 권한이 부여되면 전략은 <head> 있습니다. 어떻게? 자바 스크립트 메소드.
4 옵션 : 새 <link>에<head>
이것은 두 번째 옵션의 다른 버전입니다. 태그 에 외부 스타일 시트 를 사용하십시오 <head>. 즉, 액세스 할 수있는 영역 외부 의 <link>요소를 사용하십시오 (즉, 사이트 내부, 태그 내부가 아니라 태그 내부 ). 이 솔루션은 위에서 언급 한대로 2 차 옵션 솔루션에 대한 MDN 및 w3schools 권장 사항을 준수합니다 . 새로운 객체 가 생성됩니다.bodyheadLink
JS를 통해 문제를 해결하기 위해 여러 가지 방법이 있지만 다음 코드 라인에서 간단한 것을 보여줍니다.
테스팅
여기서 테스트했습니다 (바탕 화면 환경, 브라우저). 그리고 그것은 나를 위해 작동합니다. 파일을 작성하십시오 f.html.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
script태그 내부 :
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
그런 다음 CSS 파일의 동일한 디렉토리에서 bar.css(두 번째 옵션에서와 같이) :
.test1 {
color: green;
};
내가 이미 말했듯이 : 기관 시스템 어딘가에 CSS 파일을 업로드하는 방법이 있다면 가능할 것입니다.
5 옵션 : 새 <style>에<head>
태그 에 새로운 내부 스타일 시트 를 사용하십시오 <head>. 즉, 액세스 할 수있는 영역 외부 (즉, 태그가 아닌 사이트 와 태그 내부 에있는 새 <style>요소 )를 사용하십시오. 새로운 객체 가 생성됩니다.bodyheadStyle
이것은 JS를 통해 해결됩니다. 다음은 간단한 방법 중 하나입니다.
테스팅
여기서 테스트했습니다 (바탕 화면 환경, 브라우저). 그리고 그것은 나를 위해 작동합니다. 파일을 작성하십시오 foobar.html.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
script태그 내부 :
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
여섯 번째 옵션 : 기존 사용 <style> 에를<head>
태그 에 기존 내부 스타일 시트 를 사용하십시오. <head>즉, 액세스 할 수있는 영역 외부 에있는 <style>요소 ( 즉, 태그 가 아닌 사이트 와 태그 내부에 있음 )를 사용하십시오. 새 객체가 생성되거나 객체 가 사용됩니다 (여기에서 채택한 솔루션 코드에서).bodyheadStyleCSSStyleSheet
이것은 어느 시점에서 위험합니다.
첫째 , 일부 <style> 객체 가 없을 수 있기 때문 입니다. 이 솔루션을 구현하는 방식에 따라 undefined반품 이 발생할 수 있습니다 (시스템은 외부 스타일 시트를 사용할 수 있음 ).
둘째 , 시스템 디자인 작성자의 작업 (저작권 문제)을 편집하기 때문입니다.
셋째 , 기관의 IT 안전 정책에서는 허용되지 않을 수 있습니다. 따라서 다른 JS 솔루션에서와 같이이 작업을 수행 할 수있는 권한을 요청하십시오. .
다시 권한이 부여되었다고 가정합니다.
이 방법으로 사용할 수있는 방법의 일부 제한 사항을 고려해야 insertRule()합니다.. 제안 된 솔루션은 기본 시나리오와 첫 번째 작업을 사용합니다.stylesheet 일부 합니다.
테스팅
여기서 테스트했습니다 (바탕 화면 환경, 브라우저). 그리고 그것은 나를 위해 작동합니다. 파일을 작성하십시오 foo_bar.html.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
script태그 내부 :
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
이 솔루션에 대한 또 다른 접근법은 CSSStyleDeclaration객체 ( w3schools 및 MDN 문서 )를 사용하고 있습니다. 그러나 시스템 CSS의 기존 규칙을 무시할 위험을 고려하면 흥미롭지 않을 수 있습니다.
일곱 번째 옵션 : 인라인 CSS
인라인 CSS 사용 . 코드 크기로 페이지 크기에 따라 (작성자 또는 다른 할당 된 사람이) 코드를 유지 관리하는 것이 매우 어려울 수 있지만 문제가 해결됩니다.
그러나 기관에서의 역할 컨텍스트 또는 웹 시스템 보안 정책에 따라이 솔루션은 사용 가능한 고유 한 솔루션 일 수 있습니다.
테스팅
파일을 작성하십시오 _foobar.html.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Gagan의 질문에 엄격히 대답
브라우저는 연속적이지 않은 CSS를 어떻게 렌더링해야합니까?
- 페이지의 모든 CSS 스타일을 사용하여 일부 데이터 구조를 생성하고 렌더링에 사용합니까?
- 아니면 보이는 순서대로 스타일 정보를 사용하여 렌더링합니까?
(견적 조정)
보다 정확한 답변을 위해 다음 기사를 Google에 제안합니다.
- 브라우저 작동 방식 : 최신 웹 브라우저의 비하인드 스토리
- 렌더 트리 구성, 레이아웃 및 페인트
- 웹 페이지를 "렌더링"한다는 것은 무엇을 의미합니까?
- 뒤에서 브라우저 렌더링 작동 방식
- 렌더링-HTML 표준
- 10 렌더링 — HTML5