웹용 빌드가 더 쉬워집니다.
개발자와 개별적으로 대화를 나누거나 CSS 현황과 같은 설문조사를 통해 논의할 때 같은 내용이 반복적으로 들립니다. 개발자는 여러 브라우저에서 원활하게 작동하는 웹사이트와 애플리케이션을 개발하기가 어렵고 흥미로운 새 기능을 언제 안전하게 사용할 수 있는지도 알기 어렵습니다.
Flexbox 간격
문제가 있는 속성의 예로, gap 속성을 사용하면 그리드나 가변형 항목이나 멀티컬 컨테이너의 열 사이에 간격을 둘 수 있습니다. 오랫동안 여러 열로 column-gap를 사용했지만 이 속성은 처음에 grid-column-gap 및 grid-row-gap와 함께 그리드 레이아웃에서 grid-gap로 표시되었습니다.
브라우저에 그리드 레이아웃이 도입된 직후 속성의 이름이 row-gap 및 column-gap와 함께 gap로 변경되었습니다. 그런 다음 Flex 레이아웃에서도 작동하도록 지정되었습니다. 이름 변경은 동일한 작업을 수행하는 여러 속성이 없다는 것을 의미합니다.
.box {
display: flex;
gap: 1em;
}
Firefox는 2018년 10월에 Flex 레이아웃의 속성을 출시했습니다. 2020년 7월까지 Chrome에 표시되지 않았고 2021년 4월에 Safari가 그 뒤를 이었습니다. 즉, gap를 안전하게 사용하기까지 2년 6개월의 공백이 있었다는 의미입니다. 하지만 대부분의 개발자는 최신 버전보다 오래된 브라우저 버전을 지원해야 했기 때문에 대기 시간이 훨씬 더 길었습니다. Flex 레이아웃에서 gap를 지원하는 것은 Flex 레이아웃에서 격차 지원을 감지하는 데 기능 쿼리를 사용할 수 없다는 사실로 인해 더 문제가 되었습니다. gap 속성이 그리드에서 지원되므로 @supports (gap:1em)는 true를 반환합니다.
또 다른 문제는 하나의 브라우저에 새로운 기능이 출시되면 사람들이 이에 대해 이야기하고 데모를 공유한다는 것입니다. 이 기능은 안정적인 브라우저에서 이 기능이 출시되기 한참 전에 시작되는 경우가 많습니다. 이로 인해 개발자에게 혼란을 줄 수 있고, 적어도 짜증을 낼 수도 있습니다. 새로운 기능에 대한 이야기가 여기저기에서 거듭 제기되고 있는데, 지원 부족으로 인해 실제로 사용할 수 없다는 사실을 깨닫게 됩니다.
지원에 차이가 있는 이유는 무엇인가요?
이 게시물은 속도가 느리다는 이유로 하나의 브라우저를 가리키는 게시물이 아닙니다. 다양한 플랫폼 기능을 살펴보면 여러 브라우저가 다양한 기능에서 앞서가고 있다는 것을 알 수 있습니다.
대부분의 기능은 하나의 브라우저에서 프로토타입으로 제작됩니다. 예를 들어 그리드 레이아웃 사양은 Microsoft에서 처음 만들었으며 Internet Explorer 10에서 초기 형식으로 구현되었습니다. Mozilla의 엔지니어는 서브그리드가 어떻게 동작해야 하는지 알아내기 위해 많은 노력을 기울였으며, 이 기능은 Firefox에 먼저 도입되었습니다. 우리는 Safari가 몇 가지 흥미로운 새로운 색상 기능을 주도하는 것을 목격하고 있습니다.
하나의 브라우저가 프로토타입 제작을 주도할 수 있지만 CSS 실무 그룹 내 모든 브라우저 (및 기타 조직)의 담당자가 CSS 기능에 대해 논의합니다. 어떤 기능은 모든 브라우저에서 구현될 수 있어야 하며, 하나의 브라우저에서는 구현할 수 없도록 설계되어서는 안 됩니다. 이로 인해 지원에 영구적인 격차가 있고 기능을 채택하지 못할 수 있습니다.
그러나 기능을 구현할 때는 해당 브라우저에 사용할 수 있는 다른 모든 기능과 함께 해당 기능을 우선시해야 합니다. 그리고 브라우저 개선을 위해 필요한 다른 작업이 뒤따르기도 합니다. 이에 대한 좋은 예는 Chromium의 RenderingNG 작업입니다. 이를 통해 서브 그리드 구현을 위한 기반이 마련되었지만 Firefox와 Chromium 배송 서브그리드 사이의 긴 격차는 먼저 새 렌더링 엔진에서 그리드 레이아웃을 다시 구현해야 하기 때문입니다.
문제점
여기에는 두 가지 문제가 있습니다. 첫 번째는 상호 운용성 문제입니다. 기능이 하나의 브라우저에 도착하는 시점부터 모든 곳에서 사용할 수 있게 되기까지 시간이 오래 걸릴 수 있다는 점입니다.
두 번째는 메시지 전달의 문제입니다 지원의 격차를 명확히 하려면 어떻게 해야 할까요? 얼마나 잘 지원되는지 확인하기 위해 모두가 신중하게 조사하지 않고도 새로운 기능을 공유하려면 어떻게 해야 할까요?
상호 운용성
브라우저들은 이미 상호 운용성 문제를 해결하기 위해 협력하고 있습니다. 작년 Compat 2021은 Flex 레이아웃의 갭 속성을 비롯한 여러 기능 지원의 격차를 줄이는 데 도움이 되었습니다. 올해 상호 운용성 2022에서는 15가지 기능에 중점을 두었으며 이미 일부 기능에 대한 움직임이 있었습니다.
Interop 2022 대시보드에서 진행 상황을 확인할 수 있습니다.
메시지
두 번째 문제는 web.dev와 developer.chrome.com의 기능에 관해 이야기할 때 도움이 되고자 합니다. 사용자가 Google 콘텐츠를 읽을 때 기능의 상태를 명확하게 알 수 있도록 하고 Google에서 지원 문제를 해결하는 실질적인 방법을 제공하기를 바랍니다.
Google은 여러 기초 과정을 출시했으며 앞으로 더 많은 과정이 추가될 예정입니다. 이 과정은 핵심 웹 플랫폼 기술을 사용하여 최신 웹에 맞게 빌드하는 방법을 배우는 데 도움이 됩니다. 체크아웃:
Google에서는 이 사이트의 콘텐츠를 사용자가 안전하게 사용할 수 있는 콘텐츠에 집중하기 위해 노력하고 있습니다. 아직 완전히 갖춰지지는 않았지만 향후 몇 개월에 걸쳐 실용적인 방향으로 옮겨가는 것을 보실 수 있을 겁니다.
또한 Open Web Docs 프로젝트를 지원하여 웹 문서를 개방하는 데에도 기여하고 있습니다. 이를 통해 Google에서는 최신 브라우저 호환성 데이터와 함께 MDN에 관한 최고 수준의 문서를 제공합니다. 그런 다음 web.dev에서 이 데이터를 사용하여 기능 지원을 표시합니다. 다음은 Flex 레이아웃에서 현재 지원되는 gap입니다.
브라우저 지원
- 84
- 84
- 63
- 14.1
웹에 대한 Chrome의 비전, Origin 및 개발자 트라이얼에서 실험 중인 기능에 대해 자세히 알고 싶다면 자매 사이트인 developer.chrome.com에서 해당 콘텐츠를 더 많이 찾을 수 있습니다. 이러한 콘텐츠는 현재 실험 단계에 있거나 현재 Chrome에서만 지원될 수 있지만, Chrome에서 제공되는 콘텐츠를 살펴보고 의견을 제공해 주시면 감사하겠습니다.
지금 웹은 정말 흥미진진한 시기입니다. 저희는 여러분에게 주요 기능을 보다 신속하게 제공하고, 존재하는 격차를 명확히 하여 웹 개발을 더 즐겁고도 편리하게 할 수 있기를 바랍니다.
사진: 크리스토퍼 막시밀리안