Google은 웹 개발자가 가장 많이 겪는 5가지 브라우저 호환성 문제인 CSS Flexbox, CSS 그리드, position: sticky, aspect-ratio, CSS 변환을 해결하기 위해 다른 브라우저 공급업체 및 업계 파트너와 협력하고 있습니다.
Google은 다른 브라우저 공급업체 및 업계 파트너와 협력하여
웹 개발자가 브라우저 호환성 문제를 겪는 5가지 주요 사항을 알아보세요. 중점 분야
CSS Flexbox, CSS 그리드, position: sticky, aspect-ratio, CSS입니다.
사용할 수 있습니다. 참여 및 팔로우하는 방법을 확인해 보세요.
참여 방법을 알아보세요.
배경
웹에서의 호환성은 항상 개발자에게 큰 과제였습니다. Mozilla 및 Google을 비롯한 기타 파트너와 Microsoft는 웹의 가장 큰 고충을 해결하기 위해 노력했습니다 상황을 개선하기 위한 작업과 우선순위를 지정할 수 있습니다. 이 프로젝트는 Google 개발자 만족 (DevSAT)하고 대규모 언어 모델(LLM)으로 시작했습니다. MDN DNA (개발자 니즈 평가) 설문조사 2019년과 2020년에 발표되었으며 2022년 1월 25일 미국 런던 심층 연구에서 MDN 브라우저 호환성 보고서 2020 정부의 연구 및 기술 현황”과 같은 다양한 채널에서 CSS 및 JS 상태 있습니다.
2021년의 목표는 5가지 핵심 중점 사항을 통해 브라우저 호환성 문제를 해결하는 것입니다 신뢰할 수 있는 기반이 될 수 있습니다. 이 #Compat 2021이라고 합니다.
집중할 항목 선택하기
기본적으로 모든 웹 사이트에서 브라우저 호환성 문제가 있기는 하지만 이 프로젝트의 주안점은 가장 문제가 되는 소수의 이를 통해 개선의 여지가 있는 것으로 확인되어 살펴봤습니다
호환성 프로젝트는 어떤 영역에 영향을 줄지 영향을 주는 우선순위가 있으며 일부는 다음과 같습니다.
- 기능 사용. 예를 들어 Flexbox는 75% 65%를 차지하며 HTTP 채택률이 증가하고 있음 보관처리.
- 버그 수 (Chromium, 도마뱀, WebKit), Chromium의 경우 별표 수 있습니다.
설문조사 결과:
- MDN DNA 설문조사
- MDN 브라우저 호환성 보고서
- CSS 상태 가장 잘 알려져 있고 사용되는 기능
web-platform-tests의 테스트 결과 예를 들어 flexbox의 wpt.fyi.
앱에서 가장 많이 검색된 기능을 사용할 수 있나요?
2021년의 5대 중점 분야
2020년에 Chromium은 2020년 Chromium의 브라우저 호환성 개선 2021년에는 더욱 발전하기 위한 노력에 착수할 것입니다. Google 및 Microsoft는 Chromium의 주요 문제를 해결하기 위해 Igalia와 함께 협력하고 있습니다. 이갈리아는 정기적으로 Chromium 및 WebKit, 임베디드 기기용 공식 WebKit 포트의 유지관리자, Google은 이러한 호환성 개선을 위한 노력에 매우 적극적으로 동참해 왔으며 문제 해결과 추적을 지원하고 있습니다
2021년에 해결하기 위해 최선을 다하고 있는 영역은 다음과 같습니다.
CSS Flexbox
CSS Flexbox
은
널리 사용됨
여전히 개발자에게 큰 과제가 남아 있습니다. 예를 들어
Chromium 및
WebKit
에 auto-height Flex 컨테이너 관련 문제가 발생하여 이미지 크기가 잘못 지정되었습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">사진 제공: Alireza 마흐무디입니다.
이갈리아의 Flexbox 고양이 블로그 게시물에서 더 많은 사례를 통해 이러한 문제에 대해 자세히 알아봅니다.
우선순위가 높은 이유
- 설문조사: 주요 문제 MDN 브라우저 호환성 보고서, 스테이트리스(Stateless) 환경에서 가장 잘 알려져 있고 CSS
- 테스트: 모든 브라우저에서 85% 통과
- 사용: 75% HTTP에서 급격하게 증가하는 페이지 조회수의 비율 보관처리
CSS 그리드
CSS 그리드는 기존의 많은 기술을 대체하는 최신 웹 레이아웃의 핵심 빌딩 블록입니다. 해결책을 찾을 수 있습니다 채택률이 높아짐에 따라 견고해야 합니다. 브라우저 간의 차이가 이를 피할 이유가 아닙니다. 한 가지 영역은 그리드 레이아웃에 애니메이션을 적용하는 기능이 없습니다. Gecko에서는 지원되지만 Chromium 또는 WebKit 지원되는 경우 다음과 같은 효과가 가능합니다.
<ph type="x-smartling-placeholder">우선순위가 높은 이유
- 설문조사: 다음 부문의 준우승작 MDN 브라우저 호환성 보고서, 잘 알려져 있지만 상태에서 자주 사용되지 않음 CSS
- 테스트: 모든 브라우저에서 75% 통과
- 사용: 8% 이며 꾸준히 증가하고 있습니다 HTTP에서 약간 증가 보관처리
CSS position: 고정
고정 포지셔닝 표시 영역 가장자리에 콘텐츠를 고정할 수 있으며 표시 영역 가장자리에 항상 표시 영역 상단에 표시되는 헤더입니다. 지원되는 동안 제대로 작동하지 않는 일반적인 사용 사례가 있습니다. 예를 들어 고정 테이블 헤더 Chromium에서는 지원되지 않습니다. 플래그 뒤 지원되고 결과가 브라우저 간에 일관되지 않습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">고정 테이블 헤더 확인 데모(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; }
이는 매우 일반적인 사용 사례이기 때문에 널리 사용될 것으로 예상되며 모든 일반적인 시나리오에서 모든 브라우저에서 견고하게 유지되도록 해야 합니다.
우선순위가 높은 이유
CSS 변환
CSS 변환 수년간 모든 브라우저에서 지원되어 왔으며 있습니다. 하지만 여전히 동일하게 작동하지 않는 영역이 많이 있습니다. 특히 애니메이션 및 3D 변환과 같은 다양한 기능을 제공합니다. 예를 들어 카드가 뒤집기 효과는 브라우저에서 매우 일관되지 않을 수 있습니다.
<ph type="x-smartling-placeholder">우선순위가 높은 이유
참여 및 팔로우 방법
Google이 게시하는 업데이트를 팔로우하고 공유하세요. @ChromiumDev 또는 공개 메일링 리스트 Compat 2021 버그가 있는지 확인합니다. 신고해 주시기 바랍니다. 누락된 것이 있으면 위의 내용을 통해 문의해 주세요. 있습니다.
web.dev에서 진행 상황에 대한 업데이트가 정기적으로 이루어지며 Compat 2021 대시보드를 클릭합니다.
<ph type="x-smartling-placeholder">
</ph>
브라우저 공급업체들 사이의 이러한 노력을 통해 안정성과 상호 운용성은 웹에서 놀라운 기능을 구현하는 데 도움이 될 것입니다.