CSS if(): 스마트한 스타일링을 위한 인라인 조건
출처: Dev.to
원래 danholloran.me에 게시되었습니다.
모든 CSS 개발자가 한 번쯤 겪는 순간이 있습니다. 뷰포트 너비, 사용자 선호도, 커스텀 프로퍼티 등 어떤 조건에 따라 단일 속성을 조정하고 싶지만, 깔끔한 한 줄 코드 대신 새로운 @media 블록을 만들고, 선택자를 중복시키며, 경우에 따라 가장자리 케이스를 처리하기 위해 약간의 JavaScript까지 넣게 됩니다. 동작은 하지만 절대 옳게 느껴지지는 않죠.
if() 함수가 그 문제를 해결합니다. Chrome 137에 도입된 이 함수는 인라인 조건 로직을 속성 선언 안으로 직접 가져와, 속성 자체를 떠나지 않고도 분기 스타일 로직을 표현할 수 있게 해줍니다.
문법
조건‑값 쌍을 위에서 아래로 순차적으로 평가하여 일치하는 것이 있으면 적용합니다.
property: if(condition: value; else: fallback);함수는 세 가지 종류의 조건을 지원합니다.
style()— 계산된 CSS 커스텀 프로퍼티 값을 조회media()— 인라인 미디어 쿼리 실행supports()— CSS 속성이나 구문을 기능 감지
else 로 체이닝할 수 있습니다.
button {
padding: if(media(width >= 1024px): 0.5rem 1.5rem; else: 0.75rem 1.25rem);
}위 코드는 추가 @media 블록 없이 반응형 패딩 규칙을 구현한 예시입니다.
포인터 미디어 피처 활용
마우스 사용자와 터치스크린 사용자를 구분할 수 있습니다. 접근성을 위한 최소 탭 대상은 44 px이며, 마우스 사용자는 더 작게 설정할 수 있습니다.
.icon-button {
width: if(media(any-pointer: fine): 32px; else: 44px);
height: if(media(any-pointer: fine): 32px; else: 44px);
}예전이라면 @media (any-pointer: coarse) 블록을 별도로 작성해야 했지만, 이제는 한 속성 안에 두 상태를 명시하는 형태가 됩니다.
커스텀 프로퍼티와 디자인 토큰
디자인 토큰—테마 플래그, 컴포넌트 변형, 상태 값—을 전달하기 위해 커스텀 프로퍼티를 자주 사용합니다. style() 쿼리를 이용하면 인라인으로 분기할 수 있습니다.
.status-badge {
--status: pending;
background: if(
style(--status: complete): #22c55e; style(--status: error): #ef4444;
else: #f59e0b
);
color: if(style(--status: complete): #fff; else: #111);
}--status 를 캐스케이드 어디에서든(데이터 속성, 부모 클래스, JavaScript 등) 설정하면 배지는 규칙 자체를 수정하지 않아도 자동으로 변합니다.
기능 감지와 @supports 대체
이전에는 @supports 래퍼 블록을 만들어 일반 규칙을 복제해야 했습니다. 인라인에서는 훨씬 간결합니다.
.hero {
background-color: if(
supports(color: oklch(0.7 0.2 180)): oklch(0.7 0.2 180);
else: hsl(180deg 40% 55%)
);
}최신 브라우저는 인지적으로 균일한 oklch 색상을, 구형 브라우저는 안전한 hsl 폴백을 하나의 선언만으로 받게 됩니다.
지원 현황 (2026년 중반 기준)
- Chrome 137+, Edge, Opera (Chromium 기반) 지원
- Firefox 지원 진행 중
- Safari는 2026‑2027년에 도입 예정
따라서 아직 구조적인 부분에 if() 를 의존해서는 안 됩니다.
권장 사용 패턴
안전한 기본값을 먼저 작성하고, @supports 가드 뒤에 if() 를 레이어링합니다.
/* 모든 브라우저에 대한 안전한 기본값 */
.card {
padding: 1rem;
}
/* if() 를 지원하는 브라우저에 대한 향상된 패딩 */
@supports (padding: if(media(width >= 768px): 1.5rem; else: 1rem)) {
.card {
padding: if(media(width >= 768px): 1.5rem; else: 1rem);
}
}현재는 다소 중복돼 보이지만, 기능이 표준이 되면 @supports 블록은 자연스럽게 사라집니다. 이는 CSS 스크롤‑드리븐 애니메이션이나 앵커 포지셔닝이 지원이 확대될 때 사용했던 점진적 향상 패턴과 동일합니다.
언제 사용하면 좋은가?
if() 가 @media 블록을 완전히 대체하지는 않습니다. 복잡한 브레이크포인트 로직을 다수의 속성에 적용할 때는 전용 규칙이 더 가독성이 좋습니다. 하지만 다음과 같은 작은 조건부 경우에 강력합니다.
- 터치 대상 크기 조정
- 상태 플래그에 따른 색상 교체
- 최신 색 공간이 사용 가능할 때 팔레트 업그레이드
마무리
이 기능은 아직 실험 단계이므로, 브라우저 지원이 확대될수록 MDN 문서와 CSS‑Tricks 보도를 꾸준히 확인하세요. 하지만 이미 Chrome 137+ 환경에서 개발 중이라면, 위험도가 낮고 점진적으로 향상시킬 수 있는 부분에 적용해 보면서 어떻게 작동하는지 체험해 보는 것이 좋습니다.
이 글은 원래 danholloran.me에 게시되었습니다. 더 많은 프론트엔드·개발 콘텐츠는 해당 사이트를 팔로우하세요.