8월의 웹 플랫폼 신규 출시

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

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

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

이렇게 하면 Chrome이 이미 이러한 속성을 지원하는 Firefox 및 Safari에 합류하게 됩니다.

브라우저 지원

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1

소스

새 미디어 쿼리 문법

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: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

소스

컨테이너 쿼리

Chrome 105는 웹 플랫폼에 컨테이너 쿼리라는 오래 기다려온 기능을 제공하는 흥미로운 버전입니다. 미디어 쿼리는 뷰포트 크기를 쿼리하는 방법을 제공하지만 컨테이너 쿼리는 컨테이너 크기를 쿼리하는 메서드를 제공합니다.

브라우저 지원

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110
  • Safari: 16

소스

컨테이너 쿼리를 사용하려면 container-type 속성을 사용하여 컨테이닝을 사용 설정합니다.

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

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

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

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

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

컨테이너 쿼리에 관한 자세한 내용은 @container 및 :has(): Chromium 105에 출시되는 두 가지 강력한 새로운 반응형 API 게시물을 참고하세요.

:has() 상위 가상 클래스

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

브라우저 지원

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4

소스

Sanitizer API

Chrome 105에는 Sanitizer API도 있습니다. 이 API는 크로스 사이트 스크립팅 취약점을 제거하는 데 도움이 되도록 플랫폼에 정리 기능을 빌드합니다.

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

브라우저 지원

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103
  • Safari: 15.6

소스

findLast() 및 findLastIndex() 메서드

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

브라우저 지원

  • Chrome: 97
  • Edge: 97.
  • Firefox: 104.
  • Safari: 15.4

소스

베타 브라우저 출시

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

출시일이 월말에 접어들기 때문에 8월의 유일한 새 베타는 현재 세부정보가 부족한 Firefox 105입니다.

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

웹 시리즈 초보자용의 일부