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 베타도 아직 진행 중입니다.

웹 시리즈 초보자용의 일부