2022년 CSS 현황

Google IO 2022에서 소개된 현재와 미래의 웹 스타일 지정 기능과 추가 기능이 포함되어 있습니다.

Adam Argyle

2022년은 기능과 협력적 브라우저 기능 출시 모두에서 CSS의 가장 큰 해가 될 것입니다. 14가지 기능을 구현한다는 공동 목표가 있기 때문입니다.

개요

이 게시물은 Google IO 2022에서 진행된 강연의 문서 형식입니다. 각 기능에 대한 심층적인 가이드가 아니라 흥미를 유발하기 위한 소개와 간략한 개요를 제공하여 깊이보다는 폭을 제공합니다. 관심이 있다면 섹션 끝에서 자세한 정보를 제공하는 리소스 링크를 확인하세요.

목차

아래 목록을 사용하여 관심 있는 주제로 이동하세요.

브라우저 호환성

많은 CSS 기능이 협력적으로 출시되도록 설정된 주요 이유는 Interop 2022의 노력 때문입니다. 상호 운용성 노력을 살펴보기 전에 호환성 2021의 노력을 살펴보는 것이 중요합니다.

Compat 2021

설문조사를 통해 개발자 의견을 반영하여 2021년 목표는 현재 기능을 안정화하고, 테스트 모음을 개선하고, 다음 5가지 기능에 대해 브라우저의 통과 점수를 높이는 것이었습니다.

1. sticky 포지셔닝
2. aspect-ratio 크기 조정
3. flex 레이아웃
4. grid 레이아웃
5. transform 포지셔닝 및 애니메이션

전반적으로 테스트 점수가 높아져 안정성과 신뢰성이 업그레이드되었음을 보여줍니다. 이 팀에 큰 축하를 보냅니다.

Interop 2022

올해 브라우저들은 함께 모여 작업할 기능과 우선순위를 논의하고 노력을 통합했습니다. 개발자를 위해 다음과 같은 웹 기능을 제공할 계획입니다.

1. @layer
2. 색상 공간 및 함수
3. 격리
4. <dialog>
5. 양식 호환성
6. 스크롤
7. Subgrid
8. 서체
9. 표시 영역 단위
10. 웹 호환성

이 목록은 흥미롭고 야심차며, 앞으로 어떤 결과가 나올지 기대됩니다.

2022년 신곡

당연히 CSS 2022 상태는 Interop 2022 작업의 영향을 크게 받습니다.

캐스케이드 레이어

@layer 이전에는 로드된 스타일시트의 검색된 순서가 매우 중요했습니다. 마지막에 로드된 스타일이 이전에 로드된 스타일을 덮어쓸 수 있기 때문입니다. 이로 인해 개발자가 덜 중요한 스타일을 먼저 로드하고 더 중요한 스타일을 나중에 로드해야 하는 세심하게 관리되는 진입 스타일시트가 발생했습니다. 개발자가 이 중요성을 관리할 수 있도록 지원하는 전체 방법론(예: ITCSS)이 있습니다.

@layer를 사용하면 진입점 파일이 미리 레이어와 순서를 정의할 수 있습니다. 그런 다음 스타일이 로드되거나 정의되면 레이어 내에 배치할 수 있으므로 스타일 재정의 중요도를 유지할 수 있지만 세심하게 관리되는 로드 오케스트레이션은 없습니다.

이 동영상에서는 정의된 캐스케이드 레이어를 통해 필요에 따라 캐스케이드를 유지하면서도 더 자유로운 스타일의 작성 및 로드 프로세스를 지원하는 방법을 보여줍니다.

Chrome DevTools는 어떤 레이어에서 어떤 스타일이 적용되는지 시각화하는 데 유용합니다.

리소스

• CSS Cascade 5 사양
• 캐스케이드 레이어 설명
• MDN의 캐스케이드 레이어
• Una Kravets: 캐스케이드 레이어
• 아마드 샤디드: Hello, CSS Cascade Layers

Subgrid

subgrid 이전에는 다른 그리드 내의 그리드가 상위 셀이나 그리드 선에 정렬될 수 없었습니다. 각 그리드 레이아웃은 고유했습니다. 많은 디자이너가 전체 디자인에 단일 그리드를 배치하고 그 안에서 항목을 지속적으로 정렬합니다. 이는 CSS에서는 불가능합니다.

subgrid 이후 그리드의 하위 요소는 부모의 열이나 행을 자체적으로 채택하고 자신이나 하위 요소를 이에 정렬할 수 있습니다.

다음 데모에서 body 요소는 3열의 클래식 그리드를 만듭니다. 가운데 열은 main이라고 하고 왼쪽과 오른쪽 열은 선을 명명합니다.fullbleed 그런 다음 본문의 각 요소인 <nav>와 <main>는 grid-template-columns: subgrid를 설정하여 본문의 명명된 선을 채택합니다.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

마지막으로 <nav> 또는 <main>의 하위 요소는 fullbleed 및 main 열과 선을 사용하여 자체적으로 정렬하거나 크기를 조정할 수 있습니다.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

개발자 도구를 사용하면 선과 하위 그리드를 확인할 수 있습니다 (현재는 Firefox만 해당). 다음 이미지에서는 상위 그리드와 하위 그리드가 오버레이되었습니다. 이제 디자이너가 레이아웃을 생각한 방식과 유사해졌습니다.

개발자 도구의 요소 패널에서 그리드와 하위 그리드를 확인할 수 있으며, 이는 레이아웃을 디버깅하거나 검증하는 데 매우 유용합니다.

리소스

• 하위 그리드 사양
• MDN의 하위 그리드
• Bramus: 실용적인 CSS 하위 그리드 동영상 튜토리얼

컨테이너 쿼리

@container 이전에는 웹페이지의 요소가 전체 표시 영역의 크기에만 반응할 수 있었습니다. 이는 매크로 레이아웃에는 적합하지만 외부 컨테이너가 전체 뷰포트가 아닌 마이크로 레이아웃의 경우 레이아웃이 그에 따라 조정될 수 없습니다.

@container 이후에는 요소가 상위 컨테이너 크기나 스타일에 반응할 수 있습니다. 유일한 주의사항은 컨테이너가 가능한 쿼리 타겟으로 선언되어야 한다는 것입니다. 이는 큰 이점을 위한 작은 요구사항입니다.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

