1월 웹 플랫폼 신규 출시

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

Rachel Andrew

안정적인 브라우저 출시

1월에 Chrome 97 및 Firefox 96이 안정화되었습니다.

Firefox 96에서는 색상 함수 hwb()을 출시했습니다. 이 함수는 색조, 흰색, 검은색으로 색상을 표현합니다.

브라우저 지원

  • Chrome: 기초
  • Edge: 101.
  • Firefox: 96.
  • Safari: 15

소스

Firefox 96에는 CSS color-scheme 속성도 있습니다. 이 속성을 사용하면 요소를 렌더링할 수 있는 색 구성표를 나타낼 수 있습니다. 예를 들어 .widget가 운영체제의 밝은 모드 또는 어두운 모드로 렌더링될 수 있음을 나타내려면 다음 CSS를 사용합니다.

.widget {
  color-scheme: light dark;
}

color-scheme가 Firefox에 출시됨에 따라 이 속성은 Chrome, Firefox, Safari에서 사용할 수 있습니다.

브라우저 지원

  • Chrome: 81
  • Edge: 81.
  • Firefox: 96
  • Safari: 13

소스

베타 브라우저 출시

베타 브라우저 버전은 브라우저의 다음 안정화 버전에 적용될 내용을 미리 보여줍니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트하기에 좋은 시기입니다.

1월의 베타는 Chrome 98, Firefox 97, Safari 15.4 베타 1이었습니다.

Chrome 98에서는 COLRv1 색상 그라데이션 벡터 글꼴을 새로운 글꼴 형식으로 추가로 지원합니다. 컬러 글꼴에는 여러 색상의 글리프가 포함되어 있습니다. 예를 들어 그림 이모티콘, 국가 국기, 여러 색상의 문자 등이 있습니다.

이 새로운 글꼴 형식에 관한 자세한 내용은 Chrome 98의 COLRv1 색상 그라데이션 벡터 글꼴을 참고하세요.

또한 객체의 심층 사본을 만드는 structuredClone() 메서드와 CSS 미디어 쿼리 dynamic-range 및 video-dynamic-range도 포함되어 있습니다. Chrome 98 베타 게시물에서 테스트할 수 있는 더 많은 기능을 확인하세요.

Chrome 98 DevTools에는 새로운 전체 접근성 트리를 비롯한 다양한 새로운 기능이 포함되어 있습니다.

Firefox 97 베타는 length의 cap 및 ic 단위를 지원하고 scrollbar-gutter 속성도 구현합니다.

Safari 15.4 베타에는 다양한 기능이 포함되어 있습니다. 기능에는 ::backdrop 의사 요소, :focus-visible 의사 클래스, accent-color 속성, contain 속성을 사용한 CSS 컨테이닝 구현이 포함됩니다. 이 베타에는 HTML <dialog> 요소, 지연 로드를 사용 설정하는 이미지의 lazy 속성, 웹 앱 매니페스트 아이콘 지원도 포함되어 있습니다.

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

웹 시리즈 초보자의 일부