Chromium은 최근 HTML5에서 새로운 기능인 범위가 지정된 스타일시트(일명 범위가 지정된 스타일시트)를
<style scoped>. 웹 작성자는 스타일을 적용할 하위 트리 루트 요소의 직접 하위 요소인 <style> 요소에 '범위 지정' 속성을 설정하여 스타일 규칙을 페이지의 일부에만 적용하도록 제한할 수 있습니다. 이렇게 하면 <style> 요소와 모든 하위 요소의 상위 요소인 요소에만 영향을 미치도록 스타일이 제한됩니다.
예
다음은 표준 스타일을 사용하는 간단한 문서입니다.
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
지정된 스타일 규칙은 <div> 빨간색 안의 텍스트 색상과 <span> 녹색 내의 텍스트 색상을 지정합니다.
div! 스팬!
div! 스팬!
div! 스팬
그러나 <style> 요소에서 scoped를 설정하는 경우에는 다음과 같습니다.
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
그런 다음 <style scoped> 요소의 상위 요소인 둘러싸고 있는 <div>와 <div> 내부의 모든 항목에 적용되도록 스타일 규칙을 제한합니다. 이를 '범위 지정'이라고 하며 결과는 다음과 같습니다.
확인할 수 있습니다. 스팬이다!
div! 스팬!
div! 끝내줬어요!
물론 마크업의 어디서나 이 작업을 실행할 수 있습니다. 따라서 모험을 해보고 싶다면 범위가 지정된 스타일을 마크업의 다른 범위가 지정된 부분 내에 중첩하여 스타일이 적용되는 위치를 세밀하게 제어할 수 있습니다.
사용 사례
그렇다면 이것이 어떤 이점이 있을까요?
일반적인 사용 사례는 신디케이션 콘텐츠입니다. 웹 작성자가 제3자의 콘텐츠를 모든 스타일을 포함하여 통합하려고 하지만 이러한 스타일이 페이지의 관련 없는 다른 부분을 '오염'시키지는 않으려고 하는 경우입니다. 이 방식의 큰 장점은 <iframe>를 사용하거나 즉시 외부 콘텐츠를 수정하지 않고도 yelp, Twitter, ebay 등 다른 사이트의 콘텐츠를 단일 페이지로 결합할 수 있다는 것입니다.
최종 페이지 표시로 모두 섞인 마크업 스니펫을 전송하는 콘텐츠 관리 시스템 (CMS)을 사용 중인 경우 이 기능은 각 스니펫이 페이지의 다른 항목과 독립적으로 스타일을 지정할 수 있도록 하는 유용한 기능입니다. 이러한 기능은 위키에서도 유용할 수 있습니다.
페이지에서 멋진 데모 코드를 작성하고 싶을 때 스타일을 데모 콘텐츠로 쉽게 제한할 수 있습니다. 이렇게 하면 데모에서 CSS를 사용할 수 있으며 페이지의 다른 부분은 영향을 받지 않습니다.
또 다른 사용 사례는 단순히 캡슐화입니다. 예를 들어 웹페이지에 사이드 메뉴가 있다면 이 메뉴와 관련된 스타일을 마크업의 해당 부분에 있는 <style scoped> 섹션에 배치하는 것이 좋습니다. 이러한 스타일 규칙은 페이지의 다른 부분을 렌더링할 때는 아무런 영향을 미치지 않으므로 기본 콘텐츠와 원활하게 분리됩니다.
가장 매력적인 사용 사례 중 하나는 웹 구성요소 모델일 것입니다. 웹 구성요소는 슬라이더, 메뉴, 날짜 선택 도구, 탭 위젯 등을 빌드하는 데 좋은 방법이 될 것입니다. 디자이너는 범위가 지정된 스타일을 제공하여 위젯을 빌드하고 다른 사용자가 리치 웹 애플리케이션으로 가져와 결합할 수 있는 자체 포함 단위로 위젯을 빌드하고 이를 스타일과 함께 패키징할 수 있습니다. Google은 웹 구성요소 및 Shadow DOM (chrome://flags에서 실험용 'shadow DOM' 플래그를 설정하여 이미 사용 설정할 수 있음)과 함께 <style scoped>를 사용할 계획입니다. 현재 인라인 스타일 지정과 같은 잘못된 관행에 의존하지 않고 스타일이 웹 구성요소로 제한되도록 하는 좋은 방법은 없으므로 범위가 지정된 스타일이 여기에 적합합니다.
상위 요소를 포함하는 이유는 무엇인가요?
가장 자연스러운 방법은 <style scoped> 규칙에서 전체 범위의 공통 배경색을 설정할 수 있도록 상위 요소를 포함하는 것입니다. 또한 ID 또는 클래스 선택기를 대체로 사용하여 규칙의 접두사를 붙여서 범위가 지정된 스타일 시트를 아직 <style scoped>을 지원하지 않는 브라우저에 대해 '방어적으로' 작성할 수 있습니다.
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
이는 '범위 지정'이 구현될 때 스타일을 사용하는 효과를 모방하지만 더 복잡한 선택기로 인해 런타임 성능이 저하됩니다. 이 접근 방식의 장점은 <style scoped>가 널리 지원되고 ID 선택기를 간단히 삭제할 수 있는 날까지 적절한 대체 접근 방식을 허용한다는 것입니다.
상태
범위가 지정된 스타일 시트 구현은 아직 새로운 기능이므로 현재 Chrome에서 런타임 플래그 뒤에 숨겨져 있습니다. 사용 설정하려면 버전 번호가 19 이상인 Chrome 버전(현재 Chrome Canary)을 다운로드한 후 chrome://flags 끝 쪽에서 '<style scoped> 사용 설정' 항목을 찾아 '사용'을 클릭하고 브라우저를 다시 시작하세요.
현재 알려진 버그는 없지만 @keyframes 및 @-webkit-region의 @global 및 범위 지정 버전이 있으며 아직 구현 진행 중입니다. 또한 @font-face는 사양이 변경될 가능성이 높으므로 당분간은 무시됩니다.
이 기능에 관심이 있는 모든 이 기능을 사용해 보시고 좋은 점, 나쁜 점, 버그에 관해 의견을 보내주세요.