이러한 스타일 덕분에 다음 동영상의 월, 화, 수, 목, 금 열을 이벤트 요소로 쿼리할 수 있습니다.

다음은 크기에 관해 calendar-day 컨테이너를 쿼리한 다음 레이아웃과 글꼴 크기를 조정하는 CSS입니다.

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

다음은 또 다른 예입니다. 한 책 구성요소가 드래그되는 열에서 사용 가능한 공간에 맞게 조정됩니다.

우나는 상황을 새로운 반응형으로 평가하는 것이 맞습니다. @container를 사용할 때는 흥미롭고 의미 있는 디자인 결정을 많이 내릴 수 있습니다.

리소스

• Container Queries 사양
• 컨테이너 쿼리 설명
• MDN의 컨테이너 쿼리
• web.dev의 새로운 반응형
• Una의 Calendar 데모
• 멋진 컨테이너 쿼리 모음
• web.dev에서 Designcember를 빌드한 방법
• 아마드 샤디드: CSS 컨테이너 쿼리 소개

accent-color

accent-color 이전에는 브랜드와 일치하는 색상의 양식을 원할 경우 시간이 지남에 따라 관리하기 어려워지는 복잡한 라이브러리나 CSS 솔루션이 필요했습니다. 모든 옵션을 제공하고 접근성을 포함했으면 좋겠지만, 내장 구성요소를 사용할지 자체 구성요소를 채택할지 계속 선택하는 것은 지루해집니다.

accent-color 이후에는 CSS 한 줄로 브랜드 색상을 내장 구성요소에 적용할 수 있습니다. 브라우저는 색조 외에도 구성요소의 보조 부분에 적절한 대비 색상을 지능적으로 선택하고 시스템 색상 구성표 (밝은 또는 어두운)에 적응합니다.

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

accent-color에 대해 자세히 알아보려면 web.dev의 게시물을 참고하세요. 이 게시물에서는 유용한 CSS 속성의 다양한 측면을 살펴봅니다.

리소스

• accent-color 사양
• MDN의 accent-color
• web.dev의 accent-color
• Bramus: CSS accent-color로 사용자 인터페이스 컨트롤에 색조 적용

색상 수준 4 및 5

웹은 지난 수십 년 동안 sRGB가 지배해 왔지만 고화질 디스플레이와 OLED 또는 QLED 화면이 사전 장착된 휴대기기의 디지털 세계가 확장되면서 sRGB로는 충분하지 않습니다. 또한 사용자 환경설정에 맞게 조정되는 동적 페이지가 필요하며, 색상 관리는 디자이너, 디자인 시스템, 코드 유지관리자에게 점점 더 큰 관심사가 되고 있습니다.

하지만 2022년에는 CSS에 다음과 같은 여러 새로운 색상 함수와 공간이 있습니다. - 디스플레이의 HD 색상 기능에 도달하는 색상 - 인텐트와 일치하는 색상 공간(예: 지각적 균일성) - 보간 결과를 크게 변경하는 그라데이션의 색상 공간 - 혼합 및 대비를 돕고 작업할 공간을 선택하는 색상 함수

이러한 모든 색상 기능이 도입되기 전에는 디자인 시스템에서 적절한 대비 색상을 미리 계산하고 적절히 생생한 팔레트를 보장해야 했으며, 전처리기나 JavaScript가 무거운 작업을 처리했습니다.

이러한 모든 색상 기능을 사용하면 브라우저와 CSS가 모든 작업을 동적으로 적시에 처리할 수 있습니다. 테마 설정 및 데이터 시각화 색상을 사용 설정하기 위해 사용자에게 많은 KB의 CSS와 JavaScript를 전송하는 대신 CSS가 오케스트레이션과 계산을 실행할 수 있습니다. 또한 CSS는 사용 전에 지원을 확인하거나 대체를 적절하게 처리하는 데 더 적합합니다.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

HWB는 색조, 흰색, 검은색을 나타냅니다. 색상을 표현하는 인간 친화적인 방법으로, 색조와 밝게 하거나 어둡게 하는 흰색 또는 검은색의 양만 있으면 됩니다. 흰색이나 검은색으로 색상을 혼합하는 아티스트는 이 색상 구문 추가를 유용하게 사용할 수 있습니다.

이 색상 함수를 사용하면 HSL 및 RGB와 마찬가지로 sRGB 색상 공간의 색상이 생성됩니다. 2022년의 새로운 기능 측면에서 보면 새로운 색상을 제공하지는 않지만, 이 문법과 정신적 모델을 좋아하는 팬에게는 일부 작업을 더 쉽게 할 수 있습니다.

리소스

• HWB 사양
• MDN의 HWB
• 스테판 주디스: hwb() – 사람을 위한 색상 표기법인가요?

색상 공간

색상이 표현되는 방식은 색상 공간을 통해 이루어집니다. 각 색상 공간은 색상 작업을 위한 다양한 기능과 절충안을 제공합니다. 일부는 밝은 색상을 모두 함께 포장할 수 있고, 일부는 밝기에 따라 먼저 정렬할 수 있습니다.

2022 CSS는 디자이너와 개발자가 색상을 표시하고 선택하고 혼합하는 데 도움이 되는 고유한 기능을 갖춘 10개의 새로운 색상 공간을 제공하도록 설정되어 있습니다. 이전에는 색상 작업에 sRGB만 사용할 수 있었지만 이제 CSS를 통해 새로운 가능성과 새로운 기본 색상 공간인 LCH를 사용할 수 있습니다.

color-mix()

color-mix() 이전에는 개발자와 디자이너가 브라우저에 표시되기 전에 색상을 혼합하기 위해 Sass와 같은 전처리기가 필요했습니다. 대부분의 색상 혼합 기능은 혼합할 색상 공간을 지정하는 옵션도 제공하지 않아 혼동스러운 결과가 발생하기도 했습니다.

