Chromium은 최근 HTML5의 새로운 기능인 범위 지정된 스타일시트(aka
<style scoped>. 웹 작성자는 스타일을 적용할 하위 트리의 루트 요소의 직접적인 하위 요소인 <style> 요소에 'scoped' 속성을 설정하여 스타일 규칙이 페이지의 일부에만 적용되도록 제한할 수 있습니다. 이렇게 하면 스타일이 <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! span!
div! span!
div! span!
그러나 <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! span!
div! span!
div! span!
물론 마크업 어디서나 이 작업을 실행할 수 있습니다. 따라서 모험심이 있다면 마크업의 다른 범위 지정된 부분 내에 범위 지정된 스타일을 원하는 만큼 중첩하여 스타일이 적용되는 위치를 세부적으로 제어할 수 있습니다.
사용 사례
이 기능은 어떤 용도로 사용되나요?
일반적인 사용 사례는 뉴스 기사입니다. 웹 작성자가 모든 스타일을 포함하여 서드 파티의 콘텐츠를 통합하고 싶지만 이러한 스타일이 페이지의 다른 관련 없는 부분을 '오염'시킬 위험을 감수하고 싶지 않은 경우입니다. 여기서 큰 장점은 <iframe>를 사용하여 콘텐츠를 격리하거나 외부 콘텐츠를 즉석에서 수정하지 않고도 Yelp, 트위터, eBay와 같은 다른 사이트의 콘텐츠를 단일 페이지로 결합할 수 있다는 점입니다.
마크업 스니펫을 모두 하나로 모아 최종 페이지 디스플레이로 전송하는 콘텐츠 관리 시스템 (CMS)을 사용하는 경우 이 기능을 사용하면 각 스니펫의 스타일이 페이지의 다른 요소와 별개로 지정될 수 있습니다. 위키에도 이 방법이 유용합니다.
페이지에 멋진 데모 코드를 작성하려면 스타일을 데모 콘텐츠로만 제한하면 됩니다. 이렇게 하면 데모에서 CSS를 마음껏 사용할 수 있지만 페이지의 다른 부분은 영향을 받지 않습니다.
다른 사용 사례는 단순히 캡슐화입니다. 예를 들어 웹페이지에 사이드 메뉴가 있는 경우 해당 메뉴에만 적용되는 스타일을 마크업 해당 부분의 <style scoped> 섹션에 배치하는 것이 좋습니다. 이러한 스타일 규칙은 페이지의 다른 부분을 렌더링할 때는 영향을 미치지 않으므로 기본 콘텐츠와 깔끔하게 구분됩니다.
가장 매력적인 사용 사례 중 하나는 웹 구성요소 모델일 수 있습니다. 웹 구성요소는 슬라이더, 메뉴, 날짜 선택 도구, 탭 위젯과 같은 항목을 빌드하는 데 유용한 방법입니다. 디자이너는 범위 지정된 스타일을 제공하여 위젯을 빌드하고 다른 사용자가 가져와서 리치 웹 애플리케이션으로 결합할 수 있는 독립형 단위로 스타일과 함께 패키징할 수 있습니다. <style scoped>는 웹 구성요소와 shadow DOM (chrome://flags에서 실험용 'shadow DOM' 플래그를 설정하여 이미 사용 설정할 수 있음)과 함께 많이 사용될 예정입니다. 현재 인라인 스타일 지정과 같은 좋지 않은 관행에 의존하지 않고 스타일을 웹 구성요소로 제한하는 좋은 방법은 없으므로 범위 지정된 스타일이 여기에 적합합니다.
상위 요소를 포함하는 이유는 무엇인가요?
가장 자연스러운 방법은 <style scoped> 규칙이 전체 범위에 공통 배경 색상을 설정할 수 있도록 상위 요소를 포함하는 것입니다. 또한 아직 <style scoped>를 지원하지 않는 브라우저의 경우 대체 수단으로 ID 또는 클래스 선택기를 규칙 앞에 추가하여 범위 지정된 스타일 시트를 '방어적으로' 작성할 수 있습니다.
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
이렇게 하면 '범위 지정'이 구현될 때 스타일을 사용하는 효과를 모방할 수 있지만 더 복잡한 선택기로 인해 런타임 성능이 저하됩니다. 이 접근 방식의 좋은 점은 <style scoped>가 광범위하게 지원되고 ID 선택기를 간단히 삭제할 수 있을 때까지 원활한 대체 접근 방식을 허용한다는 것입니다.
상태
범위 지정된 스타일 시트의 구현은 아직 초기 단계이므로 현재 Chrome에서는 런타임 플래그 뒤에 숨겨져 있습니다. 이를 사용 설정하려면 버전 번호가 19 이상인 Chrome 버전 (현재 Chrome Canary)을 가져온 다음 chrome://flags에서 'Enable <style scoped>' 항목 (끝부분)을 찾아 'Enable'를 클릭하고 브라우저를 다시 시작해야 합니다.
현재 알려진 버그는 없지만 @global 및 범위 지정된 버전의 @keyframes 및 @-webkit-region는 아직 구현 중입니다. 또한 사양이 변경될 가능성이 높으므로 당분간 @font-face는 무시됩니다.
이 기능에 관심이 있는 모든 사용자는 이 기능을 사용해 보고 장점, 단점, 버그 등을 알려주시기 바랍니다.