미래 CSS: when 및 else 문에 대한 첫 번째 살펴보기

CSS에서는 미디어 쿼리를 사용하여 다양한 장치를 선택합니다. 미디어 쿼리를 사용하면 화면 크기, 픽셀 밀도 또는 형식(예: 인쇄 또는 화면)과 같은 다양한 조건을 기반으로 장치를 쉽게 선택할 수 있습니다.

이것은 시간이 지남에 따라 점점 더 복잡해졌으며 이제 우리는 종종 서로 충돌하는 많은 조건의 균형을 맞추고 있습니다.

새로운 CSS Conditional Rules 5 Specification은 @when 및 @else 미디어 쿼리를 수행하는 두 가지 새로운 방법을 도입하여 이 문제를 해결하려고 합니다. 최종적으로 바닐라 CSS에서 직접 조건문을 만들 수 있습니다. 어떻게 작동하는지 살펴봅시다!

@언제/지원

현재 기본적으로 @when/@else 를 지원하는 브라우저는 없지만 곧 변경될 것입니다. @when/@else에 대한 전체 지원은 아래와 같습니다.

CSS에서 @when/ 사용하기

display: flex 를 지원하는 너비가 780px 미만인 화면 크기에 적용하려는 규칙 세트와 그 외에 다른 모든 것에 적용해야 하는 규칙 세트가 있다고 가정해 보겠습니다. 이전에는 @media 쿼리를 사용하여 두 항목을 개별적으로 선택해야 했습니다. 이것은 여러 가지 다른 것을 선택할 때 약간 지저분해졌습니다. @when 및 @else를 사용하면 다음과 같습니다.

@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}

여러 조건을 연결할 수도 있습니다. 예를 들어 display: flex 를 지원하는 최대 너비가 780px인 화면, display: flex 를 지원하는 더 큰 화면 및 기타 모든 것의 세 가지 시나리오가 있다고 가정해 보겠습니다. 이 경우 여러 조건이 있을 수 있습니다.

@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else screen and supports(display: flex) {
    .my-element {
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}

예상한 대로 더 많은 @else 문을 가질 수 있지만 위의 내용은 CSS에서 구현될 때 @when 및 @else가 얼마나 유용한지에 대한 아이디어를 제공합니다.

결론

조건문은 기존 CSS에 포함된 적이 없으므로 마침내 곧 제공될 예정입니다. 또한 미디어 쿼리를 만드는 방법을 크게 단순화할 것입니다. SASS와 같은 타사 패키지를 사용하는 경우 이미 CSS에 논리가 있지만 기본적으로 CSS에 제공되는 경우 전처리기를 사용하거나 이 추가 기능을 사용하여 빌드할 필요가 없습니다.