詳細解説 border-shape：非矩形Webの未来 | una.im Chrome Canary 146 以降の実験的 Web Platform Features フラグで試せる border-shape は、clip-path のようにマスクするのではなく、要素の border ジオメトリそのものを再定義する CSS プロパティです。CSS Borders and Box Decorations Module Level 4 で定義され、circle()、ellipse()、inset()、polygon()、新しい shape() 関数、SVG スタイルの path 文字列を受け付けます。shape が適用されると background、border-image、focus outline、box-shadow がすべてその新しいジオメトリに追従します。記事では --ap・--ah・--aw カスタムプロパティを使ったツールチップ、chevron ナビゲーション、content-box キーワードを使ったスカラップボーダーの 3 つ のデモを紹介しています。
Read Articlearrow_forward Video · オピニオン 13:18
よく見かけすぎるCSSの反則5選 Kevin Powell は経験豊富な開発者でも犯しがちな CSS の失敗を 5 つ 紹介します。1 つ 目はブロック要素への不要な width: 100% 宣言 — margin を付けると box-sizing: border-box に関係なく overflow が起きます(margin は border の外側にあるため)。2 つ 目はコンテンツが増えると崩れる固定 height の代わりに min-height を使うこと。3 つ 目は時間が経つと内容が乖離する重複したコンポーネントスタイル — Powell 自身の fancy-button と link-button の重複と閉じられていない @layer ブロックを実際のサイトで実演。4 つ 目は outline: none でフォーカスリングをグローバルに削除する代わりに :focus-visible を使うこと — キーボードナビゲーション時のみリングを表示し、ESPN サイトのデモで集中要素が見えない問題を実演。5 つ 目は CSS Grid が適切な場面で flexbox を多用すること — AI が古い flexbox 重視のコードで学習した影響とも指摘しています。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · リリース READ TIME: 5m
Navigation API — より良いナビゲーション手段がBaseline Newly Availableに Navigation API は 2026 年 初頭に Safari と Firefox がサポートを追加し、Baseline Newly Available となりました。リンクのクリック・popstate イベント(pushState や replaceState では発火しない)・history.pushState() を個別に処理する History API パターンを置き換えます。navigation.addEventListener('navigate', ...) 1 つ で、リンククリック・フォーム送信・戻る/進むボタン・navigation.navigate() 呼び出しなどすべてのナビゲーションを横断的に捕捉できます。event.intercept() ハンドラーは URL の自動更新・アクセシビリティのためのフォーカス自動管理・フォーム送信用 NavigateEvent.formData プロパティを提供します。scroll: 'manual' オプションで非同期コンテンツ読み込み中のスクロール復元タイミングを細かく制御でき、DOM 更新を document.startViewTransition() でラップすることで SPA にアプリライクなページ遷移を実現できます。
READ_FULL_LOGarrow_forward Article · テクニック READ TIME: 3m
clamp()と:heading()で流動的なタイポグラフィスケールを構築 この記事は以前の :heading() と pow() の投稿を拡張し、clamp() によるフルードスケーリングを追加します。375px から 1440px のビューポート幅を rem ベースの最小・最大サイズで線形補間し、数式が自動的に補完します。--heading-level カスタムプロパティ(h1 = 5 、h6 = 0 )を各見出しレベルに割り当てることで、clamp() のロジックが h1 〜h6 の 6 つ のセレクタに重複せず 1 つ の :heading ブロックに集約されます。h1 の指数が 5 なのは、1 rem にスケール比率の 5 乗をかけることで最大サイズを生成し、指数 0 の h6 がベースサイズ(1 rem)になるためです。WCAG 1.4.4 準拠のため clamp() の min・max は rem 単位が必須であり、:heading() と pow() は現在 Safari Technology Preview でのみ実験的にサポートされています。
READ_FULL_LOGarrow_forward Article · テクニック READ TIME: 6m
:heading()、sibling-index()、pow()で作るCSSタイポグラフィスケール :heading() 疑似クラス・sibling-index()・CSS Values and Units Level 4 の pow() を組み合わせると、冗長な typographic scale を 3 つ のカスタムプロパティと 1 つ の font-size ルールに圧縮できます。核となる数式は font-size = base-size x ratio^(6 - sibling-index()) で、h1 (インデックス 1 )は ratio^5 (最大値)、h6 (インデックス 6 )は ratio^0 = 1 (ベースサイズ)になります。Perfect Fourth 比率(1.333 )では h1 が 4.209rem 、h6 が 1 rem です。--typographic-scale 変数を変えるだけで Minor Third(1.2 )・Major Third(1.25 )・Perfect Fifth(1.5 ) を切り替えられます。ただし sibling-index() は意味論的な heading レベルではなく DOM の兄弟順を数えるため、heading タグが繰り返されたりスキップされると scale が崩れます。現在 3 機能すべてをサポートするのは Safari Technology Preview のみです。
READ_FULL_LOGarrow_forward Article · ガイド READ TIME: 5m
Anchor Positioningが動かない理由 Temani Afif は anchor-name が解決可能かを決めるブラウザの核心ルールを明確に整理します。anchor 要素のボックスが positioned 要素のボックスより先に完全にレイアウトされなければならないというルールです。このルール 1 つ で多くのエッジケースが説明できます。.element が .anchor の子の場合、.anchor に non-static な position を付けると containing block になりルールが破れますが、.element に position: fixed を適用すると containing block がビューポートに移るため再び機能します。兄弟順序も重要で、.anchor が DOM で .element の後にあり position: absolute または fixed の場合は参照が失敗しますが、relative・sticky は機能します。z-index でこの順序問題は解決できません。最も確実な失敗パターンは .anchor が .element の containing block の外にある場合で、DOM 順序に関わらず常に参照が無効になります。
READ_FULL_LOGarrow_forward Article · チュートリアル READ TIME: 16m
CSS Anchor Positioning：スコープ、暗黙的アンカー、条件付き非表示 CSS Anchor Positioning シリーズの第 4 回 ・最終回は anchor-scope・implicit anchor・position-visibility の 3 つ の高度な機能を解説します。anchor-scope は、anchor-name がグローバルに参照されるため繰り返しコンポーネントで名前衝突が起きる問題を解決します。親 li に anchor-scope: --card を付けるとサブツリー境界が生成されます。Popover API の popovertarget 属性や showPopover({ source }) で自動生成される implicit anchor は CSS の命名を完全に回避し、衝突を起こしません。position-visibility は anchors-visible・no-overflow の組み合わせで条件付き非表示を実現し、トリガー時は force-hidden として強制適用され、子孫の visibility: visible でも上書きできません。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週のCSSは二つ の流れが交差しました。強力な新しいレイアウト・ジオメトリprimitiveがブラウザに届く一方で、既存ツールの誤用に対する実践的な見直しが行われました。注目記事のborder-shapeはChrome Canary 146+ でテスト可能で、clip-pathでマスクするのではなく要素の実際のborderジオメトリを再定義し、tooltip・chevronナビゲーション・スカラップボーダーでbackground・outline・shadowが自動的に新しい形状に追従します。 またNavigation API がBaseline Newly Available となったことは重要な節目であり、全ブラウザで単一のnavigateイベントリスナーが分散したHistory APIパターンを置き換えます。
Anchor Positioningも今週さらに成熟しました。anchor-scope（繰り返しコンポーネントの名前衝突解決）、position-visibility（条件付きforce-hidden非表示）、そしてTemani Afifによるanchor参照失敗の原因分析（z-indexでは解決できないレイアウト順ルール）が並んで発表されました。タイポグラフィでは:heading()・sibling-index()・clamp()を組み合わせて冗長なscaleを数個 のカスタムプロパティに圧縮する方法が紹介されましたが、どちらの機能も現在はSafariのみのサポートです。
Kevin Powellによる5つ のCSS失敗（不要なwidth:100%・固定height・focusリング抑制・flexbox多用）の批評が基本に立ち返った締めくくりとなりました。古いflexbox中心コードで学習したAIモデルがそのパターンを継続させるという指摘は、AI支援開発を採用するチームへの静かながら重要な示唆です。
Key Takeaways border-shape (Chrome Canary 146+ ) で要素ジオメトリを再定義すると、background・shadow・outlineがすべて自動的に新しい形状に追従する Navigation APIが全主要ブラウザでBaselineに — SPAで単一のnavigateリスナーが分散したHistory APIパターンを置き換える anchor-scopeとposition-visibilityがCSS Anchor Positioningの衝突・非表示の課題を補完し、anchor参照失敗はz-indexではなくレイアウト順ルールに起因する 
