2024년 7월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.
안정적인 브라우저 출시
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);
}
Browser Support
CSS 상대 색상 구문 블로그 게시물에서 더 많은 예시를 확인할 수 있습니다. 상대 색상 문법은 Interop 2024의 주요 영역 중 하나이므로 이 업데이트는 안정적인 Firefox의 점수를 개선하는 데 도움이 됩니다.
content
속성의 대체 텍스트
Firefox 128에서는 CSS content
속성에 이미지가 포함된 경우 대체 텍스트를 지원합니다. 대체 텍스트는 접근성 트리에 노출됩니다.
즉, 이제 모든 브라우저에서 content
의 대체 텍스트를 지원합니다.
Browser Support
Chrome 127의 업데이트를 통해 Chrome은 단일 문자열이 아닌 임의 개수의 요소를 허용하므로 예를 들어 attr()
함수를 사용할 수 있습니다.
font-size-adjust
속성
Chrome 127에는 Interop 2024의 중점 영역이기도 한 font-size-adjust
가 포함되어 있습니다.
이 속성은 글꼴 대체가 발생할 수 있는 상황에 유용합니다. 대체 글꼴의 크기를 첫 번째 선택사항 글꼴과 일치시키는 데 도움이 되기 때문입니다.
이 Chrome 출시에서는 font-size-adjust
속성이 새로 사용 가능한 기준점의 일부가 됩니다.
iframe에서 View Transition API 지원
Chrome 127부터 기본 프레임과 동일 출처 iframe에서 동시 동일 문서 뷰 전환을 사용할 수 있습니다.
이전에는 동일한 출처의 iframe에서 document.startViewTransition을 사용하여 뷰 전환을 실행하면 기본 프레임에서 동시에 전환을 실행 중인 경우 작동하지 않았습니다. iframe의 전환이 자동으로 건너뜁니다. 이제 두 전환이 모두 실행됩니다.
키보드 포커스 가능 스크롤 컨테이너
Chrome 127부터 스크롤러는 기본적으로 클릭하여 포커스 가능하고 프로그래매틱 방식으로 포커스 가능합니다. 포커스 가능 하위 요소가 없는 스크롤러는 기본적으로 키보드 포커스 가능합니다.
키보드 포커스 전환 가능한 스크롤러 게시물에서 이 변경사항에 대해 자세히 알아보세요.
@property
규칙
Firefox 128에는 @property
규칙 및 관련 JavaScript API에 대한 지원이 포함되어 있습니다. 즉, 문법, 상속, 초깃값을 정의하는 CSS 맞춤 속성을 만들 수 있습니다.
다음 예에서는 맞춤 속성이 <color>
값만 허용하고 상속되지 않으며 초기 값이 hotpink
이 되도록 정의됩니다.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
규칙은 이제 새로 제공되는 기준의 일부입니다. 자세한 내용은 @property: 이제 범용 브라우저에서 지원되는 차세대 CSS 변수를 참고하세요.
크기 조절 가능한 ArrayBuffer
및 확장 가능한 SharedArrayBuffer
이제 Firefox 128에서 크기 조절 가능한 ArrayBuffer 및 확장 가능한 SharedArrayBuffer가 지원되므로 새 버퍼를 할당하고 데이터를 복사하지 않고도 버퍼 크기를 변경할 수 있습니다. 이러한 속성은 기준 '신규로 제공됨'에도 추가됩니다.
Flexbox 속성의 safe
키워드
Safari 17.6은 대부분 기존 기능의 수정사항이 포함된 버전이지만 flexbox 정렬 속성에 관한 safe
키워드도 포함되어 있습니다.
이렇게 하면 safe
키워드가 브라우저 간에 상호 운용될 수 있습니다.
Browser Support
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가 안정화 버전으로 출시되면 '새로 사용 가능한 기준점'의 일부가 됩니다.