5월 웹 플랫폼 신규 부문

2026년 5월에 안정화 버전 및 베타 웹브라우저에 도입된 흥미로운 기능을 알아보세요.

Rachel Andrew

게시일: 2026년 5월 29일

안정화 브라우저 출시

Chrome 148, Firefox 151, Safari 26.5가 5월에 안정 버전으로 출시되었습니다. 이번 게시물에서는 이번 달의 다양한 새로운 기능을 살펴봅니다.

:open CSS 가상 클래스가 기준선이 됨

Safari 26.5는 주로 기존 기능에 대한 수정사항이 포함된 버전입니다. 하지만 :open 가상 클래스에 대한 지원도 포함되어 있어 이 기능은 Baseline Newly available입니다.

:open 의사 클래스를 사용하면 열려 있을 때 '열림' 및 '닫힘' 상태가 있는 요소의 스타일을 지정할 수 있습니다. 이는 <details> 및 <dialog> 요소가 열려 있을 때뿐만 아니라 선택기 인터페이스가 표시될 때 <select> 및 <input> 요소 (예: 색상 또는 날짜 선택기)에도 적용됩니다. 이를 통해 details[open]과 같은 속성을 사용하여 스타일을 지정하는 대신 더 깔끔하고 의미론적인 대안을 제공할 수 있습니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 136.
  • Safari: 26.5.

Source

CSS 이름 전용 컨테이너 쿼리가 기준선이 됨

이번 달에 출시되는 Chrome 148부터 이름 전용 컨테이너 쿼리가 이제 Baseline Newly available로 제공됩니다.

이전에는 컨테이너 쿼리를 작성할 때 컨테이너 이름과 함께 크기 또는 스타일 쿼리 조건을 지정하고 container-type 속성으로 컨테이너의 유형을 설정해야 했습니다. 이제 추가 조건 없이 이름으로만 명명된 컨테이너의 존재를 쿼리할 수 있습니다. 또한 이름으로만 쿼리하는 경우 상위 요소에 container-type을 설정하지 않아도 됩니다.

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

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

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 149.
  • Safari: 26.4.

맞춤 속성의 컨테이너 스타일 쿼리가 기준이 됨

Firefox 151에서는 @container에서 style() 쿼리를 지원하여 맞춤 속성의 컨테이너 스타일 쿼리를 새로 사용할 수 있는 기준선으로 만듭니다.

컨테이너 스타일 쿼리를 사용하면 상위 컨테이너의 CSS 속성에 따라 요소에 스타일을 적용할 수 있습니다. 크기 쿼리는 매우 강력하지만 스타일 쿼리를 사용하면 크기가 아닌 기능을 쿼리할 수 있습니다. 특히 이번 출시에서는 맞춤 속성 쿼리에 대한 완전한 교차 브라우저 지원이 제공됩니다. 예를 들어 맞춤 속성 --theme이 상위 컨테이너에서 dark로 설정되어 있는지 확인할 수 있습니다.

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

동영상 및 오디오 요소의 지연 로드

Chrome 148에서는 loading="lazy" 속성이 있는 <video> 및 <audio> 요소에 대한 기본 지연 로딩이 도입됩니다.

<img> 및 <iframe> 요소와 마찬가지로 이제 미디어 리소스가 표시 영역에 가까워질 때까지 로드를 지연하도록 브라우저에 지시할 수 있습니다. 이렇게 하면 페이지 로드 성능을 개선하고, 대역폭을 절약하고, 사용자 데이터 사용량을 줄일 수 있습니다. 이 기능을 구현한 팀의 오늘 웹에서 표준 HTML 동영상 및 오디오 지연 로딩을 사용하는 방법에서 자세히 알아보세요.

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: not supported.
  • Safari: not supported.

Source

문서 PIP API

Firefox 151에서는 데스크톱 플랫폼에서 문서 PIP API 지원이 도입됩니다.

항상 최상위 창에서 <video> 요소를 볼 수 있는 표준 PIP 모드 API와 달리 문서 PIP 모드 API를 사용하면 임의의 HTML 콘텐츠가 포함된 항상 최상위 창을 열 수 있습니다. 이를 통해 페이지에서 벗어나도 유지되는 화상 회의 참여자 그리드, 대화형 주식 티커 또는 타이머와 같은 풍부한 대화형 오버레이를 사용할 수 있습니다.

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: 151.
  • Safari: not supported.

Source

Web Serial API 플랫폼 지원 확대

Firefox 151에서는 데스크톱 플랫폼에서 Web Serial API를 지원하고 Chrome 148에서는 Android에서 지원합니다.

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

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 151.
  • Safari: not supported.

Source

베타 브라우저 출시

베타 브라우저 버전에서는 브라우저의 다음 안정화 버전의 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새 기능이나 삭제를 테스트하기에 좋은 시기입니다. 이번 달의 새로운 베타는 Chrome 149와 Firefox 152입니다. 이번 달에는 Safari 베타가 없습니다.

Chrome 149 베타에는 CSS 간격 장식과 같은 흥미로운 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를 지원합니다.