Layout on 技術、遊戲、生活通俗易懂的解釋

Isolating Layout Computations via CSS contain 正確的ty

Mon, 15 Jun 2026 00:00:00 +0900

The Rendering Cost of Dynamic Content

Every time the DOM changes, the browser must recompute styles, layout, and paint. For pages with many interactive widgets—chat feeds, stock tickers, infinite-scroll lists—these recalculations can ripple across the entire document, causing jank and dropped frames.

The CSS contain property tells the browser that a subtree is independent from the rest of the page. This enables the engine to skip global recalculations and treat the element as an isolated island.

預防ing Cumulative Layout Shift with CSS aspect-ratio

Wed, 10 Dec 2025 00:00:00 +0900

Understanding Cumulative Layout Shift

Cumulative Layout Shift (CLS) is one of Google’s Core Web Vitals metrics that measures visual stability. It quantifies how often users experience unexpected layout shifts. A high CLS score harms user experience and SEO rankings. The primary cause? Media elements (images, videos, iframes) loading without reserved space.

How CSS aspect-ratio Works

The aspect-ratio CSS property lets you declare the ratio of width to height for any element. The browser reserves space accordingly, preventing the layout from jumping when content loads.

與 CSS 網格子網格完美對齊

Sat, 10 May 2025 00:00:00 +0900

介紹

在卡片佈局中跨列對齊嵌套元件是響應式網頁設計中常見的佈局挑戰。

雖然 CSS Grid 和 Flexbox 可以輕鬆均衡同級卡片容器的高度，但對齊內部元素（例如標題、正文和 CTA 按鈕）仍然很困難。如果一張卡片具有多行標題，而另一張卡片具有單行標題，則以下元素將錯位，從而導致 UI 不一致。

CSS 網格子網格 功能解決了此佈局限制。本指南解釋了 subgrid 的工作原理並分享了建立對齊網格卡的樣式策略。

1. 嵌套 CSS 網格的局限性

讓我們看看在不使用 subgrid 參數的情況下對齊巢狀元素的限制。

HTML結構

<div class="grid-container">
 <div class="card">
 <h3 class="card-title">Short Title</h3>
 <p class="card-desc">Short description text.</p>
 <button class="card-btn">Read More</button>
 </div>
 <div class="card">
 <h3 class="card-title">Extremely Long and Complex Multi-line Card Title</h3>
 <p class="card-desc">This card contains long body copy that wraps across multiple lines.</p>
 <button class="card-btn">Read More</button>
 </div>
</div>

傳統的 Flexbox/Grid 解決方法

.grid-container {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}

.card {
 display: flex;
 flex-direction: column;
 justify-content: space-between; /* Pushes button to bottom */
}

問題： 卡片容器本身對齊到相同的高度，並且按鈕位於底部。但是，標題的下緣和描述段落的開頭沒有對齊。由於一個標題較長，因此其下方的描述文字開始位置低於相鄰卡片中的描述，從而破壞了佈局一致性。

2. 解決子網格的對齊問題

使用 subgrid，巢狀網格容器繼承在其父網格容器上定義的行和列軌道。

CSS 錨點定位簡介與範例

Mon, 10 Feb 2025 00:00:00 +0900

介紹

在 Web 開發中，相對於特定參考元素（錨點）定位浮動元素（例如工具提示、彈出視窗、下拉式選單和懸停卡）歷來是一項複雜的挑戰。

為了使浮動元素在視窗大小調整或頁面滾動時跟隨錨點積分，開發人員傳統上依靠連續的 JavaScript 座標計算（使用 getBoundingClientRect()）來動態更改內聯樣式。因此，像 Popper.js 或 Floating UI 這樣的函式庫成為了業界標準。但是，在滾動事件期間在主執行緒上執行腳本循環經常會導致渲染延遲和卡頓，尤其是在行動裝置上。

CSS 錨定位 API 透過在瀏覽器中本機處理浮動座標來解決這些缺點。在本指南中，我們將探索該標準的核心功能並逐步介紹實用的 UI 配方。

1.什麼是CSS錨點定位？

CSS 錨定位是一種原生樣式標準，可讓您完全使用 CSS 將絕對或固定位置元素（目標）直接錨定到另一個元素（錨）。

核心優勢

零 JavaScript： 消除了調整大小偵聽器、滾動事件觀察器和自訂座標計算邏輯的需求。
卓越的性能： 位置更新和渲染直接卸載到瀏覽器的合成器線程，以 60+ FPS 渲染流暢的視覺更新。
佈局隔離： 絕對或固定目標元素可以繞過父邊界剪切約束（例如 overflow: hidden），尤其是與 HTML <dialog> 元素或本機 popover 屬性配對時。

2. 基本設定和語法

讓我們來看看將工具提示容器綁定到按鈕元素的基本設定。

HTML結構

我們聲明一個錨元素（按鈕）及其目標浮動容器（div）。

<button class="my-anchor">Hover over me</button>
<div class="my-tooltip">This is a native CSS tooltip</div>

CSS 實現

為了在 CSS 中將元素連結在一起，我們遵循三個步驟：

在引用錨元素上聲明唯一的 anchor-name 識別碼。
定義 position: absolute 並在目標上使用 position-anchor 引用標識符。
透過 anchor() 定位功能對齊座標。

/* 1. Set up the Anchor */
.my-anchor {
 /* Anchor names must be formatted as dashed identifiers, similar to CSS custom properties */
 anchor-name: --anchor-button;
}

/* 2 & 3. Format the Target */
.my-tooltip {
 position: absolute;
 position-anchor: --anchor-button;

 /* Pin the top of the tooltip to the bottom boundary of the anchor button */
 top: anchor(bottom);
 /* Place the horizontal center of the tooltip to the center of the anchor */
 left: anchor(center);
 transform: translateX(-50%);

 /* Styling defaults */
 background: #333;
 color: #fff;
 padding: 8px;
 border-radius: 4px;
}

只需幾行 CSS，工具提示就可以直接捕捉到按鈕下方。即使使用者捲動文檔，佈局引擎也會自動更新位置。

CSS Grid 進階 Patterns: Complex Layouts Made 簡單

Fri, 15 Dec 2023 00:00:00 +0900

CSS Grid has transformed web layout design, but many developers only scratch the surface. Beyond the basic grid-template-columns: 1fr 1fr 1fr lies a powerful set of features that handle complex, responsive layouts with minimal code. This article explores advanced Grid patterns that every professional front-end developer should know.

Named Grid Areas for Semantic Layouts

Line-based placement works, but it becomes unreadable as layouts grow complex. Named grid areas let you define layouts that read like a wireframe directly in CSS.