기준: 2023년

caniuse.com에서 Baseline을 이용할 수 있습니다. 이 게시물에서는 통합에 대해 알아보고 2023년 Baseline에 포함된 일부 기능을 살펴봅니다.

기준의 새로운 정의에 따라 특성의 수명 주기에는 두 단계가 있습니다. 먼저 새로 사용 가능한 경우와 30개월 후 폭넓게 사용 가능할 때 기능이 다음 브라우저에서 상호 운용 가능하게 되면 새로 사용할 수 있는 기준의 일부가 됩니다.

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

Can I Use

기능 가용성을 명확히 하기 위한 다음 단계로, 오늘부터 'Can I Use'(사용 가능)에 대해 알아봅니다. Can I Use의 일부 페이지를 방문하면 이 기능이 Baseline에서 널리 사용 가능한지 여부를 알려주는 배지가 표시됩니다.

CSS 그리드 레이아웃에서 널리 사용되는 배지와 함께 사용할 수 있는 기능의 스크린샷.

기준에서 새로 제공되는 기능에는 해당 기능이 출시된 연도와 함께 배지도 표시됩니다. 따라서 올해 핵심 브라우저 세트에서 상호 운용이 가능하게 된 모든 것은 기준 2023의 일부입니다.

컨테이너 쿼리에서 새로 제공되는 배지와 함께 사용할 수 있는 기능의 스크린샷

이 게시물의 나머지 부분에서는 2023년 한 해 동안 이 목표를 달성한 기능에 대해 알아보세요. 이 모든 기능이 기준 2023으로 새롭게 제공됩니다.

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

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

브라우저 지원

  • 105
  • 105
  • 110
  • 16

소스

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

새로운 색상 공간 및 함수

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

새로운 색상 모델

이제 Baseline에서 색상 함수 lch(), lab(), oklch(), oklab()를 통해 LCH, Lab, OKLCH, OKLab 색상 모델에 액세스할 수 있습니다.

브라우저 지원

  • 111
  • 111
  • 113
  • 15

소스

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

color-mix() 함수

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

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

브라우저 지원

  • 111
  • 111
  • 113
  • 15

소스

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 고화질 색상 가이드에서는 새로운 색상 공간 및 함수에 관한 더 많은 예와 언제 사용해야 할지에 대한 정보를 확인할 수 있습니다.

압축 스트림

압축 스트림 API는 데이터 스트림을 압축하고 압축 해제하는 JavaScript API입니다. 이 기본 제공 압축을 사용하면 애플리케이션에 더 이상 압축 라이브러리를 포함할 필요가 없습니다.

브라우저 지원

  • 80
  • 80
  • 113
  • 16.4

소스

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

오프스크린 캔버스

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

이러한 분리 덕분에 OffscreenCanvas 렌더링은 DOM에서 완전히 분리되며, 따라서 두 캔버스 간에 동기화가 이루어지지 않으므로 일반 캔버스에 비해 속도가 약간 향상됩니다. 그 외에도 사용 가능한 DOM이 없더라도 렌더링 작업을 Web Worker로 이동하여 기본 스레드를 해제하고 애플리케이션의 응답성을 높이는 데 사용할 수 있습니다.

브라우저 지원

  • 69
  • 79
  • 105
  • 16.4

소스

OffscreenCanvas—웹 워커로 캔버스 작업 속도 향상에 관해 자세히 알아보세요.

모듈 미리 로드

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

브라우저 지원

  • 66
  • 79 이하
  • 115
  • 17

소스

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

CSS의 삼각 함수

2023년에는 CSS 값 및 단위 레벨 4 사양의 삼각 함수가 상호 운용이 가능하게 되었습니다. 즉, sin(), cos(), tan(), asin(), acos(), atan(), atan2() 함수가 Baseline 2023의 일부입니다.

브라우저 지원

  • 111
  • 111
  • 108
  • 15.4

소스

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

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

inert 속성

Inert는 이동 기능이 없다는 것을 의미하므로 어떤 것을 비활성으로 표시하면 이러한 DOM 요소에서 이동이나 상호작용을 삭제합니다. inert 속성은 브라우저가 요소를 무시하도록 합니다.

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

브라우저 지원

  • 102
  • 102
  • 112
  • 15.5

소스

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

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

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

브라우저 지원

  • 117
  • 117
  • 71
  • 16

소스

CSS 서브그리드 문서에서는 몇 가지 예시와 서브 그리드 사용 사례를 소개하는 다양한 게시물의 링크를 확인할 수 있습니다.

숫자 서식 V3

Intl.NumberFormat V3은 2023년에 Baseline에 포함된 Intl.NumberFormat의 새로운 기능 집합입니다. 추가 기능은 다음과 같습니다.

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

브라우저 지원

  • 106
  • 106
  • 116
  • 15.4

소스

NumberFormat V3 제안에는 각각의 새로운 기능이 자세히 설명되어 있습니다.

Fullscreen API

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

브라우저 지원

  • 71
  • 79
  • 64
  • 16.4

소스

자세한 내용은 MDN의 Fullscreen API 가이드를 참고하세요.

CSS :has() 선택자

기준선 2023을 만들기만 하면 :has() 선택기가 12월 19일에 Firefox 121에 도입됩니다. 특히 이 선택기는 상위 선택기 역할을 하여 그 안에 있는 항목에 따라 요소를 선택할 수 있습니다. 예를 들어 요소 안에 이미지가 있는지 여부에 따라 다른 CSS를 적용할 수 있습니다.

브라우저 지원

  • 105
  • 105
  • 121
  • 15.4

소스

:has(): 계열 선택기에서 자세한 내용을 알아보세요.

올해 Baseline에 추가된 추가 기능

이 게시물에서는 올해 Baseline에 포함된 몇 가지 주요 기능을 공유했지만 더 많은 기능이 있습니다.

이러한 기능 중 다수는 Interop 2023의 공동작업을 통해 상호 운용성이 되었습니다. 이러한 프로세스를 거쳐 기능을 새로 출시하고 베이스라인에 출시하게 되어 더 많은 사용자가 사용할 수 있게 되는 시점이 다가오고 있습니다. 이를 통해 자체 프로젝트에서 기능을 채택할 시점을 더욱 명확하게 결정할 수 있습니다.