기준: 2023년

caniuse.com에 기준이 도입됩니다. 이 게시물에서는 통합에 대해 알아보고 2023년에 기준에 포함된 몇 가지 기능을 살펴봅니다.

기준점의 새로운 정의에 따라 기능의 수명 주기에는 두 가지 단계가 있습니다. 새로 제공되는 단계와 30개월 후에 널리 제공되는 단계입니다. 기능이 다음 브라우저에서 상호 운용되기 시작하면 새로운 기준점의 일부가 되어 사용할 수 있게 됩니다.

  • Safari (macOS 및 iOS)
  • Firefox (데스크톱 및 Android)
  • Chrome (데스크톱 및 Android)
  • Edge (데스크톱)

기능 사용 가능 여부를 명확히 하는 다음 단계로, 오늘부터 기준선이 '사용 가능 여부'에 표시되기 시작합니다. Can I Use의 일부 페이지를 방문하면 기능이 기준라인에서 광범위하게 사용 가능한지 여부를 알려주는 배지가 표시됩니다.

CSS 그리드 레이아웃에서 널리 사용되는 배지가 있는 '사용 가능' 스크린샷

기준선에 새로 포함된 기능에는 사용 가능해진 연도와 함께 배지도 표시됩니다. 올해 핵심 브라우저 세트에서 상호 운용성을 갖게 된 모든 항목은 기준 2023의 일부입니다.

컨테이너 쿼리에서 새로 사용할 수 있는 배지가 있는 '사용 가능' 스크린샷

이 게시물의 나머지 부분에서는 2023년에 이 기록을 달성한 기능을 알아보세요. 이 모든 기능은 새로 제공되는 2023년 기준입니다.

컨테이너 쿼리 및 컨테이너 쿼리 단위 크기

크기 컨테이너 쿼리를 사용하면 미디어 쿼리를 사용하여 표시 영역의 크기를 쿼리하는 것과 거의 동일한 방식으로 요소의 크기를 쿼리할 수 있습니다. 컨테이너를 사용하면 배치된 영역의 크기에 반응하는 구성요소를 만들어 재사용 가능한 구성요소를 훨씬 쉽게 만들 수 있습니다.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

다음 카드의 디자인은 구성요소의 너비에 따라 달라집니다. 안정적인 브라우저에 컨테이너 쿼리 도착에서 자세히 알아보세요.

새로운 색상 공간 및 함수

이제 CSS에서 sRGB 색상 영역 외부의 색상에 액세스할 수 있는 색상 공간을 지원합니다. 즉, HD 색상 범위의 색상을 사용하여 HD (고화질) 디스플레이를 지원할 수 있습니다.

새로운 색상 모델

이제 기준에서 색상 함수 lch(), lab(), oklch(), oklab()를 사용하여 LCH, Lab, OKLCH, OKLab 색상 모델에 액세스할 수 있습니다.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

분홍색에서 파란색으로 이어지는 선명한 그라데이션이 적용된 gradient.style 편집기의 스크린샷
gradient.style을 사용하여 새로운 색상 공간을 사용해 보세요.

color-mix() 함수

또한 새로운 색상 함수가 기준에 포함되었습니다. color-mix() 함수를 사용하면 모든 색상 공간에서 한 색상을 다른 색상과 혼합할 수 있습니다. 다음 CSS에서는 srgb 색상 공간에서 파란색의 25% 가 흰색에 혼합됩니다.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

color-mix()에 대해 자세히 알아보기

color() 함수

color() 함수는 R, G, B 채널로 색상을 지정하는 모든 색상 공간에 사용할 수 있습니다. color()는 먼저 색상 공간 매개변수를 사용하고, 그다음 RGB의 일련의 채널 값과 선택적으로 일부 알파를 사용합니다. srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65 중 하나를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

CSS 고해상도 색상 가이드에서는 새 색상 공간과 함수의 더 많은 예시와 함께 언제 어떤 색상 공간과 함수를 사용해야 하는지에 관한 정보를 제공합니다.

압축 스트림

Compression Streams API는 데이터 스트림을 압축 및 압축 해제하기 위한 JavaScript API입니다. 이 내장 압축을 사용하는 앱은 더 이상 압축 라이브러리를 포함하지 않아도 됩니다.

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

이제 모든 브라우저에서 압축 스트림이 지원됨에서 자세히 알아보세요.

오프스크린 캔버스

OffscreenCanvas 이전에는 캔버스 그리기 기능이 <canvas> 요소에 연결되어 있었으므로 DOM에 직접 종속되었습니다. OffscreenCanvas는 캔버스를 화면 밖으로 이동하여 DOM을 Canvas API에서 분리합니다.

