4월의 웹 플랫폼 새로운 기능

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

Rachel Andrew

안정적인 브라우저 출시

2023년 4월에 Firefox 112 및 Chrome 112가 안정화되었습니다. 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.

inert 속성

Firefox 112에는 inert 전역 속성이 포함되어 있습니다. 이 속성은 브라우저에 요소를 무시하도록 지시하여 상호작용이 없어야 하는 콘텐츠를 나타냅니다. 담고 있습니다.

  • click 이벤트가 실행되지 않도록 합니다.
  • 요소가 포커스를 얻지 못하도록 합니다.
  • 접근성 트리에서 요소와 해당 콘텐츠를 제외합니다.

이제 이 속성은 세 가지 엔진에서 모두 상호 운용됩니다.

브라우저 지원

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5

소스

linear() 완화 함수

linear() 이중 함수를 사용하면 여러 지점 간에 선형 보간을 사용할 수 있습니다. 이를 통해 반동 및 탄성 효과와 같은 더 복잡한 애니메이션을 사용할 수 있습니다. 이 함수는 Firefox 112에 있습니다.

브라우저 지원

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

CSS 중첩

Chrome 112에서는 많은 개발자가 기다려온 기능인 CSS 중첩을 지원합니다. 이를 통해 사전 처리기를 사용한 개발자에게 익숙한 방식으로 관련 스타일 규칙을 중첩하는 데 사용되는 새로운 중첩 선택기 >가 도입되었습니다.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

브라우저 지원

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

소스

CSS animation-composition

Chrome 112에는 animation-composition 지원도 포함되어 있습니다. 여러 애니메이션 효과가 animation-composition과 합성되는 방식 지정에서 이 속성이 작동하는 방식을 알아보세요.

브라우저 지원

  • Chrome: 112.
  • Edge: 112.
  • Firefox: 115
  • Safari: 16

소스

새로운 헤드리스 모드

Puppeteer와 같이 Chrome의 헤드리스 모드를 사용하는 경우 112에서는 완전히 새로운 헤드리스 모드를 제공합니다. Chrome의 헤드리스 모드 업그레이드에서 자세히 알아보세요.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트하기에 좋은 시기입니다. 새로운 베타는 Firefox 113 및 Chrome 113이며 Safari 16.5 베타는 아직 진행 중입니다. 이번 출시에서는 플랫폼에 여러 가지 멋진 기능이 추가되었습니다. 자세한 내용은 출시 노트를 참고하세요. 다음은 몇 가지 주요 내용입니다.

Firefox 113에는 color(), lab(), lch(), oklab(), oklch() 함수가 포함되어 있습니다. CSS Color 5의 color-mix() 함수와 forced-color-adjust 속성도 포함되어 있습니다.

Firefox에는 선택할 요소를 더 세부적으로 제어할 수 있는 nth-child of <selector> 문법도 포함되어 있습니다. of S 구문으로 :nth-child() 선택을 더 세부적으로 제어에서 자세히 알아보세요.

CSS의 경우 Chrome 113에는 overflow-inline, overflow-block, update 미디어 기능이 포함되어 있습니다. linear() 이중 함수와 접두사가 없는 image-set() 유형에도 포함되어 있습니다.

Chrome 113에는 웹용 WebGL 및 WebGL 2 그래픽 API의 후속인 WebGPU도 포함되어 있습니다. GPU 컴퓨팅, GPU 하드웨어에 대한 더 낮은 오버헤드 액세스, 단일 그래픽 기기에서 여러 캔버스로 렌더링하는 기능, 더 나은 예측 가능한 성능과 같은 최신 기능을 제공합니다.

웹 시리즈 초보자용의 일부