color-mix() 이후 개발자와 디자이너는 빌드 프로세스를 실행하거나 JavaScript를 포함하지 않고도 브라우저에서 다른 모든 스타일과 함께 색상을 혼합할 수 있습니다. 또한 혼합할 색상 공간을 지정하거나 기본 혼합 색상 공간인 LCH를 사용할 수 있습니다.

브랜드 색상이 기본으로 사용되고 마우스 오버 스타일의 밝은 색상이나 어두운 색상과 같은 변형이 생성되는 경우가 많습니다. color-mix()를 사용하면 다음과 같이 표시됩니다.

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

srgb와 같은 다른 색상 공간에서 이러한 색상을 혼합하려면 다음과 같이 변경합니다.

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

다음은 color-mix()를 사용한 테마 데모입니다. 브랜드 색상을 변경하고 테마가 업데이트되는지 확인합니다.

2022년에는 스타일시트에서 다양한 색상 공간의 색상을 혼합해 보세요.

리소스

• color-mix() 사양
• MDN의 color-mix()
• 테마 데모
• 또 다른 테마 데모
• Fabio Giolito: 이러한 예정된 CSS 기능으로 색상 테마 만들기

color-contrast()

color-contrast() 이전에는 스타일시트 작성자가 접근 가능한 색상을 미리 알아야 했습니다. 색상 시스템 사용자에게 해당 견본과 적절하게 대비되는 텍스트 색상을 나타내기 위해 팔레트에는 색상 견본에 검은색 또는 흰색 텍스트가 표시되는 경우가 많습니다.

color-contrast() 이후 스타일시트 작성자는 작업을 브라우저에 완전히 오프로드할 수 있습니다. 브라우저를 사용하여 검은색 또는 흰색을 자동으로 선택할 수 있을 뿐만 아니라 디자인 시스템에 적합한 색상 목록을 제공하여 원하는 대비율을 통과하는 첫 번째 색상을 선택하도록 할 수도 있습니다.

다음은 HWB 색상 팔레트 설정 데모의 스크린샷으로, 견본 색상을 기반으로 브라우저에서 텍스트 색상을 자동으로 선택합니다.

구문의 기본사항은 다음과 같습니다. 여기서 회색이 함수에 전달되고 브라우저에서 검은색과 흰색 중 대비가 가장 큰 색상을 결정합니다.

color: color-contrast(gray);

함수는 색상 목록으로 맞춤설정할 수도 있으며, 이 목록에서 선택한 색상 중 대비가 가장 높은 색상을 선택합니다.

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

마지막으로 목록에서 가장 대비가 높은 색상을 선택하지 않는 것이 바람직한 경우 타겟 대비율을 제공할 수 있으며 이를 통과하는 첫 번째 색상이 선택됩니다.

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

이 함수는 텍스트 색상 외에도 사용할 수 있지만 기본 사용 사례는 텍스트 색상일 것으로 예상됩니다. 적절한 대비 색상 선택이 CSS 언어 자체에 내장되면 접근성 있고 읽기 쉬운 인터페이스를 얼마나 쉽게 제공할 수 있을지 생각해 보세요.

리소스

• color-contrast() 사양
• MDN의 color-contrast()
• 데모

상대 색상 구문

상대 색상 구문 이전에는 색상을 계산하고 조정하기 위해 색상 채널을 맞춤 속성에 개별적으로 배치해야 했습니다. 이 제한으로 인해 색상 조작을 위한 기본 색상 함수가 HSL이 되기도 했습니다. 색조, 채도, 밝기를 모두 calc()로 간단하게 조정할 수 있기 때문입니다.

상대 색상 구문이 있으면 모든 공간의 색상을 CSS 한 줄로 분해하고 수정하고 색상으로 반환할 수 있습니다. HSL에 더 이상 제한이 없습니다. 원하는 색상 공간에서 조작할 수 있으며 이를 용이하게 하기 위해 만들어야 하는 맞춤 속성이 훨씬 적습니다.

다음 문법 예에서는 기본 16진수가 제공되고 이를 기준으로 두 개의 새 색상이 생성됩니다. 첫 번째 색상 --absolute-change는 기본 색상에서 LCH의 새 색상을 만든 다음 채도 (c)와 색조 (h)를 유지하면서 기본 색상의 밝기를 75%로 대체합니다. 두 번째 색상 --relative-change는 기본 색상에서 LCH의 새 색상을 만들지만 이번에는 채도 (c)를 20% 줄입니다.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

색상을 혼합하는 것과 비슷하지만 혼합보다는 변경에 더 가깝습니다. 다른 색상에서 색상을 변환하여 사용된 색상 함수로 이름이 지정된 세 채널 값에 액세스하고 이러한 채널을 조정할 수 있습니다. 전반적으로 색상에 매우 멋지고 강력한 구문입니다.

다음 데모에서는 상대 색상 구문을 사용하여 기본 색상의 더 밝은 변형과 더 어두운 변형을 만들고 color-contrast()를 사용하여 라벨의 대비가 적절하도록 했습니다.

이 함수는 색상 팔레트 생성에도 사용할 수 있습니다. 제공된 기본 색상에서 전체 팔레트가 생성되는 데모가 있습니다. 이 하나의 CSS 집합은 다양한 팔레트를 모두 지원하며 각 팔레트는 단순히 다른 기본값을 제공합니다. LCH를 사용했으므로 보너스로 팔레트가 지각적으로 얼마나 균일한지 살펴보세요. 이 색상 공간 덕분에 뜨겁거나 죽은 지점이 보이지 않습니다.

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

이제 색상 공간과 다양한 색상 함수가 강점과 약점에 따라 다양한 용도로 사용될 수 있음을 알 수 있습니다.

리소스

• 상대 색상 구문 사양
• 상대 색상 구문을 사용하여 색상 팔레트 빌드
• 상대 색상 구문을 사용하여 색상 변형 빌드

그라데이션 색상 공간

그라데이션 색상 공간 이전에는 sRGB가 기본 색상 공간으로 사용되었습니다. sRGB는 일반적으로 신뢰할 수 있지만 회색 데드존과 같은 약점이 있습니다.

그라데이션 색상 공간 뒤에 색상 보간에 사용할 색상 공간을 브라우저에 알려줍니다. 이를 통해 개발자와 디자이너는 원하는 그라데이션을 선택할 수 있습니다. 기본 색상 공간도 sRGB 대신 LCH로 변경됩니다.

