앞으로 써먹어야 할 2022 CSS 최신 기술 모음

CSS 최신 기술들을 모아보았다. 2022년 11월 현재 기준으로, 브라우저 호환성이 떨어지는 기술일 수록 아래 쪽에 작성했다.

 

:has()

특정한 자식을 가진 부모 요소를 선택할 수 있다.

/** 포인터가 올라가 있는 img를 가진 부모 a 태그 **/
a:has(> img:hover) {
...
}

 

accent-color

라디오 버튼, 체크 박스, 범위 슬라이더 등 HTML 요소의 기본 강조 색상을 변경한다.

input {
	accent-color: purple;
}

 

dvh, lvh, svh

• dvh: Dynamic Viewport Height - 동적 뷰포트 높이 (네비게이션 여부에 따라 달라짐)
• lvh: Largest Viewport Height - 가장 큰 뷰포트 높이 (네비게이션이 없을 때)
• svh: Smallest Viewport Height - 가장 작은 뷰포트 높이 (네비게이션이 있을 때)
• 자매품: dvw, lvw, svw / dvmin, lvmin, svmin / dvmax, lvmax, svmax

 

@container

기존 CSS는 브라우저 너비를 기준으로 반응형을 구현해야 했는데, @container를 사용하면 부모 요소의 너비, 또는 컴포넌트 단위로 반응형을 구현할 수 있다. 컴포넌트별로 각각 다른 UI를 구성할 수 있는 것이다.

/** 1. 쿼리 컨테이너 선언하기 **/
.parent {
	container-type: inline-size;
    container-name: parent;
}

/** 2. 쿼리 컨테이너 사용하기 **/
@container parent (min-width: 500 px) {
	.child {
    ...
    }
}

 

@layer (cascade layers)

CSS 적용 우선 순위를 지정한다. 가장 먼저 선언한 layer가 가장 낮은 우선순위를 갖는다.

/** 레이어 선언하기: 아래로 갈수록 높은 우선순위!  **/
@layer reset;
@later layer-1, layer-2, layer-3;
@layer base {...}

/** nesting layers 방법 1 **/
@layer framework {
  @layer layout {
  }
}

/** nesting layers 방법 2 **/
@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

/** 레이어 불러오기 **/
@import "theme.css" layer(utilities);

 

@custom-media

미디어 쿼리를 변수로 만들고 재사용할 수 있다.

/** 미디어 쿼리 변수 만들기 **/
@custom-media --darkMode (prefers-color-scheme: dark);
@custom-media --lightMode (prefers-color-scheme: light);
@custom-media --landscape (orientation: landscape);
@custom-media --portrait (orientation: portrait);
@custom-media --iPhone (max-device-width: 480px);


/** 변수로 만든 미디어 쿼리를 가져다 쓰기 **/
@media (--darkMode) and (--iPhone) and (--landscape) {
	body {...;}
}

 

@scope

선택자만을 사용하여 범위를 지정한 뒤, 해당 범위 내의 요소를 선택할 수 있다.

/** large-class 이미지와 small-class 사이의 ul 선택하기 **/
@scope (img.large-class) to (img.small-class) {
	ul {...}
}

 

@nest

중첩된 구조의 스타일링을 선언할 때 유용한 문법.

/** 기존 CSS **/
.parent {color: red;}
.parent .children {color: blue;}

/** @nest 적용시 **/
.parent {
	color: red;
    
	@nest & .children {
    color: blue;
    }
}

 

color-mix()

두 가지 색상을 혼합한다.

.container {
	background-color: color-mix(red 30%, blue 70%);
}

 

color-contrast()

기준 색상에 대비하여 가시성이 좋은 색상을 골라준다.

/** 빨간색에 대비가 잘되는 색 고르기 **/
.container {
	background-color: red;
	color: color-contrast(red);
}

/** pink, yellow, green 중에 blue와 가장 대비가 잘되는 색상 1가지 고르기 **/
.bg {
	background-color: yellow;
    color: color-contrast(blue vs pink, yellow, green);
}

 

+) inert

페이지의 섹션을 고정(freeze)하는 (CSS가 아닌) HTML의 속성이다. inert 속성을 가진 HTML 요소는 클릭, 포커스 또는 상호작용을 하지 않고 멈춰 버린다. 사용자가 form 입력 후 클릭을 했을 때 버튼을 얼리는 등의 상황에 활용할 수 있다. 특히 스크린 리더 사용자에게 더 나은 접근성을 제공할 수 있다.

<form inert>
..
</form>

 

++) Can I use 에서 브라우저별 호환 알아보고 사용하기

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc