caniuse.com에서 Baseline을 이용할 수 있습니다. 이 게시물에서는 통합에 대해 알아보고 2023년 Baseline에 포함된 일부 기능을 살펴봅니다.
기준의 새로운 정의에 따라 기능의 수명 주기에는 두 가지 단계가 있습니다. 즉, 특성이 새로 사용 가능해지는 시점과 30개월 후 일반 안정화 버전으로 전환되는 시점입니다. 기능이 다음 브라우저에서 상호 운용 가능하게 되면 새로 사용할 수 있는 기준의 일부가 됩니다.
- Safari (macOS 및 iOS)
- Firefox (데스크톱 및 Android)
- Chrome (데스크톱 및 Android)
- Edge (데스크톱)
Can I Use
기능 가용성을 명확히 하기 위한 다음 단계로, 오늘부터 'Can I Use'(사용 가능)에 대해 알아보기 시작했습니다. Can I Use의 일부 페이지를 방문하면 이 기능이 Baseline에서 널리 사용 가능한지 여부를 알려주는 배지가 표시됩니다.
기준에 새로 포함된 기능에도 사용 가능해진 연도와 함께 배지가 표시됩니다. 올해 핵심 브라우저 세트에서 상호 운용이 가능하게 된 모든 기능은 기준 2023의 일부입니다.
이 게시물의 나머지 부분에서는 2023년 이 주요 기록을 달성한 기능을 알아보세요. 이 모든 기능은 기준 2023으로 새롭게 제공됩니다.
컨테이너 쿼리 및 컨테이너 쿼리 단위 크기 조정
크기 컨테이너 쿼리를 사용하면 미디어 쿼리를 사용해 표시 영역의 크기를 쿼리할 때와 거의 동일하게 요소의 크기를 쿼리할 수 있습니다. 배치된 영역의 크기에 반응하는 구성요소를 만들 수 있어 재사용 가능한 구성요소를 훨씬 더 쉽게 만들 수 있습니다.
다음 카드의 디자인은 구성요소의 너비에 따라 변경됩니다. 안정적인 브라우저에서의 컨테이너 쿼리 도입에서 자세히 알아보세요.
새로운 색상 공간 및 함수
CSS는 이제 sRGB 영역 밖의 색상에 액세스할 수 있는 색상 공간을 지원합니다. 즉, HD 영역의 색상을 사용하여 HD (고화질) 디스플레이를 지원할 수 있습니다.
새로운 색상 모델
이제 기준에서 색상 함수 lch(), lab(), oklch(), oklab()를 통해 LCH, Lab, OKLCH, OKLab 색상 모델에 액세스할 수 있습니다.
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 고화질 색상 가이드는 새로운 색상 공간 및 함수에 관한 더 많은 예와 언제 사용해야 할지에 관한 정보를 제공합니다.
압축 스트림
압축 스트림 API는 데이터 스트림을 압축하고 압축 해제하는 JavaScript API입니다. 이 기본 제공 압축을 사용하는 앱은 더 이상 압축 라이브러리를 포함할 필요가 없습니다.
이제 모든 브라우저에서 압축 스트림이 지원됨에서 자세히 알아보세요.
오프스크린 캔버스
OffscreenCanvas 이전에는 캔버스 그리기 기능이 <canvas> 요소에 연결되었으므로 DOM에 직접 종속되었습니다. OffscreenCanvas는 캔버스를 화면 밖으로 이동하여 캔버스 API에서 DOM을 분리합니다.
이러한 분리 덕분에 OffscreenCanvas 렌더링은 DOM에서 완전히 분리되므로 두 렌더링이 동기화되지 않으므로 일반 캔버스에 비해 속도가 약간 향상됩니다. 또한 사용 가능한 DOM이 없더라도 렌더링 작업을 웹 작업자로 이동하여 기본 스레드를 해제하고 애플리케이션의 응답성을 높이는 데 사용할 수도 있습니다.
OffscreenCanvas—웹 워커로 캔버스 작업 속도 향상에 관해 자세히 알아보세요.
모듈 미리 로드
모듈을 미리 로드하면 다운로드 및 처리 시간을 줄일 수 있습니다. JavaScript 모듈을 참조하는 링크 요소에 rel="modulepreload"를 추가하면 브라우저가 모듈을 가져와 파싱 및 컴파일한 후 실행할 준비가 된 모듈 맵에 결과를 저장합니다.
모듈 미리 로드에서 자세히 알아보세요.
CSS의 삼각 함수
2023년에는 CSS 값 및 단위 수준 4 사양의 삼각 함수가 상호 운용이 가능하게 되었습니다. 즉, sin(), cos(), tan(), asin(), acos(), atan(), atan2() 함수가 Baseline 2023의 일부입니다.
CSS의 삼각 함수에서 이러한 함수를 사용하는 방법과 몇 가지 사용 사례를 알아보세요.
inert 속성
DOM 요소를 inert로 표시하면 요소에서 움직임이나 상호작용이 삭제됩니다. inert 속성으로 인해 브라우저는 요소를 무시합니다.
- 사용자가 요소를 클릭하면
click이벤트가 실행되지 않습니다. - 요소가 포커스를 얻지 못합니다.
- 요소와 해당 콘텐츠가 접근성 트리에서 제외됩니다.
이 속성을 화면 밖에 있거나 숨겨진 요소에 추가합니다. 자세한 내용은 inert 속성을 참고하세요.
CSS 그리드 레이아웃의 하위 그리드
grid-template-columns 및 grid-template-rows의 subgrid 값을 사용하면 중첩된 그리드에서 상위 그리드에 정의된 트랙을 사용할 수 있습니다. 즉, 별도의 중첩된 그리드에 있는 요소를 서로 정렬할 수 있습니다.
CSS 서브그리드에는 서브그리드 사용 사례를 주로 다루는 여러 다른 게시물과 예시와 링크가 있습니다.
숫자 서식 V3
Intl.NumberFormat V3은 2023년에 Baseline에 포함된 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의 복합 n번째 하위 선택기
- 미디어 쿼리의 범위 구문
- 지도 가져오기
- CSS 표시를 위한 여러 값
- @카운터 스타일
counter-setCSS 속성linear()이징 함수- 원본 비공개 파일 시스템 (OPFS)
- CSS 중첩(느슨한 파싱을 추가하는 변경사항 포함)
- CSS
:dir()의사 클래스 선택기 - CSS
cap길이 단위 - CSS 마스킹
- HTML 동영상
<source>요소의 미디어 쿼리 지원 - HTML
<search>요소 <iframe>요소의 지연 로드 (12월 19일에 Firefox 121에 출시)lh및rlhCSS 행 높이 단위
이러한 기능 중 다수는 Interop 2023의 공동작업을 통해 상호 운용성이 되었습니다. 이러한 프로세스를 거쳐 어떻게 특성을 새롭게 사용할 수 있게 하고 베이스라인(Baseline)에 착륙시키는가를 보게 되어 흥미로워집니다. 이를 통해 자체 프로젝트에서 기능을 채택할 시점을 더욱 명확하게 결정할 수 있습니다.