2022년에 상호 운용이 가능하게 된 몇 가지 기능을 살펴보세요.
올해도 저물어 가고 있습니다. 웹 플랫폼의 상호 운용성을 개선하기 위해 함께 노력하면서 브라우저의 개선사항을 살펴볼 시기입니다. 이니셔티브가 시작된 올해 3월 게시물에서 이 이니셔티브가 어떻게 시작되었는지 확인해 보세요.
연말의 전체 점수는 모든 엔진에서 크게 향상되었음을 보여줍니다.
이 게시물에서는 2022년에 이룬 발전에 대해 알아봅니다. 이러한 헤드라인 특징 외에도 모든 엔진에서 여러 소규모 개선사항을 적용했습니다. 엔진 간에 불일치를 유발하고 개발 중에 문제를 일으킬 수 있는 사소한 문제가 해결되었습니다. 크로스 브라우저에서 사용할 수 있는 큰 기능을 확인하는 것은 분명 즐거운 일이지만 때로는 사소한 부분 때문에 가장 큰 문제가 발생하는 경우도 있고, 기능이 얼마나 개선되었는지를 보면 기쁘게 생각합니다.
레이어 캐스케이드
캐스케이드 레이어를 사용하면 선택기를 레이어로 그룹화하여 계단식을 관리할 수 있습니다. 이는 모든 곳에서 지원될 때만 유용한 기능입니다. 이제 모든 주요 엔진이 계단식 레이어를 지원하고, 모든 브라우저의 점수에는 기능의 상호 운용성이 반영되어 있으며, Firefox는 몇 번의 테스트만 통과하면 됩니다.
대화상자 요소
대화상자 요소를 사용하면 모달 및 비모달 대화상자를 생성할 수 있습니다. 이는 웹에서 흔히 사용되는 패턴이며, 이 요소를 사용하면 자체 구성요소를 만들 때 개발하고 테스트해야 하는 사용성 및 접근성을 얻을 수 있습니다. Adam Argyle은 대화상자 구성요소 빌드하기 도움말에서는 이 요소를 기반으로 다양한 유형의 대화상자를 빌드하는 방법을 설명합니다.
서브 그리드
2022년 초에 grid-template-rows 및 grid-template-columns의 subgrid 값을 지원하는 유일한 브라우저는 Firefox였습니다. 2022년에 Safari가 지원되기 시작했으며 Chrome에서 이 기능은 개발 중입니다. 연말에는 상호 운용성을 위한 기한을 넘기겠지만, 조속히 진행 중입니다.
표시 영역 단위
표시 영역 단위는 모든 엔진에서 테스트를 100% 통과한 유일한 기능입니다. 여기에는 기기 UI 요소가 표시되고 사라질 때 모바일에서 변경되는 표시 영역 크기를 처리하는 작은 표시 영역과 큰 표시 영역 개념이 포함됩니다. 이러한 단위에 대한 자세한 내용은 대형, 소형 및 동적 표시 영역 단위 게시물에서 확인할 수 있습니다.
브라우저 지원
- 108
- 108
- 101
- 15.4
색상 4
이러한 색상 작업 모음을 통해 CSS는 고화질 영역 (예: 디스플레이 p3, rec2020)의 색상을 지정할 수 있을 뿐만 아니라 색상 작업을 위한 고유한 유틸리티를 각각 가진 새로운 색상 함수를 제공합니다. 새로운 색상 공간은 lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65입니다. 이 플래그를 사용 설정한 상태에서 지금 Canary에서 사용해 보세요. 이러한 변경사항은 그래디언트에도 적용되므로 작성자는 그래디언트에서 사용할 색공간을 지정할 수 있습니다. 같은 플래그를 사용하면 color-mix()도 지원되므로 원하는 공간에서 두 색상을 혼합할 수 있습니다. 또한 color-mix() 함수는 Safari 및 Firefox의 플래그 뒤에 있습니다. 더 많은 색상, 더 나은 색상, 더 나은 그라데이션과 더 멋진 도구를 제공합니다.
상호 운용성 2023
2022년 말에 서비스가 중단되는 것은 아니며, 상호 운용성 2023은 이미 초기 계획 단계를 통과했습니다. 새해에는 선별된 기능을 발표할 수 있으며 웹 개발을 더 쉽게 할 수 있는 새해가 되기를 기대합니다.
히어로 이미지: Ian Schneider