'style' 요소의 'scoped' 속성이 HTML5에서도 여전히 관련이 있나요?

HTML5의 스타일 요소에 대한 범위 속성의 현재 상태는 무엇입니까?

배경

HTML5는 처음에 스타일에 대한 범위 속성을 제안했습니다. 스타일 요소의 상위 요소와 그 하위 요소에 대한 스타일 적용을 제한하는 것을 목표로 합니다. 그러나 제한된 브라우저 구현으로 인해 해당 기능은 결국 삭제되었습니다.

현재 상태(2023)

현재 범위 속성이 없는 스타일 요소는 문서의 어느 곳에나 합법적으로 나타날 수 있습니다. 그러나 사양에서는 다른 문서 요소의 의도하지 않은 스타일 변경 가능성에 대해 경고합니다.

범위가 지정된 스타일에 대한 솔루션

범위가 지정된 속성 지원이 부족함에도 불구하고 범위가 지정된 스타일은 다음과 같은 명시적 선택기를 활용하여 계속 달성할 수 있습니다. ID 선택기로. 예는 다음과 같습니다.

<code class="html"><div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div></code>

이 접근 방식을 사용하면 지정된 div 요소 내에서만 스타일이 적용됩니다. ID 충돌을 피해야 하지만 이는 이미 모범 사례입니다.

향후 전망

현재로서는 범위가 지정된 속성이 HTML에 다시 도입된다는 징후가 없습니다. 명시적 선택기 접근 방식은 범위가 지정된 스타일을 달성하기 위해 여전히 권장되는 기술입니다.

위 내용은 'style' 요소의 'scoped' 속성이 HTML5에서도 여전히 관련이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!