격차 줄이기

웹용으로 더 쉽게 빌드할 수 있습니다.

개발자와 개별적으로 대화하거나 CSS 상태와 같은 설문조사를 통해 대화할 때 항상 비슷한 이야기를 듣습니다. 개발자는 여러 브라우저에서 잘 작동하는 웹사이트와 애플리케이션을 만들기가 어렵고, 새롭고 흥미로운 기능을 언제 안전하게 사용할 수 있는지 파악하기가 어렵습니다.

Flexbox 간격

문제가 있는 속성의 예로 gap 속성을 들 수 있습니다. 이 속성을 사용하면 그리드 또는 플렉스 항목 간에 간격을 만들거나 multicol 컨테이너의 열 간에 간격을 만들 수 있습니다. 멀티콜에 column-gap가 오래 전부터 있었지만 이 속성은 grid-column-gapgrid-row-gap와 함께 그리드 레이아웃에 처음 grid-gap로 표시되었습니다.

그리드 레이아웃이 브라우저에 적용된 직후 이 속성의 이름은 row-gapcolumn-gap와 함께 gap로 변경되었습니다. 그런 다음 플렉스 레이아웃에서도 작동하도록 지정되었습니다. 이름을 변경하면 동일한 작업을 하는 속성이 여러 개가 되지 않습니다.

.box {
  display: flex;
  gap: 1em;
}

Firefox는 2018년 10월에 플렉스 레이아웃용 속성을 출시했습니다. 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은 플렉스 레이아웃의 gap 속성을 비롯한 여러 기능에 대한 지원 격차를 해소하는 데 도움이 되었습니다. 올해 Interop 2022에서는 15가지 기능에 중점을 두고 있으며, 그중 일부는 이미 진행되고 있습니다.

상호 운용성 2022 대시보드에서 진행 상황을 확인할 수 있습니다.

메시지

두 번째 문제는 web.dev 및 developer.chrome.com에서 기능을 설명할 때 도움이 필요한 문제입니다. Google 콘텐츠를 읽을 때 기능의 상태가 명확하게 표시되고 지원 문제를 해결하는 데 실용적인 방법을 제공하고자 합니다.

YouTube는 여러 가지 기본 과정을 출시했으며 앞으로 더 많은 과정을 제공할 예정입니다. 이 과정에서는 핵심 웹 플랫폼 기술을 사용하여 최신 웹용으로 빌드하는 방법을 알아봅니다. 체크아웃:

이 사이트에서는 안전하게 사용할 수 있는 콘텐츠에 중점을 두고 있습니다. 아직 완전히 완성된 것은 아니지만 앞으로 몇 개월 내에 실용적인 방향으로 조금씩 변화할 것입니다.

또한 Open Web Docs 프로젝트를 지원하여 오픈 웹 문서에 기여하고 있습니다. 이를 통해 최신 브라우저 호환성 데이터와 함께 MDN에 관한 최고의 문서를 제공할 수 있습니다. 그런 다음 web.dev에서 이 데이터를 사용하여 기능 지원을 표시합니다. 다음은 플렉스 레이아웃에서 현재 지원되는 gap입니다.

브라우저 지원

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1

Chrome의 웹에 대한 비전, Origin 및 개발자 체험판에서 실험 중인 사항에 대해 자세히 알아보려면 자매 사이트인 developer.chrome.com을 방문하세요. 이 사이트의 콘텐츠는 실험용일 수 있으며 현재 Chrome에서만 지원될 수 있지만, 살펴보고 의견을 보내주시면 감사하겠습니다.

지금은 웹에 있어 매우 흥미로운 시기입니다. Google은 웹 개발을 더 재미있고 덜 불편하게 만들기 위해 주요 기능을 더 빠르게 제공하고 존재하는 격차를 명확히 하는 데 도움을 드리고자 합니다.

사진: 크리스토퍼 막시밀리안