이 페이지는 Cloud Translation API를 통해 번역되었습니다.

격차 줄이기

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

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월에 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 레이아웃의 갭 속성을 비롯한 여러 기능에서 지원 격차를 줄이는 데 도움이 되었습니다. 올해 Interop 2022 기능은 15가지 기능에 초점을 맞추고 있으며, 이 중 일부는 이미 움직임이 나오고 있습니다.

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

메시지

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

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

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

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

브라우저 지원

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

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

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