구문 추가는 그라데이션 방향 뒤에 오고, 새로운 in 구문을 사용하며 선택사항입니다.

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

다음은 검은색에서 흰색으로 이어지는 기본적이고 필수적인 그라데이션입니다. 각 색상 공간의 결과 범위를 확인합니다. 어떤 색상은 다른 색상보다 먼저 어두운 검은색에 도달하고 어떤 색상은 너무 늦게 흰색으로 페이드됩니다.

다음 예에서는 검은색이 파란색으로 전환됩니다. 그라데이션에 알려진 문제 공간이기 때문입니다. 대부분의 색 공간은 색상 보간 중에 보라색으로 변합니다. 색상이 색상 공간 내에서 A 지점에서 B 지점으로 이동할 때도 마찬가지입니다. 그라데이션은 A 지점에서 B 지점까지 직선을 따라가므로 색상 공간의 모양에 따라 경로가 중간에 지나가는 중지점이 크게 달라집니다.

자세한 내용, 예시, 의견은 이 트위터 스레드를 참고하세요.

리소스

• 그라데이션 보간 사양
• 스페이스의 그라데이션 비교 데모
• 그라데이션을 비교하는 Observable 노트북

inert

inert 이전에는 사용자의 포커스를 즉각적인 주의가 필요한 페이지나 앱 영역으로 안내하는 것이 좋은 방법이었습니다. 이 안내 포커스 전략은 개발자가 포커스를 대화형 공간에 배치하고 포커스 변경 이벤트를 수신 대기하며 포커스가 대화형 공간을 벗어나면 다시 강제로 이동했기 때문에 포커스 트래핑으로 알려지게 되었습니다. 키보드나 스크린 리더를 사용하는 사용자는 작업을 완료한 후 다음 단계로 이동할 수 있도록 대화형 스페이스로 다시 안내됩니다.

inert 이후에는 페이지나 앱의 전체 섹션을 고정하거나 보호할 수 있으므로 트래핑이 필요하지 않습니다. 문서의 해당 부분이 비활성 상태인 동안에는 클릭과 포커스 변경 시도가 단순히 불가능합니다. inert는 사용자를 특정 위치에 머물게 하는 데 관심이 있는 것이 아니라 다른 위치를 사용할 수 없게 만드는 것이므로 덫이 아닌 경비원과 같다고 생각할 수도 있습니다.

JavaScript alert() 함수가 좋은 예입니다.

위 동영상에서 alert()가 호출될 때까지 페이지에 마우스와 키보드로 액세스할 수 있었음을 확인하세요. 알림 대화상자가 표시되면 페이지의 나머지 부분이 정지되거나 inert되었습니다. 사용자의 포커스가 알림 대화상자 내부에 배치되어 다른 곳으로 이동할 수 없습니다. 사용자가 상호작용하고 알림 기능 요청을 완료하면 페이지가 다시 상호작용 가능해집니다. inert를 사용하면 개발자가 이러한 안내형 집중 환경을 쉽게 구현할 수 있습니다.

다음은 작동 방식을 보여주는 작은 코드 샘플입니다.

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

대화상자가 좋은 예이지만 inert는 슬라이드 아웃 측면 메뉴 사용자 환경과 같은 경우에도 유용합니다. 사용자가 측면 메뉴를 슬라이드할 때 마우스나 키보드가 뒤에 있는 페이지와 상호작용하도록 허용하면 안 됩니다. 사용자에게 약간 혼란스러울 수 있습니다. 대신, 측면 메뉴가 표시될 때 페이지를 비활성 상태로 만들면 사용자가 해당 측면 메뉴 내에서 닫거나 탐색해야 하며, 메뉴가 열린 상태에서 페이지의 다른 곳에서 길을 잃지 않습니다.

리소스

• 비활성 사양
• MDN에서 비활성
• Chrome 개발자: inert 소개

COLRv1 글꼴

COLRv1 글꼴 이전에는 그라데이션과 내장된 색상 및 효과가 있는 글꼴을 위한 오픈 형식인 OT-SVG 글꼴이 웹에 있었습니다. 하지만 이러한 위젯은 매우 커질 수 있으며 텍스트를 수정할 수는 있지만 맞춤설정 범위가 크지 않았습니다.

COLRv1 글꼴이 도입된 후 웹에는 사용 사례별로 글꼴을 맞춤설정하거나 브랜드에 맞추기 위한 매개변수를 허용하는 더 작은 설치 공간, 벡터 확장 가능, 재배치 가능, 그라데이션 기능, 혼합 모드 지원 글꼴이 있습니다.

다음은 그림 이모티콘에 관한 Chrome 개발자 블로그 게시물의 예입니다. 그림 이모티콘의 글꼴 크기를 확대하면 선명도가 유지되지 않는다는 것을 알 수 있습니다. 이미지이며 벡터 아트가 아닙니다. 애플리케이션에서 그림 이모티콘을 사용하면 더 높은 품질의 애셋으로 대체되는 경우가 많습니다. COLRv1 글꼴을 사용하면 그림 이모티콘이 벡터로 표시되어 아름답습니다.

아이콘 글꼴은 이 형식을 사용하여 맞춤 듀오톤 색상 팔레트 등을 제공하는 등 놀라운 작업을 할 수 있습니다. COLRv1 글꼴을 로드하는 것은 다른 글꼴 파일과 같습니다.

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

COLRv1 글꼴 맞춤설정은 @font-palette-values를 사용하여 실행됩니다. 이는 나중에 참조할 수 있도록 맞춤설정 옵션 집합을 번들로 그룹화하고 이름을 지정하는 특수 CSS @규칙입니다. --로 시작하는 맞춤 속성과 마찬가지로 맞춤 이름을 지정하는 방법을 확인하세요.

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

--colorized을 맞춤설정의 별칭으로 사용하면 마지막 단계는 색상 글꼴 모음을 사용하는 요소에 팔레트를 적용하는 것입니다.

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

가변 글꼴과 컬러 글꼴이 점점 더 많이 제공됨에 따라 웹 타이포그래피는 풍부한 맞춤설정과 창의적인 표현을 향해 매우 멋진 길을 걷고 있습니다.

