2026년 5월 웹 플랫폼의 새로운 기능

2026년 5월에 안정화 버전으로 출시된 Chrome 148

, Firefox 151

, Safari 26.5

를 살펴보고 이번 달에 추가된 많은 새로운 기능들을 알아보겠습니다.

Safari 26.5는 대부분 기존 기능의 수정 사항으로 구성되어 있습니다. 그러나

:open

의사 클래스

에 대한 지원도 포함하여 이 기능이 Baseline으로 새롭게 사용할 수 있게 되었습니다.

:open

의사 클래스를 사용하면 "열림" 및 "닫힘" 상태를 가진 요소들을 해당 상태가 열렸을 때 스타일링할 수 있습니다. 이는

<details>

및

<dialog>

요소가 열렸을 때뿐만 아니라,

<select>

및

<input>

요소 (색상 또는 날짜 선택기와 같은)의 선택기 인터페이스가 표시될 때에도 적용됩니다. 이는

details[open]

과 같은 속성을 사용하여 스타일링하는 것보다 더 깔끔하고 의미론적인 대안을 제공합니다.

이번 달 Chrome 148이 출시됨에 따라, 이름만으로 컨테이너 쿼리

가 Baseline으로 새롭게 사용할 수 있게 되었습니다.

이전에는 컨테이너 쿼리를 작성할 때 컨테이너 이름과 함께 크기 또는 스타일 쿼리 조건을 지정하고

container-type

속성으로 컨테이너의 유형을 설정해야 했습니다. 이제는 추가 조건 없이 이름만으로 명명된 컨테이너의 존재 여부를 쿼리할 수 있습니다. 또한, 이름으로만 쿼리하는 경우 조상 요소에

container-type

을 설정할 필요가 없습니다.

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Firefox 151은

@container

에서

style()

쿼리에 대한 지원을 도입하여, 사용자 정의 속성에 대한 컨테이너 스타일 쿼리가 Baseline으로 새롭게 사용할 수 있게 되었습니다.

컨테이너 스타일 쿼리를 사용하면 부모 컨테이너의 CSS 속성을 기반으로 요소에 스타일을 적용할 수 있습니다. 크기 쿼리는 매우 강력하지만, 스타일 쿼리를 사용하면 크기가 아닌 특징을 쿼리할 수 있습니다. 특히 이번 릴리스는 사용자 정의 속성을 쿼리하는 데 대한 완전한 크로스 브라우저 지원을 제공합니다. 예를 들어, 부모 컨테이너에 사용자 정의 속성

--theme

이

dark

로 설정되어 있는지 확인할 수 있습니다.

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Chrome 148은

loading="lazy"

속성을 사용하여

<video>

및

<audio>

요소에 대한 네이티브 지연 로딩

을 도입했습니다.

<img>

및

<iframe>

요소와 마찬가지로, 이제 브라우저가 뷰포트에 가까워질 때까지 미디어 리소스 로딩을 지연하도록 지시할 수 있습니다. 이는 페이지 로드 성능을 개선하고, 대역폭을 절약하며, 사용자 데이터 사용량을 줄이는 데 도움이 됩니다. 이 기능을 구현한 팀의 자세한 내용은 How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today

에서 확인할 수 있습니다.

Firefox 151은 데스크톱 플랫폼에서 Document Picture-in-Picture API에 대한 지원을 도입했습니다.

항상 위에 표시되는 창에서

<video>

요소를 볼 수 있는 표준 Picture-in-Picture API와 달리, Document Picture-in-Picture API를 사용하면 임의의 HTML 콘텐츠를 포함하는 항상 위에 표시되는 창을 열 수 있습니다. 이를 통해 비디오 컨퍼런스 참가자 그리드, 대화형 주식 시세표 또는 페이지를 벗어나도 유지되는 타이머와 같은 풍부한 대화형 오버레이를 구현할 수 있습니다.

Firefox 151은 데스크톱 플랫폼에 대한 Web Serial API

지원을 추가했으며, Chrome 148은 Android에 대한 지원을 추가했습니다.

Web Serial API는 웹사이트가 마이크로컨트롤러, 3D 프린터, 개발 보드 및 주변 하드웨어와 같은 직렬 장치에서 읽고 쓸 수 있는 방법을 제공합니다. Firefox에서는 Web Serial API를 사용하려면 사용자가 합성적으로 생성된 사이트 권한 추가 기능을 설치해야 하며, 이를 통해 액세스 관리를 위한 안전하고 통제된 메커니즘을 보장합니다.

베타 브라우저 버전은 브라우저의 다음 안정화 버전 기능을 미리 볼 수 있게 해줍니다. 전 세계에 릴리스되기 전에 사이트에 영향을 줄 수 있는 새로운 기능이나 제거된 기능을 테스트하기에 좋은 시기입니다. 이번 달의 새로운 베타 버전은 Chrome 149

와 Firefox 152

입니다. 이번 달에는 Safari 베타 버전이 없습니다.

Chrome 149 베타 버전에는 flex 및 grid 항목 간의 공백(간격)을 스타일링할 수 있는 CSS gap decorations와 같은 흥미로운 CSS 업데이트가 포함되어 있습니다. 또한

shape-outside

속성에서

path()

및

shape()

와

rect()

및

xywh()

기본 모양 함수를 지원하며,

path-length

를 CSS 속성으로 지원합니다. API 측면에서는

scrollTo()

,

scrollBy()

,

scrollIntoView()

와 같은 프로그래밍 방식 스크롤 메서드가 부드러운 스크롤이 완료될 때 해결되는 Promise를 반환하며, 활성 WebSocket 연결이 있는 페이지는 이제 백/포워드 캐싱(BFCache) 자격을 얻을 수 있습니다.

Firefox 152 베타 버전은

field-sizing

속성에 대한 완전한 지원을 도입하여 폼 컨트롤이 내용에 맞게 크기를 자동으로 조정할 수 있도록 합니다. 또한

Notification

인터페이스에

actions

및

maxActions

속성을 추가하고,

Element.getAnimations()

에서

options.pseudoElement

를 지원합니다.