기준: 2023년

Rachel Andrew

caniuse.com에 기준이 적용됩니다. 이 게시물에서는 Google Cloud의 통합 기능에 대해 알아보고 2023년 기준.

기준의 새 정의에는 특성 수명 주기의 두 단계, 즉 기능을 새로 사용 가능하게 되는 시점과 30개월 후 널리 사용 가능해지는 경우 하나의 특성이 되는 다음에서 상호 운용될 수 있게 되면 새로 제공되는 기준의 브라우저:

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

기준이 사용할 수 있나요?

기능 사용 가능 여부를 명확히 하는 다음 단계로, Baseline은 확인할 수 있습니다. Can I Use의 일부 페이지를 방문하면 해당 기능이 기준 버전에 널리 사용 가능한지 여부를 알려주는 배지

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

기준에서 새로 사용할 수 있는 기능에도 배지와 함께 몇 년도 되지 않습니다 사이트 전반에 걸쳐 상호 운용이 가능해진 모든 것 올해 설정된 핵심 브라우저는 기준 2023의 일부입니다.

컨테이너 쿼리에 새로 제공되는 배지가 있는 Can I Use의 스크린샷

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

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

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

브라우저 지원

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

소스

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

새로운 색상 공간 및 함수

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

새 색상 모델

이제 기준에서 색상 함수 lch(), lab(), oklch(), oklab()는 LCH, Lab, OKLCH 및 OKLab 색상 모델에 대한 액세스 권한을 부여합니다.

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

소스

<ph type="x-smartling-placeholder">
</ph> 분홍색에서 파란색으로 생생한 그라데이션이 적용된 그라데이션 스타일 편집기 스크린샷
gradient.style을 사용하는 새로운 색상 공간을 사용해 보세요.

color-mix() 함수

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

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

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

소스

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

color() 함수

color() 함수는 R, G, B로 색상을 지정하는 모든 색상 공간에 사용할 수 있습니다. 있습니다. color()는 먼저 색상 공간 매개변수를 가져온 후 채널 값을 설정할 수 있습니다. 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입니다. 앱 압축 라이브러리를 포함할 필요가 없습니다.

브라우저 지원

  • Chrome: 80. <ph type="x-smartling-placeholder">
  • Edge: 80. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari 16.4. <ph type="x-smartling-placeholder">

소스

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

오프스크린 캔버스

OffscreenCanvas 이전에는 캔버스 그리기 기능이 <canvas>에 연결되었습니다. 즉, DOM에 직접 의존했습니다. OffscreenCanvas 분리 Canvas API의 DOM을 생성할 수 있습니다.

이 분리 덕분에 OffscreenCanvas 렌더링은 구현하므로 일반 캔버스에 비해 속도가 어느 정도 향상됩니다. 왜냐하면 둘 사이에 동기화가 되지 않습니다. 또한 Cloud Build를 사용하여 비록 사용 가능한 DOM이 없더라도, 비록 웹 워커가 애플리케이션의 응답성을 높일 수 있습니다.

브라우저 지원

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 105 <ph type="x-smartling-placeholder">
  • Safari 16.4. <ph type="x-smartling-placeholder">

소스

OffscreenCanvas—웹 작업자로 캔버스 작업 속도를 높이세요.

모듈 미리 로드

모듈을 미리 로드하면 다운로드 및 처리 시간을 줄일 수 있습니다. 추가 rel="modulepreload" 드림 를 자바스크립트 모듈을 참조하는 링크 요소에 추가하면 브라우저가 이를 파싱 및 컴파일하여 모듈 맵에 미리 배치합니다. 정의할 수 있습니다

브라우저 지원

  • Chrome: 66 <ph type="x-smartling-placeholder">
  • 에지: ≤ 79. <ph type="x-smartling-placeholder">
  • Firefox: 115 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

소스

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

CSS의 삼각 함수

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

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 108 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

소스

<ph type="x-smartling-placeholder">
</ph>
이 데모에서는 삼각 함수를 사용하여 중심점을 중심으로 하는 원형 경로에서 항목을 이동합니다.

