Google은 다른 브라우저 공급업체 및 업계 파트너와 협력하여 웹 개발자가 가장 많이 겪고 있는 5가지 브라우저 호환성 문제인 CSS Flexbox, CSS Grid, position: sticky, aspect-ratio, CSS 변환 문제를 해결하고 있습니다.
Google은 다른 브라우저 공급업체 및 업계 파트너와 협력하여 웹 개발자가 가장 많이 겪는 5가지 브라우저 호환성 문제를 해결하고 있습니다. 포커스 영역은 CSS Flexbox, CSS 그리드, position: sticky, aspect-ratio, CSS 변환입니다. 참여 방법 및 팔로우 방법을 확인하여 참여하는 방법을 알아보세요.
배경
웹에서의 호환성은 개발자에게 항상 큰 과제였습니다. 지난 몇 년 동안 Google은 물론 Mozilla와 Microsoft를 비롯한 기타 파트너들은 웹 개발자가 가장 겪는 가장 큰 고충을 파악하고, 더 나은 환경에서 서비스를 제공하고 우선순위를 정하기 위해 노력해 왔습니다. 이 프로젝트는 Google의 개발자 만족도 (DevSAT) 작업과 연결되어 있으며 2019년과 2020년의 MDN DNA (개발자 니즈 평가) 설문조사 작성과 MDN 브라우저 호환성 보고서 2020에 발표된 심층적인 연구 노력으로 시작되어 규모가 크게 확대되었습니다. CSS 상태 및 JS 상태 설문조사와 같은 다양한 채널에서 추가 연구가 이루어졌습니다.
2021년의 목표는 개발자가 이를 기반으로 안정적인 기반으로 구축할 수 있도록 5가지 핵심 중점 영역에서 브라우저 호환성 문제를 제거하는 것입니다. 이러한 노력을 #Compat 2021이라고 합니다.
집중해야 할 항목 선택하기
기본적으로 모든 웹 플랫폼에 브라우저 호환성 문제가 있지만 이 프로젝트에서는 가장 문제가 되는 영역을 상당히 개선할 수 있는 소수의 영역에 초점을 맞춰 개발자의 주요 문제로 이러한 부분을 삭제합니다.
호환성 프로젝트는 우선순위를 지정할 영역에 영향을 주는 여러 기준을 사용하며, 그 중 일부는 다음과 같습니다.
- 기능 사용. 예를 들어 Flexbox는 모든 페이지 조회수의 75%에서 사용되며 HTTP Archive에서의 채택률이 증가하고 있습니다.
- 버그 수(Chromium, Gecko, WebKit) 및 Chromium의 경우 해당 버그의 별점
설문조사 결과:
- MDN DNA 설문조사
- MDN 브라우저 호환성 보고서
- 가장 잘 알려져 있고 사용되는 CSS 상태
web-platform-tests의 테스트 결과 예: flexbox on wpt.fyi.
가장 많이 검색된 기능을 사용할 수 있나요?
2021년의 5대 중점 분야
Chromium은 2020년부터 2020년 Chromium의 브라우저 호환성 개선에 설명된 주요 영역을 해결하기 위해 노력하고 있습니다. 2021년에는 한 걸음 더 나아갈 수 있도록 최선을 다하고 있습니다. Google과 Microsoft는 이갈리아와 함께 Chromium의 주요 문제를 해결하기 위해 협력하고 있습니다. Chromium 및 WebKit에 정기적으로 참여하고 있고 삽입된 기기용 공식 WebKit 포트의 유지관리 담당자인 Igalia는 이러한 호환성 노력에 적극적으로 참여해 왔으며 식별된 문제를 해결하고 추적하는 데 도움을 줄 것입니다.
2021년에는 다음과 같은 분야들이 해결을 위해 노력할 것입니다.
CSS Flexbox
CSS Flexbox는 웹에서 널리 사용되며 개발자에게 여전히 중요한 과제가 있습니다. 예를 들어 Chromium 및 WebKit 모두 auto-height 플렉스 컨테이너로 인해 이미지 크기가 잘못 지정되는 문제가 발생했습니다.
사진: 알리레자 마흐무디
Igalia's Flexbox Cats 블로그 게시물에서는 더 많은 예를 통해 이러한 문제를 자세히 다룹니다.
우선순위가 지정된 이유
- 설문조사: MDN 브라우저 호환성 보고서의 주요 문제, CSS 상태에서 가장 잘 알려져 있고 사용됨
- 테스트: 모든 브라우저에서 85% 통과
- 사용량: 페이지 조회수의 75%, HTTP Archive에서 강하게 증가
CSS 그리드
CSS 그리드는 최신 웹 레이아웃의 핵심 구성요소로, 여러 기존 기술과 해결 방법을 대체합니다. 채택이 증가함에 따라 견고해야 하므로 브라우저 간의 차이가 결코 피해야 할 이유가 아닙니다. 한 가지 없는 영역은 그리드 레이아웃에 애니메이션을 적용하는 기능입니다. Gecko에서는 지원되지만 Chromium 또는 WebKit에서는 지원되지 않습니다. 지원되는 경우 다음과 같은 효과가 가능합니다.
우선순위가 지정된 이유
- 설문조사: 잘 알려져 있지만 CSS 상태에서 자주 사용되지 않는 MDN 브라우저 호환성 보고서의 2위
- 테스트: 모든 브라우저에서 75% 통과
- 사용량: 8% 이상 꾸준히 증가, HTTP Archive가 약간 성장함
CSS 위치: 고정
고정 위치 지정을 사용하면 콘텐츠를 표시 영역의 가장자리에 고정할 수 있으며 일반적으로 표시 영역 상단에 항상 표시되는 헤더에 사용됩니다. 모든 브라우저에서 지원되지만 의도한 대로 작동하지 않는 일반적인 사용 사례가 있습니다. 예를 들어 고정 테이블 헤더는 Chromium에서 지원되지 않으며, 이제 플래그 뒤에서 지원되지만 브라우저 간에 결과가 일관되지 않습니다.
Rob Flack의 고정 테이블 헤더 데모를 확인하세요.
우선순위가 지정된 이유
- 설문조사: CSS 상태에서 잘 알려져 있거나 사용됨, MDN 브라우저 호환성 보고서에서 여러 번 언급됨
- 테스트: 모든 브라우저에서 66% 통과
- 사용량: 8%
CSS 가로세로 비율 속성
새로운 aspect-ratio CSS 속성을 사용하면 요소의 너비-높이 비율을 쉽게 유지할 수 있으므로 잘 알려진 padding-top 해킹의 필요성을 제거할 수 있습니다.
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
이는 매우 일반적인 사용 사례이기 때문에 널리 사용될 것으로 예상되며 Google은 모든 일반적인 시나리오와 브라우저에서 잘 유지되기를 바랍니다.
우선순위가 지정된 이유
CSS 변환
CSS 변환은 수년 동안 모든 브라우저에서 지원되었으며 웹에서 널리 사용됩니다. 하지만 브라우저, 특히 애니메이션 및 3D 변환에서 동일하게 작동하지 않는 영역이 여전히 많이 있습니다. 예를 들어 카드 플립 효과는 브라우저 간에 매우 일관되지 않을 수 있습니다.
우선순위가 지정된 이유
정보를 제공하고 팔로우하는 방법
@ChromiumDev 또는 공개 메일링 리스트, 2021년 호환성에 게시되는 업데이트를 팔로우하고 공유하세요. 버그가 있는지 확인하거나 발생한 문제에 대해 버그를 신고하고 누락된 내용이 있다면 위 채널을 통해 문의하세요.
web.dev에는 진행 상황에 관한 정기적인 업데이트가 있을 예정이며, 2021년 컴포넌트 대시보드에서 각 포커스 영역의 진행 상황을 확인할 수도 있습니다.
안정성과 상호 운용성을 개선하기 위한 브라우저 공급업체 간의 이러한 협력이 웹에서 놀라운 결과물을 빌드하는 데 도움이 되기를 바랍니다.