안정화 및 베타 버전으로 공개된 몇 가지 흥미로운 기능을 살펴보세요. 웹브라우저에서
안정적인 브라우저 버전
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);
}
브라우저 지원
- 119
- 119
- 128
- 16.4
블로그 게시물에서 더 많은 예시를 확인할 수 있습니다. CSS 상대 색상 문법 상대적 색상 구문은 Interop 2024의 중점 영역 중 하나입니다. 이번 업데이트는 안정적인 Firefox의 점수를 높이는 데 도움이 됩니다.
content 속성의 대체 텍스트
Firefox 128은 CSS content 속성의 대체 텍스트를 지원합니다.
자동으로 생성됩니다. 대체 텍스트가 접근성 트리에 노출됩니다.
즉, 이제 content의 모든 브라우저에서 대체 텍스트가 지원됩니다.
브라우저 지원
- 77
- 79
- 128
- 17.4
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 규칙이 Baseline Newly Available의 일부입니다. 다음에서 자세히 알아보세요.
@property: 범용 브라우저가 지원되는 차세대 CSS 변수
ArrayBuffer의 크기 조절 및 SharedArrayBuffer 확장 가능
크기 조절 가능 ArrayBuffer 성장할 수 있는 SharedArrayBuffer 는 이제 Firefox 128에서 지원됩니다. 크기를 할당하지 않고도 버퍼 크기를 변경할 수 있기 때문에 새 버퍼를 생성하고 데이터를 복사하기 때문입니다. 또한 이러한 속성은 'Newly Available' 기준과도 조인됩니다.
Flexbox 속성의 safe 키워드
Safari 17.6은 대부분 기존 기능에 대한 수정사항의 출시입니다.
Flexbox 정렬 속성을 위한 safe 키워드도 포함되어 있습니다.
이렇게 하면 safe 키워드가 여러 브라우저에서 상호 운용될 수 있습니다.
브라우저 지원
- 115
- 115
- 63
- 18
safe 키워드
선택한 정렬은 콘텐츠가
볼 수 있습니다. 다음 CodePen은 이 레이어가
가운데 정렬한 항목이 있습니다. center 정렬로 인해 데이터가 손실되는 경우
대신 start가 사용됩니다.
베타 브라우저 출시
베타 브라우저 버전을 통해 다운로드할 수 있습니다. 지금은 새로운 기능을 테스트하거나 앱이 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있습니다. 새 상품 베타는 Firefox 129 및 Chrome 128 이 Safari 18 베타를 아직 진행 중입니다. 이러한 릴리스는 플랫폼에 많은 훌륭한 기능을 제공합니다. 출시 확인하기 메모를 남겨두세요. 몇 가지 주요 사항은 다음과 같습니다.
Chrome 128에는 CSS ruby-align 속성과 함께
display: ruby가 있는 요소 내에서 줄바꿈을 사용할 수 있게 하려면
zoom 속성도 사양과 일치하도록 업데이트되었습니다. 이
다음에 할당된 콜백을 추가하는 AudioContext API 업데이트
AudiContext.onerror: AudioContext 생성 및 렌더링 오류를 보고합니다.
Firefox 129에는 @starting-style 규칙 및 transition-behavior가 포함되어 있습니다.
속성 이러한 속성은 한 번 새로 사용 가능한 기준의 일부가 됩니다.
Firefox 129가 안정화 버전으로 출시되었습니다.