브라우저에서 CSS 지원 가이드

모든 사람이 동일한 크기의 화면과 해상도를 사용하는 세상에 살지 않는 것처럼 우리는 우리 사이트를 보는 모든 사람이 동일한 브라우저와 브라우저 버전을 사용하는 세상에 살지 않을 것입니다. 이것은 우리가 사용하고 싶은 것을 지원하지 않는 오래된 브라우저를 다루는 것이 웹 개발자의 일의 일부라는 것을 의미합니다. 그렇긴 하지만 지금은 과거보다 훨씬 나아졌습니다. 이 기사에서는 우리가 직면할 수 있는 다양한 유형의 브라우저 지원 문제를 살펴보겠습니다. 나는 당신에게 그것들을 다루는 몇 가지 방법을 보여줄 것이고, 또한 곧 도움이 될 수 있는 것들도 살펴볼 것입니다.

왜 우리는 이러한 차이점을 가지고 있습니까?

대부분의 브라우저가 Chromium 기반인 세상에서도 이러한 브라우저가 모두 Google Chrome과 동일한 버전의 Chromium을 실행하는 것은 아닙니다. 즉, Vivaldi와 같은 Chromium 기반 브라우저는 Google Chrome 뒤에 있는 몇 가지 버전일 수 있습니다.

물론 최근 몇 년 동안 대부분의 브라우저가 자동으로 스스로 업그레이드하면서 상황이 개선되었지만 사용자가 항상 브라우저를 빠르게 업데이트하는 것은 아닙니다.

새로운 기능이 처음에 브라우저에 들어가는 방식도 있습니다. CSS의 새로운 기능은 CSS Working Group에서 설계하고 완전한 사양은 구현 지침과 함께 브라우저 공급업체에 전달되는 경우가 아닙니다. 사양의 모든 세부 사항을 해결할 수 있는 것은 실험적 구현이 발생한 경우에만 자주 발생합니다. 따라서 기능 개발은 반복적인 프로세스 이며 브라우저가 개발 시 이러한 사양을 구현해야 합니다. 오늘날 구현은 브라우저의 플래그 뒤에서 가장 자주 발생하거나 Nightly 또는 미리 보기 버전에서만 사용할 수 있지만 브라우저에 완전한 기능이 있으면 아직 지원하지 않는 다른 브라우저가 있더라도 모든 사람이 이를 켤 수 있습니다.

이 모든 것은 우리가 원하는 만큼 모든 데스크톱과 휴대폰에서 동시에 마법처럼 기능을 사용할 수 있는 세상에서는 결코 존재하지 않을 것임을 의미합니다. 당신이 전문 웹 개발자라면 당신의 임무는 그 사실을 다루는 것입니다.

버그 대 지원 부족

브라우저 지원과 관련하여 우리가 직면한 세 가지 문제가 있습니다.

1. 기능 지원 없음
   첫 번째 문제(그리고 가장 다루기 쉬운)는 브라우저가 해당 기능을 전혀 지원하지 않는 경우입니다.
2. 브라우저 "버그" 다루기
   두 번째는 브라우저가 해당 기능을 지원한다고 주장하지만 다른 브라우저가 해당 기능을 지원하는 방식과 다른 방식으로 지원하는 경우입니다. 이러한 문제는 최종 결과가 일관되지 않은 동작이기 때문에 "브라우저 버그"라고 부르는 경향이 있습니다.
3. CSS 속성의 부분 지원
   이것은 점점 보편화되고 있습니다. 브라우저가 기능을 지원하지만 한 컨텍스트에서만 발생하는 상황입니다.

브라우저 간의 차이점을 볼 때 처리하는 작업을 이해하는 데 도움이 되므로 이러한 각 문제를 차례로 살펴보겠습니다.

1. 기능이 지원되지 않음

브라우저가 이해하지 못하는 CSS 속성이나 값을 사용하는 경우 브라우저는 이를 무시합니다. 이것은 지원되지 않는 기능을 사용하거나 기능을 구성하여 사용하려고 해도 동일합니다. 브라우저가 CSS의 해당 줄을 이해하지 못하면 그냥 건너뛰고 이해하는 다음 작업으로 넘어갑니다.

