2023년 12월에 안정화 및 베타 웹브라우저에서 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2023년 12월, Firefox 121, Chrome 120, Safari 17.2가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 이것이 무엇을 의미하는지 살펴봅니다.
CSS 중첩을 위한 완화된 파싱
Chrome 120 및 Safari 17.2에는 CSS 중첩을 위한 완화된 파싱이 포함되어 있습니다. 이 기능은 Firefox 버전 117부터 지원되었으므로 모든 주요 엔진에서 이 구문 변경을 지원합니다.
<details> 요소가 있는 배타적인 아코디언
Chrome 120 및 Safari 17.2는 <details> 요소의 name 속성을 지원합니다. 즉, 여러 <details> 요소를 그룹화하여 배타적인 아코디언 구성요소를 만들 수 있습니다.
독점 아코디언에서 자세히 알아보세요.
브라우저 지원
- 120
- 120
- x
- 17.2
:has() 선택기
Firefox 121에는 CSS :has() 선택기가 포함되어 있습니다. 이 버전을 사용하면 :has()가 모든 주요 엔진에서 상호 운용이 가능합니다.
:has(): 가족 선택기에서 자세히 알아보세요.
CSS 맞춤 하이라이트 API
Safari 17.2에는 텍스트 범위를 만들고 스타일을 지정하여 ::selection와 같은 표준 강조표시 의사 클래스를 확장할 수 있는 CSS Custom Highlight API가 포함되어 있습니다.
CloseWatcher API
Chrome 120에는 닫기 요청을 수신하고 응답하는 새 API인 CloseWatcher API가 포함되어 있습니다.
이러한 요청은 데스크톱의 경우 ESC 키에 의해 트리거되고 Android에서는 뒤로 동작 또는 버튼으로 트리거되며, 제대로 구현하기가 까다로울 수 있습니다.
API 외에도 Chrome 120은 Android 뒤로 버튼에 응답하도록 <dialog> 및 popover 속성을 업그레이드합니다.
브라우저 지원
- 120
- 120
- x
- x
CSS text-wrap: balance 및 stable
Firefox 121에는 text-wrap의 balance 및 stable 값이 포함되어 있습니다.
balance 값은 제목과 같은 짧은 콘텐츠 블록에 유용하며 더 보기 좋고 읽기 쉬운 텍스트를 만들 수 있습니다. stable 값은 수정 중에 수정 가능한 콘텐츠가 다시 표시되지 않도록 합니다.
text-wrap: balance를 자세히 알아보세요.
<iframe> 요소의 지연 로드
Firefox 121은 <iframe> 요소에서 loading 속성을 지원합니다.
즉, 이제 iframe의 지연 로드가 모든 주요 엔진에서 지원됩니다.
브라우저 지원
- 77
- 79
- 121
- 16.4
linear() 이징 함수 지원
Safari 17.2에는 바운스 및 스프링 효과를 만드는 데 사용할 수 있는 linear() 이징 함수도 지원됩니다.
브라우저 지원
- 113
- 113
- 112
- 17.2
베타 브라우저 출시
베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 Firefox 122, Chrome 121, Safari 17.3입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Firefox 122 및 Chrome 121에는 HTMLSelectElement에 관한 showPicker() 메서드가 포함되어 있습니다.
이는 요소가 선택될 때 표시되는 것과 동일한 선택 도구를 보여주지만 버튼 누르기나 다른 사용자 상호작용으로 트리거될 수 있습니다.
Chrome 121에는 스크롤바 스타일 지정 속성 scrollbar-color 및 scrollbar-width가 포함되고 SVG의 CSS 마스킹이 개선되었으며 맞춤법이 잘못되었거나 문법적으로 잘못된 텍스트의 의사 요소가 강조 표시됩니다.