2022년 기대되는 CSS 새로운 기능

2022년 기대되는 CSS의 새로운 기능들 몇가지 소개해보려고 합니다.

@container

미디어 쿼리의 확장된 개념으로 볼 수 있습니다.

미디어 쿼리는 브라우저의 크기에 따라서 속성을 다르게 적용할 수 있었지만,

컨테이너 쿼리는 말 그대로 특정 요소를 컨테이너로 지정할 수 있으며, 컨테이너의 크기 변화에 따라서

다른 속성들을 적용할 수 있습니다.

컨테이너 쿼리를 사용하기 위해서는 먼저, container-name, container-type 이 지정되어야 합니다.

.card {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.sidebar {
  container-type: inline-size; /* 이 요소를 쿼리 컨테이너로 정의합니다. */
	container-name: sidebar; /* 쿼리 컨테이너 이름을 정의합니다. */
}

@container sidebar (min-width: 700px){  /* sidebar 컨테이너가 700px 보다 커질경우 */
  .card {
    grid-template-columns: 2fr 1fr;   /* card 를 2열로 표현합니다. */
  }
}

container-name은 특정 컨테이너에만 속성을 적용하고 싶은때 사용할 수 있으며,

container-name을 생략하게 되면 모든 쿼리 컨테이너들이 container-type에 따라서 속성이 적용됩니다.

지원 브라우저 : 없음 (크롬은 chrome://flags 에서 기능 활성화하여 테스트 가능)
출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

@when/@else

개발하는 사람들 다 알고 있는 if, else 입니다.

가장 기대되는 css의 기능 중 하나가 아닐까 생각됩니다.

@when media(width >= 400px) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

위의 예시는 아래의 조건으로 A,B,C를 적용하게 됩니다.

브라우저 width값이 400이상이고, display:flex를 지원한다면, A를 적용
그렇지않고, caret-color: pink, background: double-rainbow() 속성을 지원한다면 B
둘 다 아니면 C

지원 브라우저 : 없음
출처 : https://www.w3.org/TR/css-conditional-5/#when-rule

@layer

스타일의 적용의 우선순위를 정할 수 있습니다.

일반적으로 CSS의 우선순위는 마지막에 선언한 값이 우선순위가 높습니다.

하지만 @layer 를 사용하면 특이성이 무시하고 순서를 재정의할 수 있습니다.

/* 레이어 적용 순서를 정합니다. 나중에 정의한게 우선순위가 더 높습니다.
   여기에서는 special에 설정된 값이 base보다 우선순위가 더 높습니다. */

@layer base, special; 

@layer special {
  .item {
    color: purple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
  }
}

위의 예시에서 일반적인 규칙을 따른다면,

item은 녹색의 border와 녹색 color을 가지고 있을 것입니다.

하지만 layer 규칙에 따라서 item에는 base, special 순으로 속성들이 적용됩니다.

즉, item은 녹색의 border와 보라색의 color를 가지게 됩니다.

layer는 아래처럼 중첩해서 사용할 수도 있습니다.

@layer framework {
  @layer layout {
	  p {
	    margin-block: 1rem;
	  }
  }
}

/* 아래처럼 .을 사용하여 내부 레이어 규칙을 정의할 수도 있습니다. */
@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

지원 브라우저 : 최신버전 크롬, 파이어폭스, 사파리
출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

:has()

부모선택자라고도 불리우는 가상선택자입니다.

자식요소에 따라서 속성들을 적용할 수 있아래처럼 사용할 수 있습니다.

a:has(> img){ /* 자식요소로 img를 포함한 모든 a  */
	/* .. */
}

h1:has(+ p) { /* 바로 뒤에 p가 있는 모든 h1  */
	/* .. */
}

어떤 자식요소가 있느냐에 따라서 부모의 속성을 적용할 수 있기 때문에,

실사용이 가능해진다면 정말 유용한 기능중 하나가 될것 같습니다.

지원 브라우저 : 사파리 최신버전
출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Nesting

SASS를 사용해본 사람이면 너무나도 익숙한 중첩 기능입니다.

아래처럼 sass와 같은 코드를 작성할 수 있습니다.

.foo {
  color: blue;
  & > .bar { color: red; }
}

중첩기능을 사용하게되면 가독성도 좋아지고 유지관리에도 용이할 것 같습니다.

지원 브라우저 : 없음
출처 : https://www.w3.org/TR/css-nesting-1/

지금까지 CSS의 새로운 기능들 몇가지를 살펴봤습니다.

대부분 아직 사용할 수 없는 기능들이기는 하지만,

CSS는 계속 발전하고 있고, 이런 기능들을 실제로 사용할 수 있게 된다면

지금보다 더 유용하고 전문적인 언어가 될게 분명해보입니다.

Nizbridge