새로운 실험용 기능 - 범위가 지정된 스타일시트

알렉스 다닐로

Chromium은 최근 HTML5의 새로운 기능인 범위가 지정된 스타일시트를 구현했습니다. <style scoped>. 웹 작성자는 스타일을 적용할 하위 트리 루트 요소의 직접 하위 요소인 <style> 요소에 'scope' 속성을 설정하여 페이지 일부에만 적용되도록 스타일 규칙을 제한할 수 있습니다. 이렇게 하면 <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! 스팬!
div! 스팬!

이 작업은 당연히 마크업의 어느 위치에서든 수행할 수 있습니다. 따라서 모험을 원한다면 마크업의 다른 범위가 지정된 부분 내에 범위 지정 스타일을 중첩하여 스타일이 적용되는 위치를 세밀하게 제어할 수 있습니다.

사용 사례

그러면 어떤 이점이 있을까요?

일반적인 사용 사례는 신디케이트된 콘텐츠입니다. 웹 작성자로서 제3자의 모든 스타일과 함께 제3자의 콘텐츠를 통합하고 싶지만 이러한 스타일이 페이지의 관련 없는 다른 부분을 '오염'시키는 위험을 무릅쓰고 싶지 않은 경우입니다. 여기서 큰 장점은 <iframe>을 사용하여 격리하거나 외부 콘텐츠를 즉시 수정할 필요 없이 yelp, twitter, ebay 등 다른 사이트의 콘텐츠를 단일 페이지로 결합할 수 있다는 것입니다.

모두 함께 섞여 최종 페이지 표시에 합쳐진 마크업 스니펫을 전송하는 콘텐츠 관리 시스템 (CMS)을 사용 중인 경우, 이 기능은 각 스니펫에 페이지의 다른 부분과 격리된 상태로 스타일을 지정할 수 있는 유용한 기능입니다. 이것은 위키에서도 유용할 수 있습니다.

페이지에 멋진 데모 코드를 작성하려는 경우 데모 콘텐츠로만 스타일을 제한하기가 쉽습니다. 따라서 데모에서 CSS를 사용할 수 있지만 페이지의 다른 요소는 영향을 받지 않습니다.

또 다른 사용 사례는 단순히 캡슐화입니다. 예를 들어 웹페이지에 사이드 메뉴가 있는 경우 이 메뉴와 관련된 스타일을 마크업의 해당 부분의 <style scoped> 섹션에 배치하는 것이 좋습니다. 이러한 스타일 규칙은 페이지의 다른 부분을 렌더링할 때 아무런 영향을 미치지 않으므로 기본 콘텐츠와 잘 분리됩니다.

가장 매력적인 사용 사례 중 하나는 웹 구성요소 모델일 것입니다. 웹 구성 요소는 슬라이더, 메뉴, 날짜 선택 도구, 탭 위젯 등을 빌드하는 훌륭한 방법이 될 것입니다. 디자이너는 범위가 지정된 스타일을 제공함으로써 위젯을 빌드하고 다른 사람들이 가져와서 풍부한 웹 애플리케이션으로 결합할 수 있는 독립 실행형 단위로 위젯을 스타일과 함께 패키징할 수 있습니다. Google은 웹 구성요소 및 shadow DOM (chrome://flags에서 실험용 'Shadow DOM' 플래그를 설정하여 이미 사용 설정할 수 있음)과 함께 <style scoped>를 많이 사용할 계획입니다. 인라인 스타일 지정과 같은 잘못된 관행을 사용하지 않고 스타일이 웹 구성요소로 제한되도록 할 수 있는 좋은 방법은 현재 존재하지 않으므로 범위 지정 스타일이 이에 완벽한 것입니다.

상위 요소를 포함하는 이유는 무엇인가요?

가장 자연스러운 방법은 예를 들어 <style scoped> 규칙이 전체 범위의 공통 배경색을 설정할 수 있도록 상위 요소를 포함하는 것입니다. 또한 아직 <style scoped>을 지원하지 않는 브라우저에서는 범위가 지정된 스타일시트를 '방어적으로' 작성할 수 있습니다. 이를 위해서는 ID 또는 클래스 선택기를 대체로 규칙 앞에 붙이세요.

<div id="menu">
    <style scoped>
    #menu .main { … }
    #menu .sub { … }
    …

이는 '범위'가 구현될 때 스타일을 사용하는 효과를 모방하지만 더 복잡한 선택기로 인해 런타임 성능 저하가 발생합니다. 이 접근 방식의 장점은 <style scoped>가 널리 지원되고 ID 선택기가 간단히 삭제될 수 있는 날까지 단계적 대체 방식을 사용할 수 있다는 것입니다.

상태

범위가 지정된 스타일시트는 아직 새로운 기능이므로 현재 Chrome에서 런타임 플래그 뒤에 숨겨져 있습니다. 이 기능을 사용 설정하려면 버전 번호가 19 이상인 Chrome 버전 (현재 Chrome Canary)을 설치해야 합니다. 그런 다음 chrome://flags에서 '<style scoped> 사용 설정' 항목 (끝부분)을 찾아 '사용 설정'을 클릭한 다음 브라우저를 다시 시작하세요.

현재 알려진 버그는 없지만 @global@keyframes@-webkit-region의 범위가 지정된 버전이며 아직 구현 중입니다. 또한 사양이 변경될 가능성이 높으므로 당분간 @font-face는 무시됩니다.

이 기능에 관심이 있는 모든 사용자가 이 기능을 사용해 보고 좋았던 점, 나쁜 점, 버그가 있는 부분 등 경험에 대해 알려주시기 바랍니다.