CSS의 새로운 기능 (2022 구글 I/O 주요 기능)

 

 

2022 구글 I/O 개발자 컨퍼런스에서 CSS(Cascading Style Sheets)의 새로운 기능을 발표했다.

 

구글 I/O 개발자 컨퍼런스에서 발표한 CSS의 새로운 기능 (https://web.dev/state-of-css-2022/#table-of-contents)

 

새로운 CSS 기능 중에서도 주목할만한  Cascade layers,  Viewport units,  Container queries,  acctent-color,  acctent-contrast,  color-mix,  :has(),  @nest,  @scope 에 대해 알아보자.

 

---

 

Cascade layers

(브라우저 지원 : Chrome 99, Firefox 97, Edge 99, Safari 15.4)

 

구체적인 셀렉터나 선언된 순서 (아이디 또는 !important) 등으로 스타일을 덮어씌우면 유지보수가 어려워지는데, 이러한 문제를 해결하기 위해 나온 기능이다.

Cascade layers 규칙을 적용하면, CSS를 덮어쓰기 위해 구체적인 셀렉터를 만들 필요 없이 CSS 스타일의 우선순위를 손쉽게 설정할 수 있다.

Cascade layers 예시 : Reset > Defaults > Frameworks > Components > Utilities > Overrides

 

레이어의 순서를 정하고, 레이어 별로 스타일을 지정하면, 높은 우선순위의 레이어가 우선순위가 된다. (레이어의 순서가 곧 우선순위)

https://youtu.be/jr9imvgVRJM?t=279

 

 

 

Viewport units

(브라우저 지원 : Chrome 100, Firefox 98, Edge 99, Safari 15.4)

 

viewport는 웹 사이트를 볼 수 있는 영역이나 윈도우 창 크기를 의미하는데, 모바일에서는 창 크기를 조정 할 수 없기 때문에 화면의 넓이나 높이를 100%로 설정해왔는데 모바일 사이즈 유닛이 추가되었다.

 

뷰포트 단위들

• vw (viewport width, 넗이) : 100vw = 100% width
• vh (viewport height, 높이) : 100vh = 100% height
• dvh (dynamic viewport heigt, 동적 뷰포트 높이) : 네비게이션 표시 여부에 따라 달라지는 화면 크기
• lvh (largest viewport heigt, 가장 큰 뷰포트 높이) : 네비게이션이 없는 화면 크기
• svh (smallest viewport heigt, 가장 작은 뷰포트 높이) : 네비게이션이 있는 화면 크기

새로운 뷰포트 단위 (https://web.dev/state-of-css-2022/#viewport-units)

 

새로운 뷰포트 단위의 모든 옵션 (https://web.dev/state-of-css-2022/#viewport-units)

 

 

 

Container queries

(현재 시점에서는 브라우저 지원하지 않고, expreiment 모드로 테스트는 가능 함. 추후에 계속해서 개발 예정)

 

컨테이너 쿼리(@container)는 미디어 쿼리(@media)와 유사한 방식으로 작동하지만, 미디어쿼리와 다르게 viewport가 아닌 부모 컨테이너에게 쿼리(질의)한다.

요소가 부모 @container에게 "부모야 사이즈가 뭐니~ 특정 사이즈가 되면 나에게 알려줘~"라고 질의하기 때문에 쿼리라고 한다. 부모의 특정 사이즈에 도달했을 때 요소는 스타일을 변경해나간다.

 

반응형 사이트를 위한 CSS 문법인 미디어쿼리(@media)는 동일한 페이지를 사용자들의 각기 다른 디바이스의 윈도우 창에 맞춰 아이템들을 재정렬하고 어떻게 배치하여 보여줄지 윈도우 사이즈에 따라 반응하여 보여주기 위해서 필수적으로 사용하는 문법이다.

하지만 미디어쿼리는 윈도우 창을 기반으로 윈도우 사이즈를 변경해야지만 아이템들을 재배치 할 수 있다는 단점이 있는데, 이를 보완하기 위해 나온 기능이 컨테이너 쿼리(@container)이다.

컨테이너 쿼리는 윈도우가 아니라 각각의 개별적인 부모 요소를 기반으로, 부모의 사이즈가 변경되면 아이템들을 그에 맞게 재배치 할 수 있다.
즉, 뷰포트가 아니라 요소가 들어있는 부모의 컨테이너 사이즈를 기반으로 두어 아이템들을 반응형으로 디자인 해나갈 수 있다. 

 

컨테이너 쿼리의 장점 (https://youtu.be/jr9imvgVRJM?t=504)

 

 

 

 

acctent-color 

(브라우저 지원 : Chrome 93, Firefox 92, Edge 93, Safari 15.4)

 

acctent-color를 사용하여 색상을 설정하면, 브라우저는 그에 맞게 스타일을 설정해준다.

다르게 말하면, 버튼이나 진행 표시 줄, 라디오/체크 박스 등 HTML 요소의 색상 변경을 손쉽게 할 수 있으며 관리에 용이하다.
이전에는 색상을 변경하려면 배경 색, 테두리 선, hover 등 세부적으로 직접 설정해야 했는데, acctent-color를 사용하면 단 한 줄만으로 나머지 요소에 대한 세부적인 설정이 필요 없다. 브라우저에서 작업자가 설정한 강조색에 맞춘 요소들로 표현한다.

 

accent-color 속성은 다크모드를 위한 color-scheme 속성과 함께 쓸 수도 있다. 

 

See the Pen Checkbox: default vs accent-color by web.dev (@web-dot-dev) on CodePen.

 

https://web.dev/accent-color/

 

 

 

 

acctent-contrast

(브라우저 지원 : Safari 15)

 

배경색이 있는 상태에서 텍스트가 잘 보이려면 서로 대비되는 색상으로 결정하면 되는데, 이럴 때 대비되는 텍스트 색상을 찾느라 수고할 필요 없이 color-contrast를 사용하면 된다.  
작업자가 배경색을 설정하고, 그에 맞는 대조색을 찾는 대신에 color-contrast를 사용하면, 배경 대비 텍스트 색상은 브라우저에서 알아서 결정된다.

 

/* color-contrast 사용 예 */
.box {
    background-color: red;
    color: color-contrast(red); 
}

* 'vs'를 써서 브라우저가 고를 수 있도록 컬러 옵션을 줄 수도 있음
{ color: color-contrast(red vs pink, yellow); }

 

HWB 색상 팔레트 세트 데모(https://codepen.io/web-dot-dev/pen/qBpzwZW) 스크린샷

 

 

 

 

color-mix

(브라우저 지원 : Firefox 88, Safari 15)

 

브라우저에서 색상을 혼합할 수 있는 기능으로, 브랜드 색상을 도출하는데 유용하다.
이전에는 이와 같은 기능을 위해서 Sass와 같은 전처리기가 필요했었고 자바스크립트를 포함했어야 했는데, 앞으로는 color-mix 만으로도 브라우저에서 색상을 혼합할 수 있다. 

 

.container {
    background-color: color-mix(red, blue);    /* color-mix 사용 예 */
}

.container {
    background-color: color-mix(red 50%, blue 30%);     /* 혼합 비율 지정 */
}


/* 또한 흰색이나 검은색을 혼합해서 좀 더 연하거나 어둡게 처리할 수도 있다. */

:root {
--brandColor: green;   브랜드 색상을 CSS 변수로 정해두고,
}
.container {
    background-color: color-mix(var(--brandColor) 50%, white 20%);  추후 color-mix 내부에서 조절하여 사용.
}

 

 

 

 

:has()

(브라우저 지원 : Safari 15.4)

 

:has()를 사용하면 (부모 요소에 특정 자식이 있는지 여부에 따라) 부모 요소에 스타일을 줄 수 있다. 
이전에는 부모 안에 자식이 있을 때에만 자식에 스타일을 줄 수 있었다.
입력폼을 예를 들어 폼 안에 버튼(form > button)이 있을 때 button에만 스타일을 줄 수 있었는데, 앞으로는 form에 스타일을 추가 할 수 있게 된것이다. 

 

/* has() 기본 구문 */
.parent:has(.child) {...} 


/* has() 사용 예 : 버튼(button)이 있는 입력폼(form)에 스타일을 추가 */
form:has(button) {...} 

/* 버튼(button)이 있는 입력폼(form)에 스타일을 변경 */
form:has(button:hover) {...} 

/* 링크(a)를 갖고 있는 목록 항목(li)에 스타일을 추가 */
li:has(a) {...} 

/*  이미지(img) 주변에 있는 링크(a) 스타일을 변경 */
a:has(> img) {...}

 

 

 

@nest

(현재 시점에서는 브라우저 지원하지 않음)

 

특정 자식에게만 스타일을 적용하려고 할때 반복되는 코드가 많아지게 되는데,  @nest를 적용하면 부모와 자식간의 관계를 CSS에서 명확하고 간결하게 표기할 수 있다.
아직 브라우저에서 지원하지 않고있지만 추후에 표준안으로 자리 잡게 되면, @nest 기능을 사용하기 위해서 썼던 SASS 프레임워크를 사용할 필요가 없어진다.

 

@nest를 사용할 때는 nesting selector 기호로 '&'를 표기하여 사용한다.

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

@nest 사용 전과 후 (https://youtu.be/jr9imvgVRJM?t=614)

 

 

 

@scope

(현재 시점에서는 브라우저 지원하지 않음)

 

@scope 규칙을 사용하면 스타일의 범위를 지정하거나 스타일의 범위를 분리할 수 있다.

스타일링이 서로 다른 모듈과 컴포넌트와 충돌이 나지 않도록 스코프라는 이름으로 감싸준다.

@scope를 사용하면, 이름 충돌을 피하기 위해 사용했던 CSS Module 전처리기를 사용할 필요가 없어진다.

 

@scope 사용 전과 후  (https://youtu.be/kkiLBF_YerM?t=452)

 

@scope 사용 예 (https://youtu.be/jr9imvgVRJM?t=630)