리소스

• GitHub의 Colrv1 사양
• Chrome 개발자: Colrv1 글꼴
• BlinkOn 개발자 설명 동영상

표시 영역 단위

새 표시 영역 변형 이전에는 웹에서 표시 영역을 맞추는 데 도움이 되는 물리적 단위를 제공했습니다. 높이, 너비, 최소 크기 (vmin), 최대 측면 (vmax)이 있었습니다. 이러한 방식은 여러 면에서 효과적이었지만 모바일 브라우저로 인해 복잡성이 도입되었습니다.

모바일에서 페이지를 로드할 때 URL이 포함된 상태 표시줄이 표시되며 이 표시줄이 뷰포트 공간의 일부를 사용합니다. 몇 초가 지나고 약간의 상호작용이 있으면 상태 표시줄이 슬라이드되어 사용자에게 더 큰 뷰포트 환경을 제공할 수 있습니다. 하지만 이 막대가 슬라이드 아웃되면 표시 영역 높이가 변경되고 vh 단위는 타겟 크기가 변경되므로 이동하고 크기가 조절됩니다. 나중에 vh 단위는 모바일 기기에서 시각적 레이아웃 문제를 일으키기 때문에 사용할 두 가지 뷰포트 크기 중 하나를 결정해야 했습니다. vh는 항상 가장 큰 표시 영역을 나타내는 것으로 결정되었습니다.

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

새 표시 영역 변형인 small, large, dynamic 표시 영역 단위가 제공되며, 물리적 단위에 논리적 동등 항목이 추가됩니다. 이 아이디어는 개발자와 디자이너가 주어진 시나리오에 사용할 단위를 선택할 수 있도록 하는 것입니다. 상태 표시줄이 사라질 때 약간의 레이아웃 이동이 있어도 괜찮다면 dvh (동적 표시 영역 높이)을 걱정 없이 사용할 수 있습니다.

다음은 새로운 뷰포트 변형으로 제공되는 모든 새로운 뷰포트 단위 옵션의 전체 목록입니다.

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

이러한 기능이 개발자와 디자이너가 뷰포트 반응형 디자인을 구현하는 데 필요한 유연성을 제공할 수 있기를 바랍니다.

리소스

• 표시 영역 상대 단위 사양
• Bramus: 대형, 소형, 동적 뷰포트

:has()

:has() 이전에는 선택기의 주체가 항상 끝에 있었습니다. 예를 들어 이 선택기의 주제는 목록 항목인 ul > li입니다. 의사 선택자는 선택자를 변경할 수 있지만 주체(ul > li:hover 또는 ul > li:not(.selected))는 변경할 수 없습니다.

:has() 후에는 요소 트리에서 상위인 주제가 하위 요소에 관한 쿼리를 제공하면서 주제로 유지될 수 있습니다(ul:has(> li)). 선택기의 주제가 이제 이 경우의 상위 요소이므로 :has()가 '상위 선택기'라는 일반적인 이름을 갖게 된 이유를 쉽게 이해할 수 있습니다.

다음은 .parent 클래스가 주제로 유지되지만 하위 요소에 .child 클래스가 있는 경우에만 선택되는 기본 구문 예입니다.

.parent:has(.child) {...}

다음은 <section> 요소가 주제이지만 하위 요소 중 하나에 :focus-visible가 있는 경우에만 선택기가 일치하는 예입니다.

section:has(*:focus-visible) {...}

:has() 선택기는 더 실용적인 사용 사례가 명확해지면 다시 한번 유용한 유틸리티가 됩니다. 예를 들어 현재 이미지를 래핑할 때 <a> 태그를 선택할 수 없으므로 해당 사용 사례에서 앵커 태그가 스타일을 변경하는 방법을 학습하기가 어렵습니다. 하지만 :has()을 사용하면 가능합니다.

a:has(> img) {...}

지금까지는 :has()가 상위 선택기처럼 보이는 예만 살펴봤습니다. <figure> 요소 내의 이미지 사용 사례를 고려하고 그림에 <figcaption>이 있는 경우 이미지의 스타일을 조정합니다. 다음 예에서는 figcaption이 있는 그림이 선택된 다음 해당 컨텍스트 내의 이미지가 선택됩니다. :has()이 사용되며 타겟팅하는 주제는 그림이 아닌 이미지이므로 주제가 변경되지 않습니다.

figure:has(figcaption) img {...}

조합은 무궁무진합니다. :has()를 수량 쿼리와 결합하고 자녀 수에 따라 CSS 그리드 레이아웃을 조정합니다. :has()를 대화형 가상 클래스 상태와 결합하여 새롭고 창의적인 방식으로 응답하는 애플리케이션을 만드세요.

@supports와 selector() 함수를 사용하면 지원 여부를 간단하게 확인할 수 있습니다. 브라우저가 구문을 이해하는지 테스트한 후 사용합니다.

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

리소스

• :has() 사양
• MDN의:has()
• CSS :has() 선택자는 '상위 선택자' 그 이상입니다.

2022년 이후

2022년에 이러한 놀라운 기능이 모두 출시된 후에도 하기 어려운 작업이 여전히 많이 있습니다. 다음 섹션에서는 남아 있는 문제와 이를 해결하기 위해 적극적으로 개발 중인 솔루션을 살펴봅니다. 이러한 솔루션은 브라우저의 플래그 뒤에 지정되거나 제공될 수 있지만 실험적입니다.

다음 섹션의 요점은 나열된 문제에 대해 여러 회사의 많은 사람들이 해결책을 모색하고 있다는 점을 안심하는 것이지 이러한 해결책이 2023년에 출시된다는 것이 아닙니다.

느슨하게 입력된 맞춤 속성

CSS 맞춤 속성은 정말 유용합니다. 이러한 유형을 사용하면 명명된 변수 내에 모든 종류의 항목을 저장할 수 있으며, 이후에 이를 확장하고, 계산하고, 공유하는 등의 작업을 할 수 있습니다. 사실 너무 유연해서 유연성이 낮은 것도 있으면 좋겠습니다.

box-shadow가 값에 맞춤 속성을 사용하는 시나리오를 생각해 보세요.

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

