2023년 4월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2023년 4월에 Firefox 112 및 Chrome 112가 안정화되었습니다. 이것이 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.
inert 속성
Firefox 112에는 inert 전역 속성이 포함되어 있습니다. 이 속성은 브라우저에 요소를 무시하도록 지시하여 상호작용하면 안 되는 콘텐츠를 나타냅니다. 담고 있습니다.
click이벤트가 실행되지 않도록 합니다.- 요소가 포커스를 얻지 못하게 합니다.
- 접근성 트리에서 요소와 그 콘텐츠를 제외합니다.
이 속성은 이제 세 가지 엔진 모두에서 상호 운용이 가능합니다.
linear() 이징 함수
linear() 이징 함수를 사용하면 여러 점 사이에 선형 보간 유형을 사용할 수 있습니다. 이를 통해 바운스 및 탄성 효과와 같은 더 복잡한 애니메이션을 사용할 수 있습니다. 이 기능은 Firefox 112에 있습니다.
브라우저 지원
- 113
- 113
- 112
- 17.2
CSS 중첩
Chrome 112에서는 많은 개발자가 큰 기대를 걸고 있는 CSS 중첩 기능에 대한 지원을 추가합니다. 이에 따라 전처리기를 사용한 개발자에게 익숙한 방식으로 관련 스타일 규칙을 중첩하는 데 사용되는 새로운 중첩 선택기 >가 도입되었습니다.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
CSS animation-composition
Chrome 112에는 animation-composition 지원도 포함됩니다. 이 속성의 작동 방식은 여러 애니메이션 효과를 애니메이션 컴포지션으로 합성해야 하는 방식 지정에서 알아보세요.
새로운 헤드리스 모드
예를 들어 Puppeteer에서 Chrome의 헤드리스 모드를 사용하면 112에서 완전히 새로운 헤드리스 모드를 제공합니다. 자세한 내용은 Chrome의 헤드리스 모드 업그레이드를 참고하세요.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다. 새로운 베타는 Firefox 113 및 Chrome 113이며 Safari 16.5 베타는 아직 진행 중입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Firefox 113에는 color(), lab(), lch(), oklab(), oklch() 함수가 포함되어 있습니다. CSS 색상 5의 color-mix() 함수와 forced-color-adjust 속성도 포함되어 있습니다.
Firefox에는 nth-child of <selector> 문법이 포함되어 있어 선택하려는 요소를 더 세밀하게 제어할 수 있습니다. 자세한 내용은 S 구문을 사용하여 :nth-child() 선택 항목 제어하기를 참고하세요.
CSS의 경우 Chrome 113에는 overflow-inline, overflow-block, update 미디어 기능이 포함되어 있습니다. linear() 이징 함수와 접두사가 없는 image-set() 유형에도 포함됩니다.
Chrome 113에는 웹용 WebGL 및 WebGL 2 그래픽 API의 후속 버전인 WebGPU도 포함되어 있습니다. GPU 컴퓨팅, GPU 하드웨어에 대한 낮은 오버헤드 액세스, 단일 그래픽 기기에서 여러 캔버스에 렌더링하는 기능, 더 우수하고 예측 가능한 성능과 같은 최신 기능을 제공합니다.