CSS의 이 디자인 원칙은 지원하지 않는 브라우저에 나쁜 일이 일어나지 않는다는 것을 알고 새로운 기능을 즐겁게 사용할 수 있다는 것을 의미합니다. 일부 CSS의 경우 순전히 향상으로 사용되기만 하면 됩니다. 기능을 사용하고 해당 기능을 사용할 수 없을 때 경험이 여전히 좋은지 확인하고 그게 전부입니다. 이 접근 방식은 새로운 것을 이해하지 못하는 브라우저에서 새로운 것을 안전하게 사용할 수 있도록 하는 플랫폼의 이 기능을 사용하여 점진적 향상의 기본 아이디어입니다.

사용 중인 기능이 브라우저에서 지원되는지 확인하려면 Can I Use 웹사이트를 참조하세요. 세분화된 지원 정보를 찾을 수 있는 또 다른 좋은 장소는 MDN의 각 CSS 속성에 대한 페이지입니다. 브라우저 지원 데이터는 매우 상세한 경향이 있습니다.

새로운 CSS는 오래된 CSS를 이해합니다

새로운 CSS 기능이 개발되면 기존 CSS와 상호 작용하는 방식에 주의를 기울입니다. 예를 들어, Grid 및 Flexbox 사양에서 display: grid 및 display: flex 가 부동 항목이 그리드 항목이 되거나 다중 열 컨테이너가 그리드로 전환되는 경우와 같은 시나리오를 처리하는 방법에 대해 자세히 설명되어 있습니다. 즉, 특정 동작이 무시되어 지원되지 않는 브라우저의 CSS를 덮어쓰는 데 도움이 됩니다. 이러한 재정의는 MDN의 점진적 향상 및 그리드 레이아웃 페이지에 자세히 설명되어 있습니다.

기능 쿼리로 지원 감지

위의 방법은 사용해야 하는 CSS에 다른 속성이 필요하지 않은 경우에만 작동합니다. 기능을 지원하는 브라우저에서도 해석되는 이전 브라우저용 CSS에 추가 속성을 추가해야 할 수도 있습니다.

이에 대한 좋은 예는 그리드 레이아웃을 사용할 때 찾을 수 있습니다. 그리드 항목이 되는 부동 항목이 모든 부동 동작을 잃는 동안 부동을 사용하여 그리드 레이아웃에 대한 대체를 생성하려는 경우 항목에 백분율 너비와 여백을 추가했을 가능성이 높습니다.

 .grid > .item { width: 23%; margin: 0 1%; } 

이러한 너비와 여백은 부동 항목이 그리드 항목인 경우에도 계속 적용됩니다. 너비는 컨테이너의 전체 너비가 아닌 그리드 트랙의 백분율이 됩니다. 그러면 여백과 지정한 간격이 적용됩니다.

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

고맙게도 CSS에 내장된 기능이 있고 이 상황을 처리하는 데 도움이 되는 최신 브라우저에 구현되어 있습니다. 기능 쿼리를 사용하면 브라우저에서 지원하는 것이 무엇인지 직접 묻고 응답에 따라 조치를 취할 수 있습니다. 장치 또는 화면의 일부 속성을 테스트하는 미디어 쿼리와 마찬가지로 기능 쿼리는 CSS 속성 및 값 지원을 테스트합니다.

지원 테스트

지원 테스트는 가장 간단한 경우이며 @supports 를 사용한 다음 CSS 속성 및 값을 테스트합니다. 기능 쿼리 내부의 콘텐츠는 브라우저가 true로 응답하는 경우에만 실행됩니다. 즉, 기능을 지원하지 않습니다.

지원 없음 테스트

기능을 지원하지 않는 경우 브라우저에 요청할 수 있습니다. 이 경우 기능 쿼리 내부의 코드는 브라우저에서 지원하지 않는 것으로 표시되는 경우에만 실행됩니다.

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

여러 가지에 대한 테스트

지원될 속성이 두 개 이상 필요한 경우 and 를 사용합니다.

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

한 속성 또는 다른 속성에 대한 지원이 필요한 경우 or 를 사용하십시오.

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

테스트할 속성 및 값 선택

사용하려는 모든 속성에 대해 테스트할 필요는 없습니다. 사용하려는 기능에 대한 지원을 나타내는 것일 뿐입니다. 따라서 그리드 레이아웃을 사용하려면 display: grid 를 테스트할 수 있습니다. 앞으로(그리고 브라우저에서 서브그리드 지원이 시작되면) 더 구체적이고 서브그리드 기능을 테스트해야 할 수도 있습니다. 이 경우, 서브그리드 지원을 구현한 브라우저에서만 진정한 응답을 얻기 위해 grid-template-columns: subgrid 를 테스트할 것입니다.

이제 부동 폴백 예제로 돌아가면 기능 쿼리가 이를 정렬하는 방법을 볼 수 있습니다. 우리가 해야 할 일은 브라우저가 그리드 레이아웃을 지원하는지 알아보기 위해 쿼리하는 것입니다. 그렇다면 항목의 너비를 다시 auto 로 설정하고 여백을 0 으로 설정할 수 있습니다.

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

기능 쿼리에 모든 그리드 코드를 포함했지만 그럴 필요는 없습니다. 브라우저가 그리드 속성을 이해하지 못한다면 이를 무시하므로 안전하게 기능 쿼리 외부에 있을 수 있습니다. 이 예제에서 기능 쿼리 내부에 있어야 하는 것은 margin 및 width 속성입니다. 이는 이전 브라우저 코드에 필요하지만 지원 브라우저에서도 적용될 것이기 때문입니다.

캐스케이드 수용

폴백을 제공하는 매우 간단한 방법은 브라우저가 이해하지 못하는 CSS를 무시한다는 사실과 다른 모든 항목이 동일한 특이성을 갖는 경우 요소에 적용되는 CSS 측면에서 소스 순서가 고려된다는 사실을 활용하는 것입니다. .

먼저 해당 기능을 지원하지 않는 브라우저용 CSS를 작성합니다. 그런 다음 브라우저에서 새 코드로 대체 코드 덮어쓰기를 지원한다고 확인하면 사용하려는 속성에 대한 지원을 테스트합니다.

이는 모바일 우선 접근 방식에 따라 반응형 디자인을 위해 미디어 쿼리를 사용할 때 사용할 수 있는 절차와 거의 동일합니다. 이 접근 방식에서는 더 작은 화면에 대한 레이아웃으로 시작한 다음 중단점을 통해 위로 이동할 때 더 큰 화면에 대한 항목을 추가하거나 덮어씁니다.

CSS 기능 쿼리를 사용할 수 있습니까? caniuse.com의 주요 브라우저에서 CSS 기능 쿼리 지원에 대한 데이터입니다.

위의 작업 방식은 기능 쿼리를 지원하지 않는 브라우저에 대해 걱정할 필요가 없다는 것을 의미합니다. Can I Use 에서 볼 수 있듯이 기능 쿼리는 정말 큰 도움이 됩니다. 어떤 버전의 Internet Explorer도 지원하지 않는 뛰어난 브라우저입니다.

그러나 사용하려는 새 기능이 IE에서도 지원되지 않을 수 있습니다. 따라서 현재로서는 거의 항상 지원 없이 브라우저용 CSS를 작성하는 것으로 시작한 다음 기능 쿼리로 테스트합니다. 이 기능 쿼리 는 지원을 테스트해야 합니다.

1. 기능 쿼리를 지원하는 브라우저는 지원이 있는 경우 true를 반환하므로 쿼리 내부의 코드가 사용되어 이전 브라우저의 코드를 덮어씁니다.
2. 브라우저가 기능 쿼리를 지원하지만 테스트 중인 기능이 아닌 경우 false를 반환합니다. 기능 쿼리 내의 코드는 무시됩니다.
3. 브라우저가 기능 쿼리를 지원하지 않으면 기능 쿼리 블록 내부의 모든 것이 무시됩니다. 즉, IE11과 같은 브라우저가 이전 브라우저 코드를 사용하게 되며 이는 정확히 당신이 원하는 것입니다!

