2023년 11월에 안정적인 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2023년 11월에는 Firefox 120의 안정적인 브라우저 버전이 하나만 출시되었습니다. 이 게시물에서는 웹 플랫폼에 이것이 무엇을 의미하는지 살펴봅니다.
<source> 요소에서 media 속성 지원
Firefox에서 <source> 요소에서 media 속성 지원을 다시 도입합니다. <audio> 및 <video> 요소를 포함하도록 지원이 확장됩니다. 이번 출시에서는 <audio>, <video>, <picture> 내의 <source> 요소에서 미디어 속성을 사용할 수 있습니다.
media 속성에 대한 지원이 Chrome에 추가되고 이미 Safari에서도 지원되고 있으므로 곧 모든 엔진에서 반응형 HTML 동영상 및 오디오 지원이 제공될 예정입니다.
CSS 색상 light-dark() 함수
이제 Firefox에서 light-dark() CSS 색상 함수를 지원합니다. 즉, prefers-color-scheme 미디어 기능을 사용하지 않고도 밝은 구성표와 어두운 구성표의 색상을 설정할 수 있습니다.
lh 및 rlh 단위
Firefox는 CSS 단위 lh 및 rlh를 지원합니다. 이러한 단위를 사용하면 요소의 행 높이를 기준으로 값을 설정할 수 있습니다. 이는 배경 이미지를 텍스트와 정렬하고자 할 때 유용합니다.
이 출시에서는 세 가지 주요 엔진 모두에서 이러한 ununt를 상호 운용할 수 있습니다.
브라우저 지원
- 109
- 109
- 120
- 16.4
HTTP 103 조기 힌트
이제 Firefox에서 103 Early Hints HTTP 정보 응답 상태 코드를 지원합니다.
베타 브라우저 출시
베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 Firefox 121, Chrome 120, Safari 17.2입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Chrome 120 및 Safari 17.2에는 CSS 중첩을 위한 완화된 파싱이 포함되어 있습니다.
Chrome 120에서는 -webkit-mask* 속성의 접두사를 해제하고 현재 사양에 맞게 변경합니다. 여기에는 mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite와 mask 약식이 포함됩니다. 로컬 mask-image 참조가 지원되고, 이제 직렬화가 사양과 일치하며, 허용되는 값은 이제 사양과 일치합니다.
Chrome 120 및 Safari 17.2는 <details> 요소의 name 속성을 지원합니다.
Firefox 121에는 CSS :has() 선택기가 포함되어 있습니다. 이 버전을 사용하면 :has()가 모든 주요 엔진에서 상호 운용이 가능합니다.