이러한 함수의 사용 방법을 알아보고 몇 가지 사용 사례를 CSS의 삼각 함수.

비활성 속성

DOM 요소를 inert로 표시하면 있습니다. inert 속성은 브라우저가 요소를 무시하도록 합니다.

  • 사용자가 요소를 클릭하면 click 이벤트가 실행되지 않습니다.
  • 이 요소에 초점이 맞춰지지 않습니다.
  • 요소와 콘텐츠가 접근성 트리에서 제외됩니다.

브라우저 지원

  • Chrome: 102 <ph type="x-smartling-placeholder">
  • Edge: 102. <ph type="x-smartling-placeholder">
  • Firefox: 112 <ph type="x-smartling-placeholder">
  • Safari 15.5. <ph type="x-smartling-placeholder">

소스

이 속성을 화면을 벗어나거나 숨겨져 있는 요소에 추가합니다. 자세한 내용은 자세한 내용은 비활성 속성을 참고하세요.

CSS 그리드 레이아웃의 서브그리드

grid-template-columns 및 grid-template-rows의 subgrid 값을 사용하면 중첩 그리드에서 상위 그리드에 정의된 트랙을 사용합니다. 즉, 중첩된 별도의 그리드에서 요소를 서로 정렬합니다.

브라우저 지원

  • Chrome: 117 <ph type="x-smartling-placeholder">
  • Edge: 117. <ph type="x-smartling-placeholder">
  • Firefox: 71 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

소스

CSS 하위 그리드에 다음과 같은 몇 가지 예와 링크가 있습니다. 하위 그리드 사용 사례를 강조하는 다른 많은 게시물과 예제를 참조하세요.

숫자 형식 V3

Intl.NumberFormat V3은 2023년 기준의 일부였습니다. 추가 기능은 다음과 같습니다.

  • 숫자 범위의 서식을 지정하는 세 가지 새로운 함수: formatRange, formatRangeToParts 및 selectRange
  • 그룹화 enum
  • 새로운 반올림 및 정밀도 옵션
  • 반올림 우선순위
  • 문자열을 소수로 해석
  • 반올림 모드
  • 신호 디스플레이 네거티브

브라우저 지원

  • Chrome: 106 <ph type="x-smartling-placeholder">
  • Edge: 106. <ph type="x-smartling-placeholder">
  • Firefox: 116 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

소스

NumberFormat V3 제안 새로운 기능에 대해 자세히 알아보세요.

Fullscreen API

Fullscreen API를 사용하면 <video>과 같은 요소를 전체 화면에 배치할 수 있습니다. requestFullscreen() 메서드 호출 또한 Cloud Build를 사용하여 요소가 전체 화면 모드에 있는지 여부 및 문서가 전체 화면 모드에 있는지 감지 전체 화면 모드를 요청할 수 있는 상태입니다.

브라우저 지원

  • Chrome: 71 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 64 <ph type="x-smartling-placeholder">
  • Safari 16.4. <ph type="x-smartling-placeholder">

소스

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

CSS :has() 선택기

Firefox에 제공될 :has() 선택기로 2023 기준을 만들면 됩니다. 12월 19일 121로 예약됩니다. 이 선택기는 다양한 용도 중에서도 상위 선택기: 상위 요소 안에 있는 항목을 기반으로 요소를 선택할 수 있음 있습니다. 예를 들어, CSS가 제대로 표시되는지 여부에 따라 이미지를 생성할 수 있습니다.

브라우저 지원

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 121 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

소스

:has(): 제품군 선택기에서 자세히 알아보세요.

올해 Baseline에 추가된 기능 더보기

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

이러한 기능의 대부분은 공동작업을 통해 상호 운용성을 실현했습니다. Interop 2023 다양한 기능들이 생성된 데이터를 새로 사용할 수 있게 되면 그러면 널리 보급될 때까지 타이머를 밟게 됩니다 이렇게 하면 보다 명확한 경로를 제공합니다.