2. 브라우저 "버그" 다루기

두 번째 브라우저 지원 문제는 고맙게도 덜 일반적입니다. "What We Wished For"(작년 말에 게시됨)를 읽으면 과거의 좀 더 당혹스러운 브라우저 버그에 대한 약간의 둘러보기를 얻을 수 있습니다. 즉, 모든 소프트웨어에는 버그가 있을 수 있으며 브라우저도 예외는 아닙니다. 그리고 사양 구현의 순환적 특성으로 인해 때때로 브라우저가 무언가를 구현한 다음 사양이 변경되어 이제 업데이트를 발행해야 한다는 사실을 덧붙입니다. 해당 업데이트가 제공될 때까지 브라우저가 서로 다른 작업을 수행하는 상황에 처할 수 있습니다.

기능 쿼리는 브라우저가 지원을 잘못 지원한다고 보고하는 경우 도움이 되지 않습니다. 브라우저가 " 예, 하지만 아마 마음에 들지 않을 것입니다 ."라고 말할 수 있는 모드는 없습니다. 실제 상호 운용성 버그가 나타나면 이러한 상황에서 좀 더 창의적이어야 할 수 있습니다.

버그를 보고 있다고 생각되면 가장 먼저 해야 할 일은 버그를 확인하는 것입니다. 때때로 버그가 있는 동작과 브라우저가 다른 작업을 수행하는 것을 볼 때 잘못은 우리에게 있습니다. 잘못된 구문을 사용했거나 형식이 잘못된 HTML의 스타일을 지정하려고 할 수 있습니다. 이러한 경우 브라우저는 무언가를 시도합니다. 그러나 설계된 대로 언어를 사용하지 않기 때문에 각 브라우저는 다른 방식으로 대처할 수 있습니다. HTML과 CSS가 유효한지 빠르게 확인하는 것은 훌륭한 첫 번째 단계입니다.

그 시점에서 나는 아마도 빠른 검색을 하고 내 문제가 이미 널리 이해되었는지 확인했을 것입니다. Flexbugs 및 Gridbugs와 같은 알려진 문제의 저장소가 있습니다. 그러나 잘 선택된 몇 개의 키워드만 스택 오버플로 게시물이나 주제를 다루는 기사를 표시할 수 있으며 해결 방법을 제공할 수 있습니다.

그러나 버그의 원인이 무엇인지 실제로 알지 못한다고 가정해 보겠습니다. 이로 인해 솔루션을 찾기가 상당히 어렵습니다. 따라서 다음 단계는 문제의 축소된 테스트 사례를 만드는 것입니다. 즉, 버그를 유발하는 정확한 원인을 식별하는 데 도움이 되도록 관련 없는 모든 것을 제거합니다. CSS 버그가 있다고 생각되면 JavaScript를 제거하거나 프레임워크 외부에서 동일한 스타일을 다시 만들 수 있습니까? 나는 종종 CodePen을 사용하여 내가 보고 있는 것의 축소된 테스트 케이스를 팝니다. 이것은 내가 질문해야 할 경우 다른 사람과 쉽게 공유할 수 있는 방식으로 코드를 제공한다는 추가 이점이 있습니다.

대부분의 경우 문제를 파악하고 나면 원하는 결과를 얻을 수 있는 다른 방법을 생각할 수 있습니다. 다른 사람이 교활한 해결 방법을 생각해 냈거나 제안을 요청하기 위해 어딘가에 게시할 수 있습니다.

즉, 브라우저 버그가 있다고 생각하고 동일한 문제에 대해 이야기하는 다른 사람을 찾을 수 없다면 보고해야 할 새로운 것을 발견했을 가능성이 큽니다. 최근에 출시된 모든 새로운 CSS로 인해 사람들이 CSS의 다른 부분과 함께 사용하기 시작하면 문제가 나타날 수 있습니다.

이러한 문제를 보고하는 방법에 대한 Lea Verou의 게시물인 “Help Community! 브라우저 버그를 신고하세요!”. 이 기사에는 축소된 테스트 케이스를 만드는 데 유용한 팁도 있습니다.

