의견 : HTML5 변환은 자리 표시 자, 다운로드, 숨겨진 등과 같은 매우 유용한 새로운 속성을 많이 가져 왔습니다. 각 새로운 속성은 페이지 요소에 새로운 제어 방법과 제어 효과를 제공합니다.
특히, 여러 요소의 속성을 제어 할 수있는 새로운 속성이 있습니다 : 즉 Scoped. 스타일 태그에 새로 등장한 범위의 속성은 CSS 스타일을 로컬 요소에서만 효과적으로 만들 수 있습니다. 구체적으로,이 스타일을 저장하는 요소의 자식 요소는 적용됩니다. 일반적인 스타일의 유일한 차이점은 새로운 범위의 속성이 추가된다는 것입니다.
<스타일 스코프 링>
/ * 스타일은 여기로 이동 */
</스타일>
범위가 높은 스타일은 현재 요소와 어린이에게만 적용됩니다. 인라인 스타일은 여전히 스코프 스타일보다 우선 순위가 높으므로 인라인 스타일을 사용하지 않는 것이 가장 좋습니다. 다음은 효율성 범위를 비교하기 위해 여러 스타일의 혼합입니다.
<div>
<스타일 스코프 링>
div {테두리 : 1px 고체 녹색; 마진 바닥 : 20px; 최소값 : 40px; }
.democontain {배경 : #f8f8f8; }
</스타일>
<div> </div>
<div>
<스타일 스코프 링>
div {배경 : LightBlue; 테두리 : 1px 솔리드 블루; }
</스타일>
<div> </div>
</div>
<div> </div>
</div>
스코프 스타일에서는 다음과 같은 미디어 쿼리와 같은 법적 CSS 스타일 태그를 사용할 수 있습니다.
<스타일 스코프 링>
@Media 전용 화면 및 (Max-Width : 1024px) {
div {배경 : #000; }
}
</스타일>
이 신흥 범위의 속성은 특히 템플릿, CMS 사용자 또는 전체 스타일 파일을 작동 할 수없는 일부 개발자에게 매우 유용합니다. 그러나 일부 오래된 브라우저는이 속성을 지원하지 않습니다. 이 경우 jQuery 플러그인 (https://github.com/thingsinjars/jquery-scoped-css-plugin)을 사용 하여이 문제를 보완해야 할 수도 있습니다.