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 (고화질) 디스플레이를 지원할 수 있습니다.
새로운 색상 모델
이제 Baseline에서 색상 함수 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는 이름에서 알 수 있듯이 화면 밖으로 이동하여 DOM과 Canvas API를 분리합니다.
이러한 분리 덕분에 OffscreenCanvas 렌더링은 DOM에서 완전히 분리되며, 따라서 두 캔버스 간에 동기화가 이루어지지 않으므로 일반 캔버스에 비해 속도가 약간 향상됩니다. 그 외에도 사용 가능한 DOM이 없더라도 렌더링 작업을 Web Worker로 이동하여 기본 스레드를 해제하고 애플리케이션의 응답성을 높이는 데 사용할 수 있습니다.
OffscreenCanvas—웹 워커로 캔버스 작업 속도 향상에 관해 자세히 알아보세요.
모듈 미리 로드
모듈을 미리 로드하면 다운로드 및 처리 시간을 줄일 수 있습니다. JavaScript 모듈을 참조하는 링크 요소에 rel="modulepreload"를 추가하면 브라우저가 모듈을 가져와 파싱 및 컴파일한 후 실행할 준비가 된 모듈 맵에 결과를 저장합니다.
모듈 미리 로드 문서에서 자세히 알아보세요.
CSS의 삼각 함수
2023년에는 CSS 값 및 단위 레벨 4 사양의 삼각 함수가 상호 운용이 가능하게 되었습니다. 즉, sin(), cos(), tan(), asin(), acos(), atan(), atan2() 함수가 Baseline 2023의 일부입니다.
이러한 함수를 사용하는 방법을 알아보고 CSS의 삼각 함수에서 몇 가지 사용 사례를 살펴보세요.
inert 속성
Inert는 이동 기능이 없다는 것을 의미하므로 어떤 것을 비활성으로 표시하면 이러한 DOM 요소에서 이동이나 상호작용을 삭제합니다. 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에 추가된 추가 기능
이 게시물에서는 올해 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의 공동작업을 통해 상호 운용성이 되었습니다. 이러한 프로세스를 거쳐 기능을 새로 출시하고 베이스라인에 출시하게 되어 더 많은 사용자가 사용할 수 있게 되는 시점이 다가오고 있습니다. 이를 통해 자체 프로젝트에서 기능을 채택할 시점을 더욱 명확하게 결정할 수 있습니다.