CSS random(), 모든 브라우저에서 먼저 써보는 폴리필 접근

컨페티, 흩뿌려진 별, 제각각인 애니메이션 지연. 지금까지 이런 연출의 '무작위'는 거의 자바스크립트 몫이었다. CSS-Tricks가 소개한 글은 Safari에만 들어와 있는 CSS random()을 폴리필로 다른 브라우저에서도 미리 써보자고 제안한다. 스타일로 풀 수 있는 문제는 스타일에 맡기자는 '가장 약한 언어' 원칙이 출발점이다. 다만 스펙이 아직 초기 단계라 지금 도입하려면 한계를 알고 가야 한다.

"The syntax is surprisingly intricate, mostly because of elaborate random caching and keying semantics."CSS-Tricks

무슨 일인가

폴리필의 핵심 아이디어는 커스텀 프로퍼티가 값을 거의 검증하지 않는다는 성질을 이용하는 것이다. --random 접두어가 붙은 프로퍼티에 파싱되지 않은 random() 식을 그대로 담아 두면, 네이티브 지원이 없는 브라우저에서는 스크립트가 그 식을 읽어 계산하고 인라인 스타일로 되돌려 넣는다. 계산에는 @csstools/css-calc 라이브러리를 쓰고, 지원 여부를 먼저 감지해 깜빡임을 줄이려고 대상 요소를 잠시 숨긴다. 한계도 분명하다. 페이지 로드 시점에 계산된 스타일만 처리하므로 동적으로 바뀌는 값에는 별도 처리가 필요하다.

여러 시각

같은 주에 CSS 신기능을 다루는 글들을 나란히 보면 '실험 기능을 얼마나 일찍 쓸 것인가'에 대한 온도차가 보인다.

• CSS-Tricks (폴리필 글) — 표현력이 필요한 곳에서는 지금 폴리필로 시작하되, 스펙에 큰 변경이 올 수 있음을 전제로 삼는다.
• CSS-Tricks (What's !important #18) — named-feature()처럼 아주 구체적인 기능의 지원 여부를 CSS에서 직접 묻는 흐름을 소개한다. 일찍 쓰되 안전하게 쓰기 위한 감지 수단이 함께 자라고 있다는 관점이다.

왜 중요한가

무작위 값은 단순한 장식 같지만, 그동안 UI 코드에서 스타일과 로직의 경계를 흐리게 만든 대표적인 이유였다. 이를 CSS 안에서 선언적으로 해결할 수 있으면 레이아웃 코드가 줄고, 서버 렌더링이나 접근성 설정(모션 감소)과의 충돌도 줄어든다. 한편 캐싱과 키 규칙이 복잡하다는 것은 같은 요소가 새로고침마다 같은 값을 가져야 하는지 같은 설계 질문이 아직 열려 있다는 뜻이다. 폴리필은 편의 도구이면서 동시에 스펙을 미리 시험해 보는 장치다.

실무 적용

• 장식성 무작위 효과는 폴리필 위에서 시작하고, 핵심 기능이나 레이아웃은 무작위에 의존하지 않게 한다.
• 네이티브 지원이 들어오면 걷어낼 수 있도록 --random 접두어 규칙을 한곳에 모아 둔다.
• prefers-reduced-motion 조건에서는 무작위 애니메이션을 꺼서 접근성을 지킨다.

Kenny의 관점

프론트엔드에서 '언제 쓸 것인가'는 기능 자체보다 철수 비용이 결정한다고 본다. 이 폴리필은 걷어내기 쉬운 구조라는 점에서 좋은 사례다. 접두어 하나로 영역이 분리되고, 네이티브가 오면 스크립트만 지우면 된다. 새 CSS 기능을 도입할 때 저는 폴리필의 성능보다 제거 경로가 있는지를 먼저 묻는다. 스펙이 흔들리는 시기에는 그 질문이 가장 값싼 보험이다.

출처

• CSS-Tricks: Let's Use the Emergent CSS random() Function in all the Browsers ↗
• CSS-Tricks: What's !important #18 ↗