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

8월의 웹 플랫폼 신규 출시

2022년 8월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.

Rachel Andrew

안정적인 브라우저 버전

8월에 Firefox 104, Chrome 104, Chrome 105가 안정화되었습니다.

Chrome 104에는 CSS 변환을 위한 개별 속성이 포함되어 있습니다. 속성은 scale, rotate, translate이며, 이를 사용하여 변환의 이러한 부분을 개별적으로 정의할 수 있습니다.

이를 통해 Chrome은 이미 이들 속성을 지원하는 Firefox 및 Safari와 통합됩니다.

브라우저 지원

Chrome 104에는 미디어 쿼리 범위 구문도 포함되어 있습니다. 이 기능은 Firefox에서 이미 제공하며 미디어 쿼리를 간소화하는 데 도움이 됩니다. 다음은 미디어 쿼리를 예로 들어보겠습니다.

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

비교 연산자를 사용하여 작성할 수 있습니다.

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

브라우저 지원

Chrome 105는 오랫동안 기다려 온 컨테이너 쿼리 기능을 웹 플랫폼에 도입하는 흥미로운 릴리스입니다. 미디어 쿼리는 표시 영역의 크기에 대해 쿼리할 수 있는 방법을 제공하는 반면, 컨테이너 쿼리는 컨테이너 크기를 기준으로 쿼리하는 방법을 제공합니다.

브라우저 지원

컨테이너 쿼리를 사용하려면 container-type 속성을 사용하여 격리를 사용 설정하세요.

.card-container {
  container-type: inline-size;
}

container-type를 inline-size로 설정하면 상위 요소의 인라인 방향 크기를 쿼리합니다. 영어와 같은 라틴 언어에서는 텍스트가 왼쪽에서 오른쪽으로 인라인으로 흐르므로 카드의 너비가 여기에 해당합니다.

이제 이 컨테이너를 사용하여 @container로 하위 요소에 스타일을 적용할 수 있습니다.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

위에 언급된 게시물에서는 :has()도 언급됩니다. 새로운 유사 클래스 CSS :has() 의사 클래스를 사용하면 조건에 따라 상위 요소와 동위 요소를 타겟팅할 수 있습니다. :has() 계열 선택기에서 자세히 알아보세요.

브라우저 지원

또한 Chrome 105에는 Sanitizer API가 있습니다. 이 API는 교차 사이트 스크립팅 취약점을 제거하기 위해 플랫폼에 정리 기능을 구축합니다.

브라우저 지원

또한 Chrome 105에는 :modal CSS 의사 클래스가 있습니다. 이는 외부 요소와의 상호작용을 모두 배제하는 상태에 있는 요소와 일치합니다. 예를 들어 <dialog>가 showModal() API로 열렸습니다.

브라우저 지원

Firefox 104는 Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast(), TypedArray.prototype.findLastIndex() 메서드에 대한 플래그 지원을 추가합니다. 이러한 메서드는 제공된 배열 또는 TypedArray 테스트 함수에서 마지막 요소의 값과 색인을 찾는 데 사용됩니다.

브라우저 지원

베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다.

8월 출시일이 얼마 남지 않아 8월의 유일한 새로운 베타 버전은 Firefox 105로 현재 세부 정보가 부족한 상태입니다.

6월에 언급된 Safari 16 베타도 아직 진행 중입니다.