이러한 분리 덕분에 OffscreenCanvas 렌더링이 DOM에서 완전히 분리되므로 두 캔버스 간에 동기화가 없으므로 일반 캔버스보다 속도가 다소 개선됩니다. 사용 가능한 DOM이 없더라도 렌더링 작업을 Web Worker로 이동하여 기본 스레드를 해제하고 애플리케이션의 응답성을 개선하는 데도 사용할 수 있습니다.

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

OffscreenCanvas: 웹 작업자로 캔버스 작업 속도 높이기에서 자세히 알아보기

모듈 미리 로드

모듈을 미리 로드하면 다운로드 및 처리 시간이 줄어듭니다. JavaScript 모듈을 참조하는 링크 요소에 rel="modulepreload"를 추가하면 브라우저가 모듈을 가져와 파싱 및 컴파일한 후 실행 준비가 되면 결과를 모듈 맵에 배치합니다.

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

모듈 미리 로드에서 자세히 알아보세요.

CSS의 삼각함수

2023년에는 CSS 값 및 단위 수준 4 사양의 삼각함수 함수가 상호 운용 가능해졌습니다. 즉, sin(), cos(), tan(), asin(), acos(), atan(), atan2() 함수는 기준 2023의 일부입니다.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

이 데모에서는 삼각 함수를 사용하여 중심점을 중심으로 원형 경로에서 항목을 이동합니다.

이러한 함수를 사용하는 방법을 알아보고 CSS의 삼각함수에서 몇 가지 사용 사례를 살펴보세요.

inert 속성

DOM 요소를 inert로 표시하면 요소에서 움직임이나 상호작용이 삭제됩니다. inert 속성으로 인해 브라우저에서 요소를 무시합니다.

  • 사용자가 요소를 클릭해도 click 이벤트가 실행되지 않습니다.
  • 요소에 포커스가 설정되지 않습니다.
  • 요소와 해당 콘텐츠가 접근성 트리에서 제외됩니다.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

화면 밖에 있거나 숨겨진 요소에 이 속성을 추가합니다. 자세한 내용은 inert 속성을 참고하세요.

CSS 그리드 레이아웃의 하위 그리드

grid-template-columnsgrid-template-rowssubgrid 값을 사용하면 상위 그리드에 정의된 트랙을 중첩된 그리드에서 사용할 수 있습니다. 즉, 서로 중첩된 별도의 그리드에서 요소를 서로 정렬할 수 있습니다.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

CSS 하위 그리드에서 하위 그리드 사용 사례를 보여주는 여러 게시물 및 예시와 관련된 링크와 예시를 확인할 수 있습니다.

NumberFormat V3

Intl.NumberFormat V3는 2023년에 기준 프로필의 일부가 된 Intl.NumberFormat의 새로운 기능 모음입니다. 추가 기능은 다음과 같습니다.

  • 숫자 범위의 형식을 지정하는 세 가지 새로운 함수(formatRange, formatRangeToParts, selectRange)
  • 그룹화 enum
  • 새로운 반올림 및 정밀도 옵션
  • 반올림 우선순위
  • 문자열을 소수점으로 해석
  • 반올림 모드
  • 부호 표시가 음수임

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

NumberFormat V3 제안서에서 이러한 각 새로운 기능에 관해 자세히 알아보세요.

Fullscreen API

Fullscreen API를 사용하면 requestFullscreen() 메서드를 호출하여 <video>와 같은 요소를 전체 화면 모드로 배치할 수 있습니다. 또한 요소가 전체 화면 모드인지, 문서가 전체 화면 모드를 요청할 수 있는 상태인지 감지하는 메서드도 제공합니다.

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

MDN의 Fullscreen API 가이드에서 자세히 알아보세요.

CSS :has() 선택자

기준 2023은 :has() 선택기로, 12월 19일에 Firefox 121에 출시됩니다. 이 선택기는 다른 용도 외에도 상위 선택자 역할을 하여 내부에 있는 항목을 기반으로 요소를 선택할 수 있습니다. 예를 들어 요소 내에 이미지가 있는지 여부에 따라 다른 CSS를 적용할 수 있습니다.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

:has(): 가족 선택기에서 자세히 알아보세요.

올해 Baseline에 추가된 더 많은 기능

올해 기준에 포함된 다른 기능은 다음과 같습니다.

이러한 기능 중 다수는 Interop 2023의 공동작업을 통해 상호 운용성을 달성했습니다. 기능이 이 프로세스를 거쳐 새로운 기능으로 기준점에 도달하여 널리 제공되기까지의 과정을 지켜보는 것은 매우 흥미롭습니다. 이를 통해 자체 프로젝트에서 기능을 도입할 시기를 결정하는 데 더 명확한 경로를 만들 수 있습니다.