2022년 2월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2월에 Chrome 98 및 Firefox 97이 안정화되었습니다.
Chrome 98에서는 self.structuredClone 메서드가 도입되었습니다. 구조화된 클론 알고리즘을 사용하여 값의 딥 클론을 만듭니다. structuredClone()에 관해 자세히 알아보세요.
Firefox 97에는 캐스케이드 레이어가 포함되어 있습니다. @layer at-rule은 캐스케이드 레이어를 정의하여 특정성을 제어하는 데 도움을 줍니다.
@layer framework {
/* creates a new layer named framework */
}
Firefox는 이 기능을 출시한 첫 번째 브라우저입니다. 하지만 곧 이 기능이 모든 곳에서 사용 가능해질 때까지 조만간 베타 출시 버전에 관한 게시물의 섹션을 확인하시기 바랍니다. 캐스케이드 레이어에 대한 자세한 내용은 브라우저에 도입되는 캐스케이드 레이어를 참고하세요.
또한 Firefox는 scrollbar-gutter 속성을 호출합니다. 이 속성은 콘텐츠가 커질 때 스크롤바가 표시되어 발생하는 레이아웃 변경을 제거하는 데 도움이 됩니다.
스크롤바 여백은 안쪽 테두리 가장자리와 바깥쪽 패딩 가장자리 사이의 공간입니다. 필요한 경우 여기에 스크롤바가 표시됩니다. 스크롤바가 없으면 여백이 패딩의 확장으로 표시됩니다. 다음 CSS는 스크롤바 크기를 고려하여 상자의 양쪽에 간격을 추가하여 모양을 대칭되게 유지합니다.
.container {
scrollbar-gutter: stable both-edges;
}
Chrome 98은 추가적인 새로운 글꼴 형식으로 COLRv1 색상 그라데이션 벡터 글꼴을 지원합니다. 색상 글꼴에는 그림 이모티콘, 국기, 여러 색상의 글자 등 여러 색상이 있는 글리프가 포함됩니다.
Chrome 98의 COLRv1 색상 그라데이션 벡터 글꼴에서 새로운 글꼴 형식에 관해 자세히 알아보세요.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다.
2월에 도입된 새로운 베타는 Chrome 99 및 Firefox 98이었습니다. Safari 베타 15.4는 아직 진행 중이며 앞서 지난달에 포함된 내용 중 일부를 다루었습니다.
Chrome 99에는 캐스케이드 레이어가 포함되어 있으며 Safari 베타 15.4에도 캐스케이드 레이어가 포함되어 있으며 조만간 모든 상시 브라우저에서 이 기능을 사용할 수 있을 것으로 예상됩니다.
또한 Chrome 99에는 CanvasRenderingContext2D에 관한 몇 가지 새로운 속성 및 날짜, 시간, 색상, 파일의 브라우저 선택 도구를 표시하는 HTMLInputElement의 새로운 showPicker() 메서드가 추가되었습니다.
Firefox 98에는 <dialog> 요소가 있습니다. Firefox 및 Safari 베타 버전이 안정화되면 모든 에버그린 브라우저에서 지원될 또 다른 기능입니다.
이 모든 베타 기능은 곧 안정화된 브라우저에서 제공될 예정입니다.