이 모든 것은 속성 중 하나가 CSS에서 허용하지 않는 값(예: --x: red)으로 변경될 때까지 잘 작동합니다. 중첩된 변수 중 하나가 누락되거나 잘못된 값 유형으로 설정되면 전체 섀도우가 깨집니다.

이때 @property이 등장합니다. --x는 유형이 지정된 맞춤 속성이 되어 더 이상 느슨하고 유연하지 않지만 정의된 경계가 있어 안전합니다.

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

이제 box-shadow가 var(--x)를 사용하고 나중에 --x: red가 시도되면 red는 <length>이 아니므로 무시됩니다. 즉, 맞춤 속성 중 하나에 잘못된 값이 지정되었더라도 그림자가 계속 작동합니다. 실패하는 대신 0px의 initial-value로 되돌아갑니다.

애니메이션

타입 안전성 외에도 애니메이션을 위한 다양한 기회를 제공합니다. CSS 구문의 유연성으로 인해 그라데이션과 같은 일부 항목을 애니메이션으로 만들 수 없습니다. @property는 여기에서 도움이 됩니다. 입력된 CSS 속성이 지나치게 복잡한 보간 내에서 개발자의 의도를 브라우저에 알릴 수 있기 때문입니다. 기본적으로 브라우저가 이전에는 애니메이션으로 만들 수 없었던 스타일의 측면을 애니메이션으로 만들 수 있도록 가능성의 범위를 제한합니다.

오버레이의 일부를 만드는 데 방사형 그라데이션을 사용하여 스포트라이트 포커스 효과를 만드는 다음 데모 예시를 참고하세요. JavaScript는 alt/opt 키가 눌리면 마우스 x 및 y를 설정한 다음 초점 크기를 25%와 같은 작은 값으로 변경하여 마우스 위치에 스포트라이트 초점 원을 만듭니다.

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

하지만 그라데이션은 애니메이션 처리할 수 없습니다. 너무 유연하고 복잡해서 브라우저가 애니메이션을 적용하는 방법을 '그냥 파생'할 수 없습니다. 하지만 @property를 사용하면 하나의 속성을 격리하여 입력하고 애니메이션화할 수 있으며 브라우저에서 의도를 쉽게 이해할 수 있습니다.

이 포커스 효과를 사용하는 비디오 게임은 항상 큰 원에서 작은 원으로 원을 애니메이션 처리합니다. 브라우저에서 그라데이션 마스크를 애니메이션 처리하도록 데모에서 @property를 사용하는 방법은 다음과 같습니다.

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

이제 수정된 영역을 하나의 속성으로 줄이고 값을 입력하여 브라우저가 길이를 지능적으로 보간할 수 있으므로 브라우저가 그라데이션 크기를 애니메이션으로 표시할 수 있습니다.

@property는 훨씬 더 많은 작업을 할 수 있지만 이러한 작은 지원만으로도 큰 도움이 될 수 있습니다.

리소스

• @property specification
• MDN의@property
• web.dev의@property
• 확대 및 집중 데모
• CSS Tricks: @property 및 애니메이션 기능 살펴보기

min-width 또는 max-width에 있었음

미디어 쿼리 범위 이전에는 CSS 미디어 쿼리에서 min-width 및 max-width를 사용하여 초과 및 미만 조건을 명시했습니다. 다음과 같이 표시될 수 있습니다.

@media (min-width: 320px) {
  …
}

미디어 쿼리 범위가 적용된 후 동일한 미디어 쿼리는 다음과 같이 표시될 수 있습니다.

@media (width >= 320px) {
  …
}

min-width와 max-width을 모두 사용하는 CSS 미디어 쿼리는 다음과 같습니다.

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

미디어 쿼리 범위가 적용된 후 동일한 미디어 쿼리는 다음과 같이 표시될 수 있습니다.

@media (320px <= width <= 1280px) {
  …
}

코딩 경험에 따라 둘 중 하나가 다른 하나보다 훨씬 더 읽기 쉬울 수 있습니다. 사양 추가로 개발자는 원하는 것을 선택하거나 서로 바꿔 사용할 수 있습니다.

리소스

• 미디어 쿼리 범위 구문 사양
• MDN의 미디어 쿼리 범위 구문
• 미디어 쿼리 범위 문법 PostCSS 플러그인

미디어 쿼리 변수 없음

@custom-media 이전에는 미디어 쿼리가 반복되거나 빌드 시간 동안 정적 변수를 기반으로 적절한 출력을 생성하기 위해 전처리기에 의존해야 했습니다.

@custom-media 이후 CSS에서는 맞춤 속성과 마찬가지로 미디어 쿼리를 별칭으로 지정하고 참조할 수 있습니다.

이름 지정은 매우 중요합니다. 목적을 문법과 일치시켜 팀에서 더 쉽게 공유하고 사용할 수 있습니다. 다음은 프로젝트 간에 저를 따라다니는 몇 가지 맞춤 미디어 쿼리입니다.

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

이제 정의되었으므로 다음과 같이 사용할 수 있습니다.

@media (--OSdark) {
  :root {
    …
  }
}

CSS 맞춤 속성 라이브러리 Open Props 내에서 사용하는 맞춤 미디어 쿼리의 전체 목록을 확인하세요.

리소스

• 맞춤 미디어 쿼리 사양
• 맞춤 미디어 쿼리 PostCSS 플러그인

선택기 중첩은 정말 편리합니다.

@nest 이전에는 스타일시트에서 반복이 많았습니다. 선택기가 길고 각 선택기가 작은 차이를 타겟팅하는 경우 특히 다루기 어려워졌습니다. 중첩의 편리함은 전처리기를 채택하는 가장 일반적인 이유 중 하나입니다.

@nest이 지나면 반복이 사라집니다. 전처리기가 지원되는 중첩의 거의 모든 기능이 CSS에 내장되어 제공됩니다.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

중첩에서 가장 중요한 점은 중첩된 선택기에서 article를 반복하지 않는 것 외에도 스타일 지정 컨텍스트가 하나의 스타일 블록 내에 유지된다는 것입니다. 한 선택자와 그 스타일에서 스타일이 있는 다른 선택자로 이동하는 대신 (예 1) 독자는 글의 컨텍스트 내에 머물면서 글에 링크가 포함되어 있음을 확인할 수 있습니다. 관계와 스타일 의도는 함께 번들로 묶여 있으므로 article가 자체 스타일을 소유하는 것처럼 표시됩니다.

소유권은 중앙 집중화로도 생각할 수 있습니다. 스타일시트에서 관련 스타일을 찾아보는 대신 컨텍스트 내에 함께 중첩되어 있는 스타일을 모두 찾을 수 있습니다. 이 방법은 상위-하위 관계뿐만 아니라 하위-상위 관계에도 적용됩니다.

스타일을 소유하고 하위 요소를 변경하는 상위 요소와 달리 다른 상위 요소 컨텍스트에 있을 때 자체를 조정하려는 구성요소 하위 요소를 고려해 보세요.

/* 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는 전반적으로 더 건강한 스타일 조직, 중앙 집중화, 소유권에 도움이 됩니다. 구성요소는 다른 스타일 블록에 스타일이 분산되는 대신 자체 스타일을 그룹화하고 소유할 수 있습니다. 이 예에서는 작아 보일 수 있지만 편의성과 가독성 모두에 매우 큰 영향을 미칠 수 있습니다.

리소스

• @nest 사양
• @nest PostCSS 플러그인
• Bramus: CSS의 미래: 선택기 중첩

스타일 범위 지정이 매우 어려움

@scope 이전에는 CSS의 스타일이 캐스케이드되고, 상속되고, 기본적으로 전역 범위가 지정되기 때문에 다양한 전략이 존재했습니다. CSS의 이러한 기능은 여러 면에서 매우 편리하지만, 구성요소의 스타일이 다양할 수 있는 복잡한 사이트와 애플리케이션의 경우 전역 공간과 캐스케이드의 특성으로 인해 스타일이 누출되는 것처럼 느껴질 수 있습니다.

@scope 이후에는 스타일의 범위를 클래스와 같은 컨텍스트 내로만 지정할 수 있을 뿐만 아니라 스타일이 끝나는 위치를 명시하여 스타일이 계속 캐스케이드되거나 상속되지 않도록 할 수도 있습니다.

다음 예시에서 BEM 이름 지정 규칙 범위를 실제 의도로 되돌릴 수 있습니다. BEM 선택기는 명명 규칙을 사용하여 header 요소의 색상을 .card 컨테이너로 범위를 지정하려고 합니다. 이렇게 하려면 헤더에 이 클래스 이름이 있어야 목표가 달성됩니다. @scope를 사용하면 헤더 요소를 마크업하지 않고 동일한 목표를 달성하기 위해 이름 지정 규칙이 필요하지 않습니다.

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

다음은 구성요소에 덜 특화되고 CSS의 전역 범위 특성에 관한 또 다른 예입니다. 어두운 테마와 밝은 테마는 스타일시트 내에 공존해야 하며, 여기서 순서는 우선 스타일을 결정하는 데 중요합니다. 일반적으로 이는 어두운 테마 스타일이 밝은 테마 뒤에 온다는 것을 의미합니다. 이렇게 하면 밝은 테마가 기본값으로 설정되고 어두운 테마가 선택적 스타일로 설정됩니다. @scope로 순서 지정 및 범위 다툼을 피하세요.

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

여기에서 스토리를 완료하기 위해 @scope은 스타일 범위가 끝나는 위치를 설정할 수도 있습니다. 이는 명명 규칙이나 전처리기로는 할 수 없습니다. 특별한 경우이며 브라우저에 내장된 CSS만 할 수 있습니다. 다음 예에서 img 및 .content 스타일은 .media-block의 하위 요소가 .content의 형제 또는 상위 요소인 경우에만 적용됩니다.

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

리소스

• @scope 사양
• @scope 설명

메이슨리 레이아웃을 위한 CSS 방법이 없음

그리드를 사용한 CSS masonry 이전에는 JavaScript가 masonry 레이아웃을 구현하는 가장 좋은 방법이었습니다. 열 또는 flexbox를 사용하는 CSS 메서드는 콘텐츠 순서를 정확하게 나타내지 못했기 때문입니다.

그리드를 사용한 CSS 메이슨리를 사용하면 JavaScript 라이브러리가 필요하지 않으며 콘텐츠 순서가 올바르게 표시됩니다.

위 데모는 다음 CSS로 구현됩니다.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

이 기능이 누락된 레이아웃 전략으로 인식되고 있다는 점이 다행이며, 오늘 Firefox에서 사용해 볼 수 있습니다.

리소스

• 지역 석조 공사 레이아웃 사양
• MDN의 그리드 레이아웃
• Smashing Magazine: Native CSS Masonry Layout with CSS Grid

CSS는 사용자가 데이터를 줄이는 데 도움이 되지 않음

prefers-reduced-data 미디어 쿼리 이전에는 JavaScript와 서버가 사용자의 운영체제나 브라우저의 '데이터 절약 모드' 옵션에 따라 동작을 변경할 수 있었지만 CSS는 그럴 수 없었습니다.

prefers-reduced-data 미디어 쿼리 후 CSS는 사용자 환경 개선에 참여하고 데이터를 저장하는 역할을 할 수 있습니다.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

위의 CSS는 이 미디어 스크롤 구성요소에서 사용되며 절약되는 양이 클 수 있습니다. 방문하는 표시 영역이 클수록 페이지 로드 시 절약되는 금액이 커집니다. 사용자가 미디어 스크롤러와 상호작용하는 동안 저장 작업이 계속됩니다. 이미지에는 모두 loading="lazy" 속성이 있으며, 이는 요소를 완전히 숨기는 CSS와 결합되어 이미지에 대한 네트워크 요청이 이루어지지 않음을 의미합니다.

테스트에서 중간 크기의 표시 영역에 40개의 요청과 700KB의 리소스가 처음 로드되었습니다. 사용자가 미디어 선택을 스크롤하면 더 많은 요청과 리소스가 로드됩니다. CSS와 축소된 데이터 미디어 쿼리를 사용하면 10개의 요청과 172KB의 리소스가 로드됩니다. 이는 0.5MB의 절감 효과이며 사용자는 미디어를 스크롤하지도 않았습니다. 이 시점에는 추가 요청이 이루어지지 않습니다.

데이터 절약 외에도 데이터 사용량 감소 환경에는 더 많은 이점이 있습니다. 더 많은 콘텐츠를 볼 수 있으며 시선을 끄는 커버 이미지가 없어 집중하기 좋습니다. 많은 사용자가 데이터 메가바이트당 요금을 지불하므로 데이터 절약 모드로 탐색합니다. CSS가 여기서 도움이 될 수 있다는 점이 정말 좋습니다.

리소스

• prefers-reduced-data 사양
• MDN의 prefers-reduced-data
• GUI의 prefers-reduced-data 챌린지
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Study

스크롤 스냅 기능이 너무 제한적임

이러한 스크롤 스냅 제안이 있기 전에는 캐러셀, 슬라이더 또는 갤러리를 관리하는 자체 JavaScript를 작성하는 것이 모든 관찰자와 상태 관리로 인해 빠르게 복잡해질 수 있었습니다. 또한 주의하지 않으면 스크립트에 의해 자연스러운 스크롤 속도가 정규화되어 사용자 상호작용이 약간 부자연스럽고 어색하게 느껴질 수 있습니다.

새로운 API

snapChanging()

브라우저가 스냅 하위 요소를 해제하면 이 이벤트가 발생합니다. 이를 통해 UI는 스냅 하위 요소의 부족과 스크롤러의 불확정 스냅 상태를 반영할 수 있습니다. 이제 사용되고 새로운 위치에 배치되기 때문입니다.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

브라우저가 새 하위 요소로 스냅되고 스크롤러가 멈추면 이 이벤트가 발생합니다. 이렇게 하면 스냅된 하위 요소에 종속된 UI가 연결을 업데이트하고 반영할 수 있습니다.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

스크롤이 항상 시작 부분에서 시작되지는 않습니다. 좌우로 스와이프하면 다른 이벤트가 트리거되는 스와이프 가능한 구성요소나 페이지 로드 시 상단으로 스크롤할 때까지 처음에는 숨겨져 있는 검색창을 고려해 보세요. 이 CSS 속성을 사용하면 개발자가 스크롤러가 특정 지점에서 시작되도록 지정할 수 있습니다.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

이 CSS 선택기는 현재 브라우저에서 스냅된 스크롤 스냅 컨테이너의 요소와 일치합니다.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

이러한 스크롤 스냅 제안 이후에는 브라우저에서 이제 작업을 위한 편의 기능을 제공하므로 슬라이더, 캐러셀 또는 갤러리를 훨씬 쉽게 만들 수 있습니다. 기본 제공 API를 사용하는 대신 관찰자 및 스크롤 오케스트레이션 코드를 삭제합니다.

이러한 CSS 및 JS 기능은 아직 초기 단계이지만, 곧 이러한 기능의 채택 및 테스트에 도움이 되는 폴리필이 출시될 예정입니다.

리소스

• Scroll Snap 2 초안 사양
• Scroll Snap 2 설명서
• 스냅 데모

알려진 상태 간 순환

toggle() 이전에는 브라우저에 이미 내장된 상태만 스타일 지정 및 상호작용에 활용할 수 있었습니다. 예를 들어 체크박스 입력에는 CSS가 요소를 시각적으로 변경하는 데 사용할 수 있는 내부적으로 관리되는 입력 브라우저 상태인 :checked가 있습니다.

toggle() 이후에는 CSS가 스타일을 변경하고 사용하는 모든 요소에 맞춤 상태를 만들 수 있습니다. 그룹, 사이클링, 방향 전환 등을 지원합니다.

다음 예에서는 완료 시 목록 항목 취소선의 동일한 효과를 달성하지만 체크박스 요소는 없습니다.

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

관련 CSS toggle() 스타일은 다음과 같습니다.

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

상태 머신에 익숙하다면 toggle()과의 교차점이 얼마나 많은지 알 수 있습니다. 이 기능을 사용하면 개발자가 CSS에 더 많은 상태를 빌드할 수 있으므로 상호작용과 상태를 더 명확하고 의미론적인 방식으로 오케스트레이션할 수 있습니다.

리소스

• toggle() 초안 사양
• Bramus: CSS의 미래: CSS 전환 버튼

선택 요소 맞춤설정

<selectmenu> 이전에는 CSS에서 리치 HTML로 <option> 요소를 맞춤설정하거나 옵션 목록의 표시를 크게 변경할 수 없었습니다. 이로 인해 개발자는 <select>의 기능을 많이 재현하는 외부 라이브러리를 로드해야 했고 이는 많은 작업이었습니다.

<selectmenu> 이후 개발자는 옵션 요소에 풍부한 HTML을 제공하고 필요한 만큼 스타일을 지정하면서도 접근성 요구사항을 충족하고 시맨틱 HTML을 제공할 수 있습니다.

<selectmenu> 설명 페이지에서 가져온 다음 예에서는 몇 가지 기본 옵션으로 새 선택 메뉴를 만듭니다.

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS는 요소의 부분을 타겟팅하고 스타일을 지정할 수 있습니다.

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

웹 실험 플래그를 사용 설정한 Canary의 Chromium에서 <selectmenu> 요소를 사용해 볼 수 있습니다. 2023년 이후 맞춤설정 가능한 선택 메뉴 요소를 기대해 주세요.

리소스

• Selectmenu 사양
• Selectmenu 데모

요소를 다른 요소에 고정

anchor() 이전에는 개발자가 상위 요소 내에서 하위 요소를 이동할 수 있도록 절대 위치와 상대 위치가 위치 전략으로 제공되었습니다.

anchor() 이후에는 개발자가 하위 요소인지 여부와 관계없이 요소를 다른 요소에 배치할 수 있습니다. 또한 개발자가 배치할 가장자리를 지정할 수 있으며 요소 간의 위치 관계를 만들기 위한 기타 유용한 기능도 제공합니다.

자세한 내용을 알아보려면 설명에 제공된 몇 가지 유용한 예시와 코드 샘플을 참고하세요.

리소스

• anchor() 설명