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를 지원합니다. 이러한 단위를 사용하면 요소의 줄 높이를 기준으로 값을 설정할 수 있습니다. 이 설정은 배경 이미지를 텍스트와 정렬하려는 경우에 유용합니다.
이 릴리스에서는 이러한 항목이 세 가지 주요 엔진 모두에서 상호 운용될 수 있도록 지원합니다.
브라우저 지원
- 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()이 모든 주요 엔진에서 상호 운용될 수 있습니다.
웹을 처음 접하는 시리즈의 일부