caniuse.com에 기준이 도입됩니다. 이 게시물에서는 통합에 대해 알아보고 2023년에 기준에 포함된 몇 가지 기능을 살펴봅니다.
기준점의 새로운 정의에 따라 기능의 수명 주기에는 두 가지 단계가 있습니다. 새로 제공되는 단계와 30개월 후에 널리 제공되는 단계입니다. 기능이 다음 브라우저에서 상호 운용되기 시작하면 새로운 기준점의 일부가 되어 사용할 수 있게 됩니다.
- Safari (macOS 및 iOS)
- Firefox (데스크톱 및 Android)
- Chrome (데스크톱 및 Android)
- Edge (데스크톱)
기준이 '사용 가능'으로 설정됨
기능 사용 가능 여부를 명확히 하는 다음 단계로, 오늘부터 기준선이 '사용 가능 여부'에 표시되기 시작합니다. Can I Use의 일부 페이지를 방문하면 기능이 기준라인에서 광범위하게 사용 가능한지 여부를 알려주는 배지가 표시됩니다.
기준선에 새로 포함된 기능에는 사용 가능해진 연도와 함께 배지도 표시됩니다. 올해 핵심 브라우저 세트에서 상호 운용성을 갖게 된 모든 항목은 기준 2023의 일부입니다.
이 게시물의 나머지 부분에서는 2023년에 이 기록을 달성한 기능을 알아보세요. 이 모든 기능은 새로 제공되는 2023년 기준입니다.
컨테이너 쿼리 및 컨테이너 쿼리 단위 크기
크기 컨테이너 쿼리를 사용하면 미디어 쿼리를 사용하여 표시 영역의 크기를 쿼리하는 것과 거의 동일한 방식으로 요소의 크기를 쿼리할 수 있습니다. 컨테이너를 사용하면 배치된 영역의 크기에 반응하는 구성요소를 만들어 재사용 가능한 구성요소를 훨씬 쉽게 만들 수 있습니다.
다음 카드의 디자인은 구성요소의 너비에 따라 달라집니다. 안정적인 브라우저에 컨테이너 쿼리 도착에서 자세히 알아보세요.
새로운 색상 공간 및 함수
이제 CSS에서 sRGB 색상 영역 외부의 색상에 액세스할 수 있는 색상 공간을 지원합니다. 즉, HD 색상 범위의 색상을 사용하여 HD (고화질) 디스플레이를 지원할 수 있습니다.
새로운 색상 모델
이제 기준에서 색상 함수 lch()
, lab()
, oklch()
, oklab()
를 사용하여 LCH, Lab, OKLCH, OKLab 색상 모델에 액세스할 수 있습니다.
![분홍색에서 파란색으로 이어지는 선명한 그라데이션이 적용된 gradient.style 편집기의 스크린샷](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=8&hl=ko)
color-mix()
함수
또한 새로운 색상 함수가 기준에 포함되었습니다. color-mix()
함수를 사용하면 모든 색상 공간에서 한 색상을 다른 색상과 혼합할 수 있습니다.
다음 CSS에서는 srgb 색상 공간에서 파란색의 25% 가 흰색에 혼합됩니다.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
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입니다. 이 내장 압축을 사용하는 앱은 더 이상 압축 라이브러리를 포함하지 않아도 됩니다.
이제 모든 브라우저에서 압축 스트림이 지원됨에서 자세히 알아보세요.
오프스크린 캔버스
OffscreenCanvas 이전에는 캔버스 그리기 기능이 <canvas>
요소에 연결되어 있었으므로 DOM에 직접 종속되었습니다. OffscreenCanvas는 캔버스를 화면 밖으로 이동하여 DOM을 Canvas API에서 분리합니다.
이러한 분리 덕분에 OffscreenCanvas 렌더링이 DOM에서 완전히 분리되므로 두 캔버스 간에 동기화가 없으므로 일반 캔버스보다 속도가 다소 개선됩니다. 사용 가능한 DOM이 없더라도 렌더링 작업을 Web Worker로 이동하여 기본 스레드를 해제하고 애플리케이션의 응답성을 개선하는 데도 사용할 수 있습니다.
OffscreenCanvas: 웹 작업자로 캔버스 작업 속도 높이기에서 자세히 알아보기
모듈 미리 로드
모듈을 미리 로드하면 다운로드 및 처리 시간이 줄어듭니다. JavaScript 모듈을 참조하는 링크 요소에 rel="modulepreload"
를 추가하면 브라우저가 모듈을 가져와 파싱 및 컴파일한 후 실행 준비가 되면 결과를 모듈 맵에 배치합니다.
모듈 미리 로드에서 자세히 알아보세요.
CSS의 삼각함수
2023년에는 CSS 값 및 단위 수준 4 사양의 삼각함수 함수가 상호 운용 가능해졌습니다. 즉, sin()
, cos()
, tan()
, asin()
, acos()
, atan()
, atan2()
함수는 기준 2023의 일부입니다.
이러한 함수를 사용하는 방법을 알아보고 CSS의 삼각함수에서 몇 가지 사용 사례를 살펴보세요.
inert
속성
DOM 요소를 inert
로 표시하면 요소에서 움직임이나 상호작용이 삭제됩니다. inert
속성으로 인해 브라우저에서 요소를 무시합니다.
- 사용자가 요소를 클릭해도
click
이벤트가 실행되지 않습니다. - 요소에 포커스가 설정되지 않습니다.
- 요소와 해당 콘텐츠가 접근성 트리에서 제외됩니다.
화면 밖에 있거나 숨겨진 요소에 이 속성을 추가합니다. 자세한 내용은 inert
속성을 참고하세요.
CSS 그리드 레이아웃의 하위 그리드
grid-template-columns
및 grid-template-rows
의 subgrid
값을 사용하면 상위 그리드에 정의된 트랙을 중첩된 그리드에서 사용할 수 있습니다. 즉, 서로 중첩된 별도의 그리드에서 요소를 서로 정렬할 수 있습니다.
CSS 하위 그리드에서 하위 그리드 사용 사례를 보여주는 여러 게시물 및 예시와 관련된 링크와 예시를 확인할 수 있습니다.
NumberFormat V3
Intl.NumberFormat V3는 2023년에 기준 프로필의 일부가 된 Intl.NumberFormat의 새로운 기능 모음입니다. 추가 기능은 다음과 같습니다.
- 숫자 범위의 형식을 지정하는 세 가지 새로운 함수(
formatRange
,formatRangeToParts
,selectRange
) - 그룹화 enum
- 새로운 반올림 및 정밀도 옵션
- 반올림 우선순위
- 문자열을 소수점으로 해석
- 반올림 모드
- 부호 표시가 음수임
NumberFormat V3 제안서에서 이러한 각 새로운 기능에 관해 자세히 알아보세요.
Fullscreen API
Fullscreen API를 사용하면 requestFullscreen()
메서드를 호출하여 <video>
와 같은 요소를 전체 화면 모드로 배치할 수 있습니다. 또한 요소가 전체 화면 모드인지, 문서가 전체 화면 모드를 요청할 수 있는 상태인지 감지하는 메서드도 제공합니다.
MDN의 Fullscreen API 가이드에서 자세히 알아보세요.
CSS :has()
선택자
기준 2023은 :has()
선택기로, 12월 19일에 Firefox 121에 출시됩니다. 이 선택기는 다른 용도 외에도 상위 선택자 역할을 하여 내부에 있는 항목을 기반으로 요소를 선택할 수 있습니다. 예를 들어 요소 내에 이미지가 있는지 여부에 따라 다른 CSS를 적용할 수 있습니다.
:has(): 가족 선택기에서 자세히 알아보세요.
올해 Baseline에 추가된 더 많은 기능
올해 기준에 포함된 다른 기능은 다음과 같습니다.
- 구성 가능한 스타일시트
- CSS의 복잡한 nth-child 선택자
- 미디어 쿼리의 범위 문법
- 지도 가져오기
- CSS 디스플레이의 여러 값
- @counter-style
counter-set
CSS 속성linear()
이중 함수- 출처 비공개 파일 시스템 (OPFS)
- CSS 중첩: 완화된 파싱을 추가하는 변경사항을 포함합니다.
- CSS
:dir()
가상 클래스 선택기 - CSS
cap
길이 단위 - CSS 마스킹
- HTML 동영상
<source>
요소의 미디어 쿼리 지원 - HTML
<search>
요소 <iframe>
요소의 지연 로드 (12월 19일 Firefox 121 출시)lh
및rlh
CSS line-height 단위
이러한 기능 중 다수는 Interop 2023의 공동작업을 통해 상호 운용성을 달성했습니다. 기능이 이 프로세스를 거쳐 새로운 기능으로 기준점에 도달하여 널리 제공되기까지의 과정을 지켜보는 것은 매우 흥미롭습니다. 이를 통해 자체 프로젝트에서 기능을 도입할 시기를 결정하는 데 더 명확한 경로를 만들 수 있습니다.