이 페이지는 Cloud Translation API를 통해 번역되었습니다.

2월에 웹 플랫폼을 새로 도입

2022년 2월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.

Rachel Andrew

안정적인 브라우저 출시

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 베타가 안정화되면 모든 상시 브라우저에 제공될 또 다른 기능입니다.

이러한 모든 베타 기능은 곧 안정화 버전 브라우저에 제공될 예정입니다.

웹 시리즈 초보자의 일부