3. CSS 속성의 부분 지원

세 번째 유형의 문제는 최신 CSS 사양이 설계된 방식으로 인해 더 일반적이 되었습니다. Grid Layout 및 Flexbox에 대해 생각하면 이러한 사양은 모두 Box Alignment Level 3의 속성과 값을 사용하여 정렬을 수행합니다. 따라서 align-items , justify-content 및 column-gap 과 같은 속성은 Grid 및 Flexbox 및 기타 레이아웃 방법에서 모두 사용되도록 지정됩니다.

그러나 글을 쓰는 시점에서 gap 속성은 모든 그리드 지원 브라우저의 그리드 레이아웃에서 작동하고 column-gap 은 Multicol에서 작동합니다. 그러나 Firefox만이 Flexbox에 대해 이러한 속성을 구현했습니다.

여백을 사용하여 Flexbox에 대한 대체를 만든 다음 column-gap 을 테스트하고 여백을 제거하면 Grid 또는 multicol에서 column-gap 을 지원하는 브라우저에서 상자 사이에 공간이 없으므로 대체 간격은 다음과 같습니다. 제거됨.

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

이것은 기능 쿼리의 현재 제한 사항입니다. 다른 기능의 기능 지원을 테스트할 방법이 없습니다. 위와 같은 상황에서 브라우저에게 묻고 싶은 것은 "Flexbox에서 column-gap을 지원합니까?"입니다. 이렇게 하면 부정적인 응답을 받을 수 있으므로 대체를 사용할 수 있습니다.

CSS 조각화 속성 break-before , break-after 및 break-inside 에도 유사한 문제가 있습니다. 페이지가 인쇄될 때 더 나은 지원을 제공하므로 브라우저에서 지원을 요청하는 경우가 많습니다. 그러나 multicol 지원을 테스트하는 경우 거짓 긍정으로 보이는 결과가 나타납니다. 이 문제에 대해 CSS 작업 그룹에서 문제를 제기했지만 쉽게 해결할 수 있는 문제는 아닙니다. 생각이 있으면 거기에 추가하십시오.

선택기 지원 테스트

현재 기능 쿼리는 CSS 속성 및 값에 대해서만 테스트할 수 있습니다. 우리가 테스트하고 싶은 또 다른 것은 선택기 사양의 레벨 4에 있는 것과 같은 새로운 선택기의 지원입니다. 설명 메모와 이를 달성할 기능 쿼리의 새 기능에 대한 Firefox Nightly의 플래그 뒤에 구현이 있습니다.

Firefox에서 about:config 를 방문하여 layout.css.supports-selector.enabled 플래그를 활성화하면 다양한 선택기가 지원되는지 테스트할 수 있습니다. 예를 들어 :has 선택기를 테스트하기 위한 구문은 현재 매우 간단합니다.

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

이것은 개발 중인 사양이지만, 우리가 말하는 동안 브라우저 지원의 항상 존재하는 문제를 관리하는 데 도움이 되는 기능이 어떻게 추가되고 있는지 볼 수 있습니다.

추가 읽기

기능을 사용하려고 할 때 하나의 주요 브라우저에서 지원하지 않거나 다른 방식으로 작동하는 것처럼 보일 때 좌절감을 느낄 수 있습니다. 도움이 될 만한 실용적인 추가 자료를 모았습니다.

• "CSS 그리드 사용: 그리드가 없는 브라우저 지원" 이전 브라우저 및 CSS 그리드를 처리하기 위한 옵션
• 기능 쿼리에 대한 "기능 쿼리" MDN 참조 페이지
• "CSS Grid And Progressive Enhancement" 그리드 점진적 향상에 대한 MDN 가이드
• "Flexbox의 이전 버전과의 호환성" 이전 접두어 구현에 대한 세부 정보를 포함하여 Flexbox 지원에 대한 MDN 가이드
• "패턴 라이브러리 우선" 패턴 라이브러리 를 사용하여 대체 코드를 관리하는 방법