둥근 polygon, 움직이는 border image, Safari의 새 CSS primitive와 token 기반 cascade layer를 안전한 fallback과 함께 정리합니다. 개발자가 바로 활용할 수 있도록 정리했습니다.
Chrome은 clip-path: polygon(round 10px, ...) 같은 명세 기반 rounded polygon 문법을 지원해 SVG mask나 gradient workaround를 줄입니다. Firefox와 Safari는 현재 이 함수를 무효로 처리해 sharp-corner fallback도 없이 polygon 전체를 버립니다. 안전한 progressive enhancement는 선택적 round 조각을 빈 custom property에 두고 @supports 안에서만 할당합니다. 글은 hole과 overlap을 제어하는 널리 지원된 nonzero와 evenodd fill rule도 보여 줍니다. 두 rule은 polygon(), shape(), path()에 적용됩니다.
Gradient는 border-image-source가 될 수 있고 등록된 custom property는 다루기 어려운 stop과 angle을 animation 가능하게 만듭니다. 첫 예시는 percentage를 등록해 red-to-transparent linear gradient를 0%에서 100%로 이동시켜 border가 그려지는 효과를 냅니다. Conic 예시는 number와 angle을 등록하고 border-image-slice를 1에서 20으로, 회전을 360도까지 움직이며 border-image-repeat: round로 완전한 tile을 맞춥니다. 명시적 transition property는 animation surface를 좁게 유지합니다. Border image가 둥근 border geometry를 따르지 않는 제약 때문에 curved motion에는 mask가 필요할 수 있습니다.
생성된 design token에는 각 component custom property가 들어갈 CSS cascade layer를 portable하게 선언할 방법이 필요합니다. 제안 workflow는 DTCG $extensions에 namespaced layer value를 저장해 compliant tool을 지나는 동안 unknown metadata가 보존되도록 합니다. Top-level cssLayer key는 보존 보장이 없고 collision 위험이 있으며 CSS delivery concern을 cross-platform처럼 보이게 만듭니다. 작은 Style Dictionary format이 extension별 token을 묶어 대응하는 @layer block을 출력합니다. Component style은 unlayered 또는 scoped로 유지해 specificity hack 없이 의도적으로 약한 variable layer를 보존할 수 있습니다.
Safari Technology Preview 250은 text-decoration-inset, white-space-trim, wrap-inside, ::marker의 content, ruby-overhang의 spaces를 지원합니다. Selection decoration, orthogonal writing mode sizing, list marker, scroll snapping과 trailing newline <textarea>의 VoiceOver 문제를 수정합니다. JavaScript에는 Explicit Resource Management, Iterator.zip(), Iterator.zipKeyed()가 추가됩니다. Networking은 streaming fetch() request body와 필수 Request.duplex option을 시험합니다. Technology Preview이므로 stable cross-browser 지원으로 간주하지 말고 향후 동작 검증에 사용해야 합니다.
Chrome은 clip-path: polygon(round 10px, ...) 같은 명세 기반 rounded polygon 문법을 지원해 SVG mask나 gradient workaround를 줄입니다. Firefox와 Safari는 현재 이 함수를 무효로 처리해 sharp-corner fallback도 없이 polygon 전체를 버립니다. 안전한 progressive enhancement는 선택적 round 조각을 빈 custom property에 두고 @supports 안에서만 할당합니다. 글은 hole과 overlap을 제어하는 널리 지원된 nonzero와 evenodd fill rule도 보여 줍니다. 두 rule은 polygon(), shape(), path()에 적용됩니다.
Gradient는 border-image-source가 될 수 있고 등록된 custom property는 다루기 어려운 stop과 angle을 animation 가능하게 만듭니다. 첫 예시는 percentage를 등록해 red-to-transparent linear gradient를 0%에서 100%로 이동시켜 border가 그려지는 효과를 냅니다. Conic 예시는 number와 angle을 등록하고 border-image-slice를 1에서 20으로, 회전을 360도까지 움직이며 border-image-repeat: round로 완전한 tile을 맞춥니다. 명시적 transition property는 animation surface를 좁게 유지합니다. Border image가 둥근 border geometry를 따르지 않는 제약 때문에 curved motion에는 mask가 필요할 수 있습니다.
생성된 design token에는 각 component custom property가 들어갈 CSS cascade layer를 portable하게 선언할 방법이 필요합니다. 제안 workflow는 DTCG $extensions에 namespaced layer value를 저장해 compliant tool을 지나는 동안 unknown metadata가 보존되도록 합니다. Top-level cssLayer key는 보존 보장이 없고 collision 위험이 있으며 CSS delivery concern을 cross-platform처럼 보이게 만듭니다. 작은 Style Dictionary format이 extension별 token을 묶어 대응하는 @layer block을 출력합니다. Component style은 unlayered 또는 scoped로 유지해 specificity hack 없이 의도적으로 약한 variable layer를 보존할 수 있습니다.
Safari Technology Preview 250은 text-decoration-inset, white-space-trim, wrap-inside, ::marker의 content, ruby-overhang의 spaces를 지원합니다. Selection decoration, orthogonal writing mode sizing, list marker, scroll snapping과 trailing newline <textarea>의 VoiceOver 문제를 수정합니다. JavaScript에는 Explicit Resource Management, Iterator.zip(), Iterator.zipKeyed()가 추가됩니다. Networking은 streaming fetch() request body와 필수 Request.duplex option을 시험합니다. Technology Preview이므로 stable cross-browser 지원으로 간주하지 말고 향후 동작 검증에 사용해야 합니다.
Chrome이 명세의 clip-path: polygon()용 round parameter를 지원해 SVG mask나 여러 gradient 없이 둥근 모서리를 만들 수 있게 됐습니다. 다른 engine은 현재 둥근 polygon 전체를 무효화하므로, 선택적 prefix를 custom property에 저장하고 @supports 안에서만 할당해야 기본 polygon이 유지됩니다. 널리 지원되는 nonzero와 evenodd fill rule은 polygon(), shape(), path()에도 적용됩니다.
CSS-Tricks는 gradient 기반 border-image와 등록된 custom property로 stop, slice, conic rotation을 보간합니다. border-image-repeat: round는 온전한 tile을 맞추지만 border image가 둥근 border geometry를 따르지 않는 제약은 남습니다.
Safari Technology Preview 250은 text-decoration-inset, white-space-trim, wrap-inside, ::marker의 content, ruby-overhang의 spaces를 추가합니다. Explicit Resource Management와 streaming fetch() upload도 포함합니다. 실무 원칙은 완전한 baseline을 가진 progressive enhancement입니다. 새 문법을 쓸 수 있을 때 관계를 CSS로 표현하되 핵심 형태·콘텐츠·상호작용이 무효화되게 해서는 안 됩니다.
Design token pipeline도 cascade 정책을 명시할 수 있습니다. Namespaced DTCG $extensions에 CSS layer를 기록하고 Style Dictionary가 custom property를 해당 @layer block으로 묶으면 임의의 top-level key보다 portable하게 metadata를 보존할 수 있습니다.
round 조각은 @supports 뒤에 두고 일반 polygon을 유효하게 유지하십시오.border-image를 움직이기 전에 gradient stop과 angle을 구동하는 custom property를 등록하고 실제 component 형태에서 각진 모서리 제약을 확인하십시오.$extensions에 저장하고 component 작성자가 아니라 token build가 합의한 cascade layer를 출력하게 하십시오.