flexbox 간격에 대한 조잡한 @supports

문제

Flexbox gap은 매우 편리하지만 비교적 최근에 브라우저에 추가되었으며 @supports를 사용하여 기능 감지를 수행하는 좋은 방법이 없습니다. @supports (gap: 1rem)는 브라우저가 그리드 레이아웃과의 간격을 지원하고 @supports (flex-gap: 1rem) wasn’t in the cards을 추가하는 경우 거짓 긍정이 됩니다.

You can run a bit of Javascript and add a class 예전 Modernizr 시절과 비슷하지만 @supports의 우아함에 익숙해지면 너무 어색하게 느껴집니다.

트릭

@supports selector()는 flexbox gap과 거의 동일한 지점에서 브라우저에 진입했으며, 이는 flex gap 지원을 위한 대략적인 프록시로 사용할 수 있음을 의미합니다. 간격 값[1]을 정의하고 이를 gap가 있는 플렉스 컨테이너에 추가하고 그 절반을 컨테이너의 자식에 마진으로 추가합니다. 이 값은 @supports selector() [2] 내부에서 제거합니다.

$gap: 1rem;

.flex {
    display: flex;
    flex-wrap: wrap;

    gap: $gap;

    > * {
        margin: $gap * 0.5;
        @supports selector(:first-child) {
            margin: 0;
        }
    }
}

캐치

support flex gap 및 do not support @supports selector() 브라우저는 간격과 폴백 마진을 모두 적용하여 간격을 두 배로 늘립니다. 이는 브라우저의 최소 0.23% 및 최대 2.41%[3]에서 발생합니다.

추가 브라우저 지원 정보
caniuse에 따르면 다음과 같은 경우 확실히 위음성이 될 것입니다.

크롬 83 (0.13%)

Edge 83(0.00%, 0.005%라고 함)

오페라 69-72 (~0.01%)

삼성인터넷13 (0.09%)

확실한 위음성 양: 0.235%
@supports selector()에 대한 지원이 알 수 없음으로 표시되므로 훨씬 더 많은 비율의 브라우저에서 위음성이 될 수 있습니다.

오페라 미니 (1.08%)

UC 브라우저 (0.85%)

QQ 브라우저 (0.17%)

Baidu 브라우저(0.00%, 0.005%라고 함)

KaiOS 브라우저 (0.07%)

가능한 위음성의 양: 2.175%

거짓음성의 최대 가능성: 2.41%

해결책

요소 사이의 약간의 공간은 세상에서 가장 나쁜 것은 아니지만 디자인에 정말 바람직하지 않은 경우 내부에 간격 선언을 래핑하는 것이 좋습니다@supports selector().

$gap: 1rem;

.flex {
    display: flex;
    flex-wrap: wrap;

    > * {
        margin: $gap * 0.5;
    }

    @supports selector(:first-child) {
        gap: $gap;

        > * {
            margin: 0;
        }
    }
}

Sass 믹스인으로

@mixin flex-gap($gap: 1.25em) {
    $gap-half: calc(#{$gap} * 0.5);

    @if type-of($gap) == "number" {
        $gap-half: $gap * 0.5;
    } @else if type-of($gap) == "list" {
        $gap-half: ();
        @each $value in $gap {
            $value-half: calc(#{$value} * 0.5);
            @if type-of($value) == "number" {
                $value-half: $value * 0.5;
            }
            $gap-half: append($gap-half, $value-half);
        }
    }

    > * {
        margin: $gap-half;
    }

    @supports selector(:first-child) {
        gap: $gap;

        > * {
            margin: 0;
        }
    }
}

.flex-gap-test-cases {
    @include flex-gap(1em);
    @include flex-gap(var(--gap));
    @include flex-gap(1em 0.5em);
    @include flex-gap(var(--gap-sm) 1.5em);
}

CSS 사용자 정의 속성을 사용할 수 있지만 Sass 변수 또는 일반 숫자를 사용하면 더 오래된 브라우저를 다룰 수 있습니다. ↩︎

나는 :first-child 와 함께 갔지만 선택기는 잘 지원되는 한 실제로 중요하지 않습니다. ↩︎

2022년 5월 11일 caniuse’s usage table에서 가져온 기능 지원 정보 및 브라우저 사용 통계. ↩︎