격차 줄이기

웹용 빌드를 더 쉽게 만들 수 있습니다.

Rachel Andrew

개발자와 개별적으로 또는 CSS 현황과 같은 설문조사를 통해 대화할 때마다 동일한 의견을 듣게 됩니다. 개발자는 브라우저 전반에서 잘 작동하는 웹사이트와 애플리케이션을 만들기 어렵고, 흥미로운 새 기능을 언제 안전하게 사용할 수 있는지 알기 어렵습니다.

Flexbox 간격

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

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

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

Firefox는 2018년 10월에 플렉스 레이아웃의 속성을 제공했습니다. 2020년 7월까지 Chrome에 표시되지 않았으며 2021년 4월에 Safari에 표시되었습니다. 따라서 gap를 안전하게 사용하려면 2년 6개월의 격차가 있었습니다. 실제로 대부분의 개발자는 최신 버전보다 오래된 브라우저 버전을 지원해야 했기 때문에 훨씬 더 오래 기다렸습니다. 플렉스 레이아웃에서 gap 지원은 플렉스 레이아웃에서 간격 지원을 감지하기 위해 기능 쿼리를 사용할 수 없다는 사실로 인해 더욱 문제가 되었습니다. gap 속성은 그리드에서 지원되므로 @supports (gap:1em)는 true를 반환합니다.

또 다른 문제는 새 기능이 한 브라우저에 도입되면 사람들이 이에 대해 이야기하고 데모를 공유하기 시작한다는 것입니다. 이는 기능이 안정적인 브라우저에 전혀 포함되기 훨씬 전에 시작되는 경우가 많습니다. 이로 인해 개발자가 혼란을 느끼거나 최소한 답답함을 느낄 수 있습니다. 새로운 기능이 여기저기서 언급되지만 지원되지 않아 실제로 사용할 수 없다는 사실을 알게 되는 경우가 반복됩니다.

지원에 격차가 있는 이유는 무엇인가요?

이 게시물은 특정 브라우저가 느리다고 비난하는 것이 아닙니다. 다양한 플랫폼 기능을 살펴보면 브라우저마다 선도하는 기능이 다릅니다.

대부분의 기능은 하나의 브라우저에서 프로토타입이 생성됩니다. 예를 들어 그리드 레이아웃 사양은 Microsoft에서 처음 만들었으며 Internet Explorer 10의 초기 양식에 구현되었습니다. Mozilla의 엔지니어가 하위 그리드의 작동 방식을 파악하기 위해 많은 작업을 수행했으므로 이 기능은 Firefox에 먼저 도입되었습니다. Safari에서는 흥미로운 새로운 색상 기능을 선도하고 있습니다.

한 브라우저가 프로토타입을 주도할 수 있지만 CSS 워킹 그룹의 모든 브라우저 (및 기타 조직) 대표는 CSS 기능을 논의합니다. 기능은 모든 브라우저에서 구현할 수 있어야 하며, 한 브라우저에서 구현할 수 없도록 설계해서는 안 됩니다. 이렇게 되면 지원에 영구적인 격차가 발생하고 기능 채택이 부족해집니다.

하지만 기능을 구현할 때는 해당 브라우저의 다른 모든 가능한 기능과 함께 우선순위를 지정해야 합니다. 브라우저를 개선하기 위해 수행해야 하는 다른 작업으로 인해 지연되는 경우도 있습니다. Chromium의 RenderingNG 작업이 좋은 예입니다. 이로 인해 하위 그리드 구현의 길이 열렸습니다. 하지만 Firefox와 Chromium의 하위 그리드 제공 간에 긴 간격이 있는 이유는 먼저 새로운 렌더링 엔진에서 그리드 레이아웃을 다시 구현해야 하기 때문입니다.

문제

여기에는 두 가지 문제가 있습니다. 첫 번째는 상호 운용성 문제입니다. 한 브라우저에 기능이 도입된 시점부터 모든 곳에서 사용할 수 있게 되기까지 오랜 시간이 걸릴 수 있다는 것입니다.

두 번째는 메시지 문제입니다. 지원 격차가 어디에 있는지 명확하게 표시하려면 어떻게 해야 할까요? 모든 사람이 각 기능을 신중하게 조사하여 지원 수준을 파악하지 않아도 되도록 새로운 기능을 공유하려면 어떻게 해야 할까요?

상호 운용성

브라우저는 이미 상호 운용성 문제를 해결하기 위해 협력하고 있습니다. 작년에 호환성 2021을 통해 플렉스 레이아웃의 gap 속성을 비롯한 여러 기능의 지원 격차를 해소할 수 있었습니다. 올해 Interop 2022에서는 15가지 기능에 중점을 두고 있으며, 이미 일부 기능에 대한 작업이 진행되었습니다.

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

메시지

두 번째 문제는 web.dev와 developer.chrome.com에서 기능에 관해 이야기할 때 제가 적극적으로 도와드리고 싶은 부분입니다. 콘텐츠를 읽을 때 기능의 상태가 명확하게 표시되고 지원 문제를 해결할 수 있는 실용적인 방법을 제공해 드리고 싶습니다.

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

Google은 이 사이트의 콘텐츠를 안전하게 사용할 수 있는 항목에 집중하기 위해 노력하고 있습니다. 아직 완전히 실용적인 방향으로 전환되지는 않았지만 앞으로 몇 개월에 걸쳐 실용적인 방향으로 조금씩 변화가 나타날 것입니다.

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

Browser Support

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

Chrome의 웹 비전, 오리진 및 개발자 트라이얼에서 실험 중인 사항에 대해 자세히 알아보려면 자매 사이트인 developer.chrome.com에서 관련 콘텐츠를 확인하세요. 해당 콘텐츠는 실험적이거나 현재 Chrome에서만 지원될 수 있지만, 살펴보시고 의견을 제공해 주시면 감사하겠습니다.

지금은 웹에 있어 정말 흥미로운 시기입니다. Google은 핵심 기능을 더 빠르게 제공하고 존재하는 격차를 명확히 하여 웹 개발을 더 재미있고 덜 답답하게 만들 수 있기를 바랍니다.

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