@scope (.media) 미디어쿼리

최근에 W3C에 Scoped styles에 대한 초안이 등재되어서 아주 가볍게 다루어봅니다.

https://drafts.csswg.org/css-cascade-6/#scoped-styles

CSS Cascading and Inheritance Level 6

아직 적용되려면 매우 오래걸릴 듯한 브라우저 지원율을 가지고 있기에 시간이 아까우신 분은 스킵하시면 좋을 것 같습니다.

<div class="aboutTime">
  <img src="about.jpg" alt="about something like that">
  <div class="descript">
    <p>bla bla</p>
  </div>
</div>

@scope (.aboutTime) {
  :scope {
    display: grid;
    grid-template-columns: 20px 2fr;
  }
  img {
  	display: block;
    width: 100%;
  }
}

매우 명시적으로 스타일을 작성할 수 있겠죠?

 

마치 React에서 주로 사용하는 Styled Components처럼 개별 스타일을 다룰 수 있을 것 같습니다.

 

나중에 브라우저 범위가 넓어진다면 조금 더 심도있게 다루어보도록 하죠.

 

감사합니다.

 

 

출처 : https://drafts.csswg.org/css-cascade-6/#scoped-styles