@function — CSS의 Native Custom Function — 2026년 24주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 24-2026
article
@function — CSS의 Native Custom Function
TAG: CSS 함수
CSS Functions and Mixins Module Level 1의 @function at-rule를 통해 CSS가 네이티브 사용자 정의 함수를 지원하게 되었습니다. Sass나 빌드 타임 전처리기가 더 이상 필요하지 않습니다. 함수는 기본값이 있는 타입 지정 매개변수를 받고, 로컬 변수를 정의하며, 조건부 @media 블록을 포함할 수 있습니다. 스코핑 모델은 동적 방식으로, 로컬 변수가 매개변수를 섀도잉하고, 매개변수는 호출 지점의 custom property를 섀도잉합니다. Chromium 139에서 @function 지원이 추가되었으며, Firefox와 Safari는 아직 미지원입니다. 정적 clamp() 폴백에 @function 호출을 이어 쓰는 캐스케이드 기반 progressive enhancement 패턴을 사용하면 CSSOM 파싱 타임 필터링 덕분에 이중 연산을 피할 수 있습니다.
css-expect: CSS Custom Function용 브라우저 기반 Unit Test
TAG: 테스팅
css-expect는 네이티브 CSS @function 규칙을 실제 브라우저 엔진으로 테스트하는 첫 번째 베타 assertion 라이브러리입니다. Sass True에서 영감을 받아 Playwright로 Chromium 인스턴스를 실행하고, CSS 파일을 실제 문서에 로드하며, 각 assertion마다 임시 규칙을 생성하고 getComputedStyle()로 연산된 값을 읽어옵니다. css.function("--double", ["4px"]).as("inline-size").equals("8px")처럼 플루언트하게 체이닝되며, .with({ "--gap": "2px" })로 호출 지점의 custom property를 주입해 동적 스코핑 동작을 테스트할 수 있습니다. Vitest와 직접 통합되며, unsupported: "skip" 모드로 @function 미지원 브라우저에서 안전하게 건너뛸 수 있습니다.
WebKit 팀이 CSS Grid Lanes의 인터랙티브 참고 가이드를 gridlanes.webkit.org에 공개했습니다. 가이드는 waterfall과 brick 레이아웃 전환, flow-tolerance 슬라이더 조작, 탭 순서 재생을 통한 접근성 확인이 가능한 라이브 편집 플레이그라운드를 제공합니다. 치트시트는 display: grid-lanes, fr 단위, minmax(), repeat(), auto-fill 대 auto-fit, gap, 트랙 스패닝, 명시적 배치 등 모든 속성과 값을 다룹니다. Photos, Recipes, Newspaper, Mega Menu, Timeline, Pinboard 등 6가지 데모에는 Flexbox, Multicolumn, Grid와의 레이아웃 비교 패널이 포함되어 있습니다. Grid Lanes는 현재 Safari 26.4 이상에서 작동합니다.
Apple의 Liquid Glass는 iOS 26의 새로운 디자인 소재로, 탭 바나 위젯 같은 UI 크롬에 GPU 가속 실시간 반투명 및 굴절 효과를 제공합니다. Callstack은 React Native 개발자가 첫날부터 이 효과를 사용할 수 있도록 @callstack/liquid-glass 오픈소스 라이브러리를 출시했습니다. 라이브러리는 인터랙티브 터치 효과, effect 스타일(clear vs regular), tintColor 오버레이, colorScheme props를 갖춘 LiquidGlassView와 spacing prop으로 제어되는 morphing 애니메이션으로 인접한 glass 요소를 합치는 LiquidGlassContainerView를 제공합니다. isLiquidGlassSupported 플래그로 iOS 26 미만 및 Android에서 폴백 스타일링이 가능합니다.
Grid Lane을 활용한 Progressive Enhancement Data-dense Layout
TAG: 레이아웃
Project Wallace의 CSS 분석기 페이지는 예측 불가능한 수십 개의 지표를 표시하여 보고서가 드문 경우 많은 빈 공간이 생깁니다. Bart Veneman은 @supports를 이용한 3단계 progressive enhancement로 이 문제를 해결했습니다. display: grid-lanes를 지원하는 브라우저는 최신 masonry 레이아웃을, grid-template-rows: masonry만 지원하는 브라우저는 레거시 Firefox 문법을, 그 외 브라우저는 minmax(24rem, 1fr) 컬럼의 표준 auto-fit 그리드를 사용합니다. 부정 가드로 두 기능을 모두 지원하는 브라우저에서 레거시 문법이 활성화되지 않도록 방지합니다. JavaScript 없이 브라우저 지원 범위에서 뷰포트를 눈에 띄게 더 밀도 있게 만들었습니다.
WebKit 팀은 WWDC26에서 Safari 27의 주요 기능을 다루는 6개 세션을 발표했습니다. Grid Lanes는 flow-tolerance를 통한 접근성 제어와 함께 waterfall 및 brick 방향의 CSS 전용 masonry를 Safari에 도입합니다. Customizable Select는 appearance: base-select를 도입하여 네이티브 접근성 시맨틱을 유지하면서 ::picker(select), ::picker-icon, ::checkmark 의사 요소에 대한 완전한 CSS 제어를 제공합니다. model 요소는 iOS, iPadOS, macOS Safari 27에 environmentmap, stagemode="orbit", JavaScript 애니메이션 API와 함께 도입됩니다. visionOS 27에서는 Immersive API가 model을 완전한 공간 환경으로 확장합니다. Web Extensions 패키징은 이제 Xcode나 Mac 없이 어떤 OS의 브라우저에서도 App Store Connect를 통해 제출할 수 있습니다.
이 Coding2GO 영상은 실용적이고 친근한 예제로 CSS @function at-rule을 설명합니다. OKLCH 형식의 상대적 색상 구문과 파라메트릭 alpha 값을 사용하는 투명도 헬퍼를 시연하며, color, number 같은 꺾쇠 괄호 타입의 타입 지정 매개변수, 선택적 기본값, number 또는 percentage 같은 유니온 타입을 위한 type() 함수를 다룹니다. JavaScript와의 핵심 개념 차이를 설명합니다: result 디스크립터는 조기 반환이 아니라 CSS가 전체 함수 본문을 계속 평가하고 마지막으로 매칭된 result가 적용됩니다. 마지막으로 inner-radius 함수를 통해 max()를 사용해 음수 값을 방지하는 outer-radius-minus-padding 공식 캡슐화를 보여줍니다.
CSS Functions and Mixins Module Level 1의 @function at-rule를 통해 CSS가 네이티브 사용자 정의 함수를 지원하게 되었습니다. Sass나 빌드 타임 전처리기가 더 이상 필요하지 않습니다. 함수는 기본값이 있는 타입 지정 매개변수를 받고, 로컬 변수를 정의하며, 조건부 @media 블록을 포함할 수 있습니다. 스코핑 모델은 동적 방식으로, 로컬 변수가 매개변수를 섀도잉하고, 매개변수는 호출 지점의 custom property를 섀도잉합니다. Chromium 139에서 @function 지원이 추가되었으며, Firefox와 Safari는 아직 미지원입니다. 정적 clamp() 폴백에 @function 호출을 이어 쓰는 캐스케이드 기반 progressive enhancement 패턴을 사용하면 CSSOM 파싱 타임 필터링 덕분에 이중 연산을 피할 수 있습니다.
이 Coding2GO 영상은 실용적이고 친근한 예제로 CSS @function at-rule을 설명합니다. OKLCH 형식의 상대적 색상 구문과 파라메트릭 alpha 값을 사용하는 투명도 헬퍼를 시연하며, color, number 같은 꺾쇠 괄호 타입의 타입 지정 매개변수, 선택적 기본값, number 또는 percentage 같은 유니온 타입을 위한 type() 함수를 다룹니다. JavaScript와의 핵심 개념 차이를 설명합니다: result 디스크립터는 조기 반환이 아니라 CSS가 전체 함수 본문을 계속 평가하고 마지막으로 매칭된 result가 적용됩니다. 마지막으로 inner-radius 함수를 통해 max()를 사용해 음수 값을 방지하는 outer-radius-minus-padding 공식 캡슐화를 보여줍니다.
css-expect: CSS Custom Function용 브라우저 기반 Unit Test
css-expect는 네이티브 CSS @function 규칙을 실제 브라우저 엔진으로 테스트하는 첫 번째 베타 assertion 라이브러리입니다. Sass True에서 영감을 받아 Playwright로 Chromium 인스턴스를 실행하고, CSS 파일을 실제 문서에 로드하며, 각 assertion마다 임시 규칙을 생성하고 getComputedStyle()로 연산된 값을 읽어옵니다. css.function("--double", ["4px"]).as("inline-size").equals("8px")처럼 플루언트하게 체이닝되며, .with({ "--gap": "2px" })로 호출 지점의 custom property를 주입해 동적 스코핑 동작을 테스트할 수 있습니다. Vitest와 직접 통합되며, unsupported: "skip" 모드로 @function 미지원 브라우저에서 안전하게 건너뛸 수 있습니다.
WebKit 팀이 CSS Grid Lanes의 인터랙티브 참고 가이드를 gridlanes.webkit.org에 공개했습니다. 가이드는 waterfall과 brick 레이아웃 전환, flow-tolerance 슬라이더 조작, 탭 순서 재생을 통한 접근성 확인이 가능한 라이브 편집 플레이그라운드를 제공합니다. 치트시트는 display: grid-lanes, fr 단위, minmax(), repeat(), auto-fill 대 auto-fit, gap, 트랙 스패닝, 명시적 배치 등 모든 속성과 값을 다룹니다. Photos, Recipes, Newspaper, Mega Menu, Timeline, Pinboard 등 6가지 데모에는 Flexbox, Multicolumn, Grid와의 레이아웃 비교 패널이 포함되어 있습니다. Grid Lanes는 현재 Safari 26.4 이상에서 작동합니다.
Apple의 Liquid Glass는 iOS 26의 새로운 디자인 소재로, 탭 바나 위젯 같은 UI 크롬에 GPU 가속 실시간 반투명 및 굴절 효과를 제공합니다. Callstack은 React Native 개발자가 첫날부터 이 효과를 사용할 수 있도록 @callstack/liquid-glass 오픈소스 라이브러리를 출시했습니다. 라이브러리는 인터랙티브 터치 효과, effect 스타일(clear vs regular), tintColor 오버레이, colorScheme props를 갖춘 LiquidGlassView와 spacing prop으로 제어되는 morphing 애니메이션으로 인접한 glass 요소를 합치는 LiquidGlassContainerView를 제공합니다. isLiquidGlassSupported 플래그로 iOS 26 미만 및 Android에서 폴백 스타일링이 가능합니다.
Grid Lane을 활용한 Progressive Enhancement Data-dense Layout
Project Wallace의 CSS 분석기 페이지는 예측 불가능한 수십 개의 지표를 표시하여 보고서가 드문 경우 많은 빈 공간이 생깁니다. Bart Veneman은 @supports를 이용한 3단계 progressive enhancement로 이 문제를 해결했습니다. display: grid-lanes를 지원하는 브라우저는 최신 masonry 레이아웃을, grid-template-rows: masonry만 지원하는 브라우저는 레거시 Firefox 문법을, 그 외 브라우저는 minmax(24rem, 1fr) 컬럼의 표준 auto-fit 그리드를 사용합니다. 부정 가드로 두 기능을 모두 지원하는 브라우저에서 레거시 문법이 활성화되지 않도록 방지합니다. JavaScript 없이 브라우저 지원 범위에서 뷰포트를 눈에 띄게 더 밀도 있게 만들었습니다.
WebKit 팀은 WWDC26에서 Safari 27의 주요 기능을 다루는 6개 세션을 발표했습니다. Grid Lanes는 flow-tolerance를 통한 접근성 제어와 함께 waterfall 및 brick 방향의 CSS 전용 masonry를 Safari에 도입합니다. Customizable Select는 appearance: base-select를 도입하여 네이티브 접근성 시맨틱을 유지하면서 ::picker(select), ::picker-icon, ::checkmark 의사 요소에 대한 완전한 CSS 제어를 제공합니다. model 요소는 iOS, iPadOS, macOS Safari 27에 environmentmap, stagemode="orbit", JavaScript 애니메이션 API와 함께 도입됩니다. visionOS 27에서는 Immersive API가 model을 완전한 공간 환경으로 확장합니다. Web Extensions 패키징은 이제 Xcode나 Mac 없이 어떤 OS의 브라우저에서도 App Store Connect를 통해 제출할 수 있습니다.
이번 주 스타일링 분야의 가장 큰 소식은 CSS 네이티브 커스텀 함수의 등장이었습니다. CSS Functions and Mixins Module Level 1의 @function at-rule이 Chromium 139에서 지원되기 시작하면서, 기본값이 있는 타입 지정 파라미터, 로컬 변수, @media 기반 조건부 반환 값 등 런타임에서 Sass 같은 전처리기가 근본적으로 구현할 수 없었던 기능들이 가능해졌습니다. 함께 등장한 css-expect 라이브러리는 Playwright를 활용해 @function 규칙을 Vitest와 직접 통합하여 단위 테스트할 수 있게 해주며, 이 새로운 기능의 테스트 공백을 메웁니다. @supports at-rule(@function) 가드는 Chromium 148에서야 도입되었으므로, 권장 progressive enhancement 패턴은 cascade 기반의 clamp() 폴백 뒤에 @function 호출을 이어 쓰는 방식입니다.
CSS Grid Lanes도 WWDC26 커버리지와 함께 이번 주에 강한 존재감을 드러냈습니다. WebKit 팀은 gridlanes.webkit.org에 인터랙티브 참고 가이드를 공개했으며, waterfall과 brick 레이아웃 모드를 위한 라이브 편집 데모, 접근성 조정을 위한 flow-tolerance 슬라이더, Flexbox·Multicolumn·표준 Grid와 비교하는 Photos, Recipes, Newspaper, Mega Menu, Timeline, Pinboard 등 6가지 실제 레이아웃 데모를 포함합니다. Project Wallace는 JavaScript 없이 Grid Lanes를 활용한 실용적인 3단계 @supports progressive enhancement를 공개했으며, WWDC26 세션에서도 CSS Grid Lanes, appearance: base-select를 이용한 커스터마이즈 가능한 select, Safari 27에 도입되는 model 요소가 집중 조명을 받았습니다.
시각 효과 분야에서는 Callstack이 Apple의 iOS 26 Liquid Glass 소재를 모바일에 구현하는 오픈소스 React Native 라이브러리 @callstack/liquid-glass를 출시했습니다. effect style, tintColor, colorScheme props를 지원하는 LiquidGlassView와 LiquidGlassContainerView 컴포넌트, 구버전 iOS 및 Android를 위한 isLiquidGlassSupported 폴백 플래그를 제공합니다.
Key Takeaways
CSS @function(Chromium 139+)은 타입 지정 파라미터, 로컬 변수, @media 조건부 반환을 갖춘 네이티브 커스텀 함수를 지원하여 많은 Sass 사용 사례를 대체하며, 크로스 브라우저 안전성을 위해 cascade 기반 clamp() 폴백을 권장합니다.
CSS Grid Lanes가 gridlanes.webkit.org(Safari 26.4+)에 포괄적인 인터랙티브 참고 가이드를 갖추면서, @supports 기반 단계적 향상을 통해 JavaScript 없이 masonry 스타일 레이아웃을 구현할 수 있게 되었습니다.
@callstack/liquid-glass 라이브러리는 Apple iOS 26 Liquid Glass 효과를 React Native에 첫날부터 제공하며, LiquidGlassView, LiquidGlassContainerView, isLiquidGlassSupported를 통한 graceful degradation을 지원합니다.
