7월의 웹 플랫폼 신규 부문

2024년 7월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.

Rachel Andrew

안정적인 브라우저 버전

2024년 7월에 Firefox 128, Safari 17.6, Chrome 127이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

CSS 상대 색상 구문

Firefox 128에는 CSS 상대 색상 문법이 포함되어 있어 출처 색상에 비해 색상을 만들 수 있습니다. 다음 CSS는 hsl()를 사용하여 indigo 색상의 채도를 절반으로 낮춥니다.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

브라우저 지원

  • Chrome: 119
  • Edge: 119.
  • Firefox: 128.
  • Safari: 16.4.

CSS 상대 색상 구문 블로그 게시물에서 더 많은 예시를 확인할 수 있습니다. 상대적 색상 구문은 Interop 2024의 중점 영역 중 하나이므로 이 업데이트는 안정적인 Firefox의 점수를 개선하는 데 도움이 됩니다.

content 속성의 대체 텍스트

Firefox 128에서는 CSS content 속성에 이미지가 포함된 경우 대체 텍스트를 지원합니다. 대체 텍스트가 접근성 트리에 노출됩니다. 즉, 이제 모든 브라우저에서 content의 대체 텍스트를 지원합니다.

브라우저 지원

  • Chrome: 77
  • Edge: 79
  • Firefox: 128.
  • Safari 17.4.

Chrome 127의 업데이트를 통해 Chrome에서 단일 문자열이 아닌 임의의 수의 요소를 허용하여 attr() 함수 등을 사용할 수 있습니다.

font-size-adjust 속성

Chrome 127에는 Interop 2024의 중점 영역이기도 한 font-size-adjust가 포함되어 있습니다. 이 속성은 글꼴 대체가 발생할 수 있는 상황에 유용합니다. 대체 글꼴의 크기를 첫 번째 선택사항 글꼴과 일치시키는 데 도움이 되기 때문입니다.

브라우저 지원

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

소스

이 Chrome 출시에서는 font-size-adjust 속성이 새로 사용 가능한 기준점의 일부가 됩니다.

iframe에서 View Transition API 지원

Chrome 127부터 기본 프레임과 동일 출처 iframe에서 동시 동일 문서 뷰 전환을 사용할 수 있습니다.

이전에는 기본 프레임에서 동시에 전환을 실행하는 경우 동일 출처 iframe에서 document.startViewTransition을 사용하여 뷰 전환을 실행할 수 없었습니다. iframe의 전환이 자동으로 건너뜁니다. 이제 두 전환이 모두 실행됩니다.

키보드 포커스 가능 스크롤 컨테이너

Chrome 127부터 스크롤러는 기본적으로 클릭하여 포커스 가능하고 프로그래매틱 방식으로 포커스 가능합니다. 포커스 가능 하위 요소가 없는 스크롤러는 기본적으로 키보드 포커스 가능합니다.

키보드 포커스 전환 가능한 스크롤러 게시물에서 이 변경사항에 대해 자세히 알아보세요.

@property 규칙

Firefox 128에는 @property 규칙 및 관련 JavaScript API에 대한 지원이 포함되어 있습니다. 즉, 구문, 상속, 초깃값을 정의하는 CSS 커스텀 속성을 만들 수 있습니다.

브라우저 지원

  • Chrome: 85
  • Edge: 85.
  • Firefox: 128
  • Safari: 16.4.

소스

다음 예에서는 맞춤 속성이 <color> 값만 허용하고 상속되지 않으며 초기 값이 hotpink이 되도록 정의됩니다.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

이제 @property 규칙이 새로 사용 가능한 기준의 일부가 되었습니다. @property: 범용 브라우저가 지원되는 차세대 CSS 변수에서 자세히 알아보세요.

ArrayBuffer의 크기 조절 및 SharedArrayBuffer 확장 가능

크기 조절 가능한 ArrayBuffer 및 확장 가능한 SharedArrayBuffer가 이제 Firefox 128에서 지원되므로 새 버퍼를 할당하고 데이터를 복사하지 않고도 버퍼 크기를 변경할 수 있습니다. 이러한 속성은 기준 '신규로 제공됨'에도 추가됩니다.

브라우저 지원

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

소스

Flexbox 속성의 safe 키워드

Safari 17.6은 대부분 기존 기능의 수정사항이지만 Flexbox 정렬 속성에 대한 safe 키워드도 포함되어 있습니다. 이렇게 하면 safe 키워드가 브라우저 간에 상호 운용될 수 있습니다.

브라우저 지원

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63
  • Safari: 17.6

safe 키워드는 선택한 정렬로 인해 콘텐츠가 표시 가능 영역 외부에 표시되지 않도록 합니다. 다음 CodePen은 가운데 정렬된 항목에서 작동하는 방식을 보여줍니다. center 정렬로 인해 데이터 손실이 발생하면 start가 대신 사용됩니다.

베타 브라우저 출시

베타 브라우저 버전에서는 다음 안정화 버전의 브라우저에 포함될 내용을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능이나 삭제를 테스트해 보세요. 새로운 베타는 Firefox 129 및 Chrome 128입니다. Safari 18 베타는 아직 진행 중입니다. 이러한 릴리스는 플랫폼에 많은 훌륭한 기능을 제공합니다. 자세한 내용은 출시 노트를 참고하세요. 몇 가지 주요 사항은 다음과 같습니다.

Chrome 128에는 CSS ruby-align 속성과 함께 display: ruby가 있는 요소 내에서 줄바꿈을 가능하게 하는 변경사항이 포함되어 있습니다. zoom 속성도 사양에 맞게 업데이트되었습니다. AudioContext 생성 및 렌더링 오류를 보고하는 AudiContext.onerror에 할당된 콜백을 추가하는 AudioContext API 업데이트가 있습니다.

Firefox 129에는 @starting-style 규칙과 transition-behavior 속성이 포함되어 있습니다. 이러한 속성은 Firefox 129가 안정화 버전으로 출시되면 'Newly Available' 기준의 일부가 됩니다.