이 페이지는 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 의사 클래스가 있습니다. 외부 요소와의 모든 상호작용이 제외되는 상태의 요소와 일치합니다. showModal() API로 열린 <dialog>를 예로 들 수 있습니다.

브라우저 지원

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

브라우저 지원

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

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

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