외부 CSS의 범위를 특정 요소로만 제한 하시겠습니까?
저는 100 % 자바 스크립트, HTML5 및 CSS를 사용하여 웹 브라우저에서 iPhone (및 나중에 다른 장치)의 모양과 기능을 조롱하는 모바일 시뮬레이터를 만들고 있으며 시뮬레이터는 클라이언트 측 코드만으로 완벽하게 작동합니다.
시뮬레이터에서 호스팅 할 원래 앱 프로젝트 자체에 필요한 수정을 거의하지 않고이 작업을 수행하는 동안 페이지 헤드에 <script>및 <link>태그를 삽입 한 다음 html을 <div>화면에 로드합니다 .
문제는 새 CSS 파일을로드 할 때 페이지 스타일을 지정하는 데 사용하는 파일을 (분명히) 재정의하므로 일부 요소가 영향을받습니다 (예 : 배경색 변경).
내 질문은 : 화면 .css내의 개체에만 적용 되도록 외부 파일 의 "범위"를 제한하는 방법이 <div>있습니까? <head>페이지에 삽입하는 대신 화면 의 <style>요소에 삽입하면 어떤 차이가 <div>있습니까?
업데이트이 기능에 대한 지원이 중단되었습니다. 다른 옵션을 찾으십시오
원본 게시물 :
범위가 지정된 스타일을 살펴볼 수 있습니다. http://css-tricks.com/saving-the-day-with-scoped-css/를 참조 하십시오 .
기본 아이디어는
<div>
<style scoped>
@import "scoped.css";
</style>
</div>
그러나 여기에서는 브라우저 지원 측면에서 최첨단에 있습니다. http://caniuse.com/style-scoped를 참조 하십시오 .
한 가지 대안은 iframe을 사용하는 것입니다.
부모 요소의 선택기 안에 모든 CSS 코드를 래핑하기 만하면됩니다. ID가있는 div라고 foo하면 다음을 수행 할 수 있습니다.
div#foo{
//All your css
}
그리고로 변환 less하는 css것이 올바른 선택기를 앞에 추가됩니다. @media 쿼리 등을 수동으로 처리해야합니다.
이 글을 작성하는 동안 <style scoped>Chrome 팀에서는 더 이상 사용하지 않습니다. 결과적으로 몇 가지 접근 방식을 실험하고 https://github.com/thgreasi/jquery.scopeLinkTags를 릴리스했습니다 . 참고 : 가져온 CSS 파일을 제어 할 수없는 경우에만이 방법을 사용해야합니다. SASS / LESS / anything을 사용하여 CSS를 전처리 할 수 있다면 선호해야합니다.
간단한 방법은 css 파일의 모든 선택기 앞에 사전 클래스를 추가하는 것입니다.
grunt 스크립트가 이것을 할 수 있다는 것을 알았습니다.
https://github.com/ericf/grunt-css-selectors
참고 URL : https://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element
'programing' 카테고리의 다른 글
| 부모에서 자식으로 이벤트를 내보내는 방법은 무엇입니까? (0) | 2020.11.26 |
|---|---|
| 퍼셉트론 학습 알고리즘이 0으로 수렴되지 않음 (0) | 2020.11.26 |
| gRPC (HTTP / 2)가 HTTP / 2를 사용하는 REST보다 빠릅니까? (0) | 2020.11.25 |
| Java enum 및 추가 클래스 파일 (0) | 2020.11.25 |
| 코드 골프 : 새해 불꽃 놀이 (0) | 2020.11.25 |