丸い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は動く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、末尾改行<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は動く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、末尾改行<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を出力するようにしてください。