2021년 중반 업데이트 - CSS Flexbox, CSS 그리드, 위치: 고정, 가로세로 비율, CSS 변환 등 5가지 핵심 영역에서 브라우저 호환성 문제를 없애기 위한 노력
5가지 주요 중점 영역에서 브라우저 호환성 문제를 없애기 위한 노력인 Compat 2021의 중간 업데이트입니다. #compat2021 작업과 Google에서 중점 영역을 결정한 방식에 대한 자세한 내용은 3월 공지사항을 확인하세요.
이 게시물에서 다루는 Chromium 개선사항은 Chrome, Edge 및 모든 Chromium 기반 브라우저에 적용됩니다.
진행 상황 측정 방법
web-platform-tests의 Compat 2021 대시보드에서 통과한 테스트 수와 다양한 브라우저의 추세 그래프를 확인할 수 있습니다.
단순히 '합격한 테스트' 숫자만으로 브라우저 호환성에 대한 모든 것을 알려주지는 않지만, Google에서 노력의 진행 상황을 확인하는 데 사용하는 신호 중 하나입니다. 테스트 결과에서 브라우저 간 차이가 적기 때문에 여러 브라우저에서 웹 기능의 상호 운용성이 향상됩니다.
CSS Flexbox
세 가지 브라우저 엔진 모두 Flexbox에서 개선되었습니다.
Safari 14.1에서는 flexbox의 gap 속성이 도입되었습니다. gap 속성을 사용하면 항목 사이의 간격을 편리하게 설정할 수 있습니다. 이 속성은 그리드 레이아웃에서 자주 사용되며 Flexbox 레이아웃 지원은 MDN 브라우저 호환성 보고서에서 가장 많이 요청된 기능 중 하나였습니다. 이 업데이트를 통해 flex 레이아웃의 gap 속성을 모든 주요 브라우저에서 사용할 수 있으며 주요 호환성 문제가 해결되었습니다. Safari 14.1에는 또한 flexbox의 이미지에 관한 많은 수정사항이 포함되어 있어 이전의 해결 방법이 필요하지 않습니다.
Firefox는 테이블의 가변 항목 렌더링을 해결하여 Firefox가 테스트를 100% 통과했습니다 (현재는 98.5%).
Chromium에서는 테이블을 가변형 항목으로 수정했습니다.
Chromium 88에는 탄력 항목으로 이미지를 재작성하여 오랫동안 지속된 여러 버그를 해결하기도 했습니다. 마지막으로 Chromium은 최근 새 정렬 키워드 지원(start, end, self-start, self-end, left 및 right)을 추가했습니다. 이러한 키워드는 Chrome Canary 및 Edge Canary에서 사용해 볼 수 있습니다.
CSS 그리드
CSS 그리드 사용량은 꾸준히 증가하고 있으며 현재 페이지 조회수의 9% 를 차지합니다. 주요 브라우저 엔진 3개 모두 CSS 그리드를 구현하며 이미 관련 웹 플랫폼 테스트의 89% 이상을 통과하고 있습니다. 이 기능의 지속적인 성장을 지원하려면 호환성 격차를 줄이는 것이 중요합니다.
2021년까지 Safari는 테스트를 통과하여 89% 에서 93% 로 개선되었으며 Chromium은 GridNG라는 더 많은 CSS 그리드 문제를 해결하기 위해 새로운 아키텍처를 개발하고 있습니다. 이는 Microsoft 팀이 주도한 노력으로, 최근 타겟팅된 그리드 테스트의 94% 에서 97% 로 증가했습니다. Edge 블로그에서 곧 GridNG에 관한 업데이트를 받을 수 있습니다.
CSS position: sticky
Chromium에서 테이블 렌더링을 재설계하기 위해 수년간 노력한 TablesNG가 출시되면서 테이블 헤더용 position: sticky 문제가 해결되었습니다.
이 변경사항과 몇 가지 최종
수정과 함께 Chrome 및 Edge 93 개발자 채널은 타겟팅된 테스트의 100% 를 통과했습니다.
position: sticky 외에도 TablesNG에서 Chromium 버그 72개를 해결했습니다.
CSS aspect-ratio 속성
너비-높이 비율을 쉽게 설정할 수 있는 aspect-ratio 속성은 반응형 웹 디자인에 중요합니다. 또한 누적 레이아웃 변경을 방지하는 솔루션이기도 합니다.
이제 aspect-ratio 속성이 안정적인 버전의 Chrome, Edge, Firefox와 Safari 15 베타에서 지원됩니다. 교차 브라우저 지원이 개선됨에 따라 사용량도 증가하고 있습니다.
100% 테스트를 통과한 브라우저는 없지만 aspect-ratio의 호환성 격차는 Compat 2021의 포커스 영역 5개 중 가장 작습니다. 모든 주요 브라우저에서 90% 이상 테스트를 통과했습니다. 앞으로 이 테스트 모음을 사용하여 진행 상황을 계속 모니터링하여 이 기능을 안정적으로 만들 수 있습니다.
web.dev에서 aspect-ratio 속성의 사용법과 이점을 자세히 알아보세요.
CSS 변환
버그가 수정되고 테스트 자체가 개선되어 CSS 변환의 타겟팅된 테스트 결과가 느리고 꾸준히 개선되었습니다.
Chromium팀은 transform-style:
preserve-3d 및 transform :perspective()의 상호 운용성을 개선하기 위해 노력하고 있습니다. 다음 업데이트에서 더 많은 진행 상황을 공유할 수 있기를 바랍니다.
전반적인 점수 개선
3월 발표 이후 세 가지 브라우저 엔진 모두 Compat 2021 점수를 개선했습니다.
- Chrome 및 Edge 개발자 버전이 86개에서 92개로 변경되었습니다.
- Firefox는 83에서 86으로 변경되었습니다.
- Safari가 64에서 82로 변경되었습니다.
특히 Safari는 WebKit 참여자의 많은 노력 덕분에 호환성 격차를 18포인트 좁혔습니다. 특히 Igalia 팀은 aspect-ratio 속성에 기여했고 Flexbox 및 Grid를 여러 가지 개선(예: Flexbox용 gap)하고 다양한 버그를 수정했습니다.
Compat 2021 진행 상황 확인
Compat 2021의 진행 상황을 확인하려면 대시보드를 주시하거나 메일링 리스트를 구독하거나 @chromiumdev로 문의하세요. 문제가 발생하면 영향을 받은 브라우저의 버그를 신고하세요.