🎨 곧 나올 CSS 기능들

요 동영상을 유튜브에서 보고 나서, 궁금해서 슥 찾아봤는데

위 영상에 나와있는 CSS 기능들은 대부분 드래프트(FPWD, WD) 단계에 위치해 있는 기능들인 듯.

보통 '표준'이라고 불릴만한 것들은 REC 단계부터이고,

CR 단계만 돼도 W3C에서 everyday use, 즉 일상적인 사용을 권장하는 수준이라고 한다.

 

영상에서도 말하듯이, 점점 컴포넌트 기반으로 코드를 짜는 것이 대세가 되면서

그에 맞는 CSS 기능들이 적절하게 추가되고 있는 것이 아닌가 생각.

 

1. Cascade Layers

원래 CSS 코드의 우선순위를 결정하는 간접적인 요인들이 몇 가지 존재했었다.

더 나중에 선언할수록, CSS 선택자가 더 구체적으로 명시되어 있을수록 우선순위가 높다던가 하는 것들.

@layer 를 사용하면 layer 단위로 우선순위를 지정해주는 것이 가능하다.

@layer reset;     /* Create 1st layer named “reset” */
@layer base;      /* Create 2nd layer named “base” */
@layer theme;     /* Create 3rd layer named “theme” */
@layer utilities; /* Create 4th layer named “utilities” */

@layer reset { /* Append to layer named “reset” */
  …
}

@layer theme { /* Append to layer named “theme” */
  …
}

@layer base { /* Append to layer named “base” */
  …
}

@layer theme { /* Append to layer named “theme” */
  …
}

순서는 선언한 순서대로 가장 먼저 선언한 layer가 가장 낮은 우선순위, 그리고 뒤로 갈수록 높아진다.

import한 CSS에다가 통째로 layer를 지정해주는 것도 가능.

@import url('headings.css') layer(default);

MDN 문서도 있드라.

@layer - CSS: Cascading Style Sheets | MDN

 

2. Container Queries

원래는 반응형을 브라우저 너비를 기준으로 구현해줬어야 했는데,

이 @container를 이용하면 컴포넌트 단위로 반응형을 구현하는 것이 가능하다.

(container div의 너비를 기준으로 반응형을 구현해준다던가 하는 식)

그러면 한 페이지 안에서도 하나의 컴포넌트를 다양한 모습으로 사용하는 게 가능해진다.

요런 것들을, 하나의 컴포넌트만으로도 container query를 이용해서 반응형으로 구현할 수 있게 된다는 것.

요것도 MDN 문서 있다.

CSS Container Queries - CSS: Cascading Style Sheets | MDN

 

3. Scope

@scope를 사용하면 이제 선택자를 사용해서 간단하게 CSS에 scope를 적용할 수 있다.

사실, scope 자체는 아래의 nesting 기능과 container element를 활용해도 간단하게 만들어줄 수 있지만,

이 @scope가 특이한 건 도넛 형태로 scope를 지정해서 스타일을 적용하는 것이 가능하다는 것.

이게 무슨 말이냐면, scope-root와 lower-boundary를 지정해서(scope의 시작과 끝을 지정해서)

그 사이에 있는 선택자들에게만 스타일을 지정해준다는 뜻.

@scope (.media) to (.content) {
	img { /* only images that are "in scope" */ }
}

요렇게 하면 .media와 .content 사이에 있는 img 태그들에만 스타일을 지정할 수 있다.

 

4. Nesting

sass에서 사용하던 Nesting이 이제 CSS로 넘어온다.

 

 

요런 유용한 기능들이 CSS로 넘어오는 건 참 반가운 일이다.

이제 sass 설치하고 loader 덕지덕지 갖다붙이지 않아도 되는건가?

 

 

 

출처

TPAC 2021 Nesting CSS: https://www.w3.org/2021/10/TPAC/demos/css-nesting.html

TPAC 2021 Cascade Layers, Container Queries, Scope: https://www.w3.org/2021/10/TPAC/demos/css-architecture.html

bram.us Cascade Layers: https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/

W3C CSS current work: https://www.w3.org/Style/CSS/current-work