CSS Flexbox, CSS 그리드, 위치: 고정, 가로세로 비율, CSS 변환 등 5가지 핵심 영역에서 브라우저 호환성 문제를 없애기 위한 Compat 2021의 연말 업데이트입니다.
연말이 다가오고 있으며 이제 5가지 주요 영역에서 브라우저 호환성 문제를 없애기 위한 Compat 2021의 최종 업데이트가 될 것입니다.
90% 초과
모든 브라우저에서의 점수
마지막 업데이트 이후 모든 브라우저에서 계속 개선되었습니다. 모든 브라우저는 초창기부터 훨씬 낮은 테스트 점수로 시작했지만 지금은 모든 브라우저가 90%를 넘었습니다. 이는 웹 플랫폼이 5가지 중점 영역의 상호 운용성을 크게 개선했음을 의미합니다.
브라우저 공급업체는 브라우저 공급업체뿐만 아니라 웹 커뮤니티의 다른 기업에서도 브라우저 엔진에 기여합니다. 이 프로젝트에서 특히 Igalia의 참여와 점수 개선을 위한 지속적인 노력에 감사드립니다. 이갈리아는 2021년 Compat의 다섯 가지 중점 영역을 모두 개선하는 데 기여했습니다.
이제 테스트 결과 대시보드인 wpt.fyi의 필터링된 테스트 결과 뷰에서 2021년 Compat에 포함된 테스트를 모두 볼 수 있으며 Chrome, Firefox, Safari의 뷰를 통해 7월의 최종 업데이트와 결과를 비교해 볼 수 있습니다.
각 영역의 개선사항을 살펴보겠습니다.
CSS Flexbox
이제 모든 브라우저에서 flex-basis: content가 지원되며 Chromium 및 WebKit에서 구현됩니다. content 값은 이미 Gecko에서 지원되었습니다.
Chromium에서 Flexbox 크기 조정 문제가 수정되어 사양 및 Gecko의 동작과 일치합니다. 또한 Gecko에서는 Flex 항목의 높이 비율 문제를 포함하여 Compat 2021에 영향을 미치는 여러 문제가 수정되었습니다. 마지막으로 WebKit에서 더 많은 정렬 속성 값 (left, right, self-start, self-end, start, end) 지원이 추가되었으며 절대적 위치 지정을 위한 많은 개선사항이 이루어졌으며 2021년 Compat의 Flexbox 테스트 결과도 개선되었습니다.
CSS 그리드
2021년 웹 폴더 및 Chrome의 사용량 측정항목에서 알 수 있듯이 웹에서 CSS 그리드의 사용이 계속 증가하고 있습니다.
Chrome과 Edge 93의 GridNG 출시로 Grid와 관련된 오랫동안 지속된 많은 문제가 해결되어 Chromium의 버그 추적기에서 38개의 인상적인 문제를 해결했습니다. 이후 여러 소규모 개선사항과 함께 Chromium의 Grid에 관한 Compat 2021 점수는 3% 에서 97%로 개선되었습니다. 이 작업은 Microsoft Edge팀에서 주도했습니다.
Gecko에서 그리드에 영향을 미치는 절대적 위치 지정 버그가 수정되었으며 WebKit에서 많은 수정사항이 적용되어 그리드 테스트에서 Firefox는 1%, Safari의 경우 3% 개선되었습니다.
CSS position: sticky
최종 업데이트에서 position: sticky은 브라우저 (이 경우 Chrome 및 Edge)가 테스트를 100% 통과한 첫 번째 영역이었습니다. 이제 WebKit 구현 시 여러 가지 수정 후 Safari도 이러한 테스트에서 100% 점수를 받았습니다. 이러한 개선 사항은 대부분 Safari 15에 포함되었습니다.
CSS aspect-ratio 속성
요소의 가로세로 비율 (너비-높이 비율) 정의를 위한 교차 브라우저 지원은 계속 개선되었으며 Compat 2021 점수는 Chrome/Edge, Firefox, Safari에서 각각 99%, 97%, 95% 에 도달했습니다. 대부분의 개선사항은 aspect-ratio 속성 자체가 아니라 width 및 height 속성이 요소의 기본 aspect-ratio 값에 매핑되는 방식에 있습니다. 이는 WebKit의 여러 요소와 Chromium의 <canvas>에 구현되었습니다.
CSS 변환
이제 Chromium, Gecko 및 WebKit에서 transform: perspective(none)가 지원됩니다. 이렇게 하면 원근과 원근이 없는 상태에서 애니메이션을 더 쉽게 할 수 있습니다.
Chromium에서 transform-style: preserve-3d (하위 요소가 동일한 3D 장면에 참여할 수 있도록 함) 및 perspective 속성 (하위 요소에 원근 변환 적용)이 이제 하위 요소에만 적용되도록 하여 사양에 정렬됩니다.
모든 브라우저에서 CSS 변환에서 점수가 크게 증가한 이유는 잘못된 테스트가 수정되거나 삭제된 테스트 모음이 개선되었기 때문입니다. 이렇게 하면 나머지 상호 운용성 문제를 더 쉽게 이해하고 향후 회귀를 방지할 수 있습니다.
결론
점수를 많이 개선하고 더 나은 테스트 인프라를 제공하기 위해 지난 한 해 동안 노력해 주신 모든 분께 감사드립니다. aspect-ratio는 웹 개발자로부터 오랫동안 요청되었던 기능이며 이제 모든 브라우저에서 지원됩니다. Flexbox, 그리드 및 position: sticky의 사용이 모두 증가하고 있으며 2021년에 이루어진 여러 개선사항 덕분에 이제 이러한 기능이 여러 브라우저에서 더 잘 지원됩니다.
다음 단계 Google은 이러한 노력의 다음 번 반복을 통해 다른 브라우저 공급업체 및 광범위한 커뮤니티와 계속 협력할 수 있게 되어 기쁩니다. Google은 2022년 중점 영역을 연구하고 논의하기 시작했습니다 곧 발표될 내용을 확인해 주세요.
의견이나 질문이 있으면 Twitter(@ChromiumDev)로 문의해 주세요.