たより

@sakupi01.com blog icon

@sakupi01.com blog

Blogs written by saku

🎄Open UI Advent Calendar: Day 11 / Customizable Select Element Ep.9

Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker-icon`のデフォルトスタイルはどうやって決まったのか

🎄Open UI Advent Calendar: Day 12 / Customizable Select Element Ep.10

Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker()`のデフォルト色から深掘る、system-color/ color-scheme/ prefers-color-schemeの関係

🎄Open UI Advent Calendar: Day 13 / Customizable Select Element Ep.11

Customizable Select Elementの関連仕様: `` - ``提案のきっかけと、選択された``のvalueとスタイルを反映する初期の仕組みとして、`part`属性と`slot`属性について

🎄Open UI Advent Calendar: Day 15 / Customizable Select Element Ep.13

Customizable Select Elementの関連仕様: `` - ``の内部コンテンツ自体を``に反映する仕様の検討

🎄Open UI Advent Calendar: Day 19 / Customizable Select Element Ep.17

Customizable Select Elementの関連仕様: `` - UAによるLight DOMへのNodeクローンタイミングの検討

🎄Open UI Advent Calendar: Day 2 / Web UIの抱える課題とOpen UIの発足背景

Web UIの抱える課題とOpen UIの発足背景について

🎄Open UI Advent Calendar: Day 0 / Prologue

OpenUI Advent Calendar プロローグ

🎄Open UI Advent Calendar: Day 1 / Open UIについて

Open UIの概要と、その調査方法

🎄Open UI Advent Calendar: Day 24 / Global Design System Part2

Open UIが提唱するデザインシステム、Global Design Systemとその未来

🎄Open UI Advent Calendar: Day 25 / Epilogue

OpenUI Advent Calendar エピローグ

🎄Open UI Advent Calendar: Day 18 / Customizable Select Element Ep.16

Customizable Select Elementの関連仕様: `` - Light DOMへのクローン追加実装に関して、CSSWGとの合意形成。UAによるLight DOMへのNodeクローンタイミングに関する懸念を深掘る

🎄Open UI Advent Calendar: Day 4 / Customizable Select Element Ep.2

ブラウザ戦争の激化と、OSに依存したコントロールの問題の顕在化。打開する動きとして、WaSPによるWeb標準の台頭への動き、モダンブラウザの登場、より柔軟なスタイリングを可能にするCSS3の登場

🎄Open UI Advent Calendar: Day 23 / Global Design System Part1

デザインシステムの開発を加速させる、堅牢で柔軟なGlobal Design Systemの提唱

🎄Open UI Advent Calendar: Day 6 / Customizable Select Element Ep.4

Open UIでCustomizable Select Elementの初期提案

🎄Open UI Advent Calendar: Day7 / Customizable Select Element Ep.5

Open UIでCSEのResearchが行われる。同時期にMSで``Explainerの作成。Explainerに基づいて、``がIntent to Prototypeに

🎄Open UI Advent Calendar: Day 8 / Customizable Select Element Ep.6

``のその後:``に至るまで

🎄Open UI Advent Calendar: Day 5 / Customizable Select Element Ep.3

Web標準化の動きが進んでもなお、CustomizableでないForm Controlの紹介。Customizable Select Element提案の契機となるサーベイ

🎄Open UI Advent Calendar: Day 17 / Customizable Select Element Ep.15

Customizable Select Elementの関連仕様: `` - `slot`属性と`behavior`属性が使用廃止を受け、CSE Anatomyが改訂。HTML史上初となる、UAからLight DOMへ変更を加える実装検討へ

🎨 CSS Advent Calendar: Day 0 / Prologue

CSS Advent Calendar Prologue

🎨 CSS Advent Calendar: Day 1 / Pre-Styling Era

1989年の WorldWideWeb ブラウザから始まる、CSS 誕生前の Web の歴史の振り返り。スタイルのない時代から IMG タグ、FONT タグの登場。

🎨 CSS Advent Calendar: Day 10 / Interoperability in CSS, &c.

CSS におけるブラウザの負債とエコシステム側の解決策

🎨 CSS Advent Calendar: Day 11 / The Birth of Responsive Design

iPhone の登場と、Web デザインにおける適応性の黎明

🎨 CSS Advent Calendar: Day 12 / Web Apps are demanded! - The Emergence of SPA

アプリケーションとしての Web の進化と SPA

🎨 CSS Advent Calendar: Day 13 / CSS meets npm Ecosystem - the first shot ... AltCSS

AltCSS とも言える SassとPostCSS の登場、エコシステムへの影響

🎨 CSS Advent Calendar: Day 14 / Thoughts on CSS Architecture

npm エコシステムと並行して、進化してきた CSS アーキテクチャ

🎨 CSS Advent Calendar: Day 15 / CSS meets npm Ecosystem - the second shot - Component Based CSS

Declarative UI の登場による CSS エコシステムの変遷

🎨 CSS Advent Calendar: Day 16 / Hard Core Scoping of Standard

標準側での「スタイルのカプセル化」

🎨 CSS Advent Calendar: Day 17 / Specificity Architecture is what CSS Architecture is

「詳細度設計」としての「CSS アーキテクチャ」、その未来’

🎨 CSS Advent Calendar: Day 18 / Cascade Layers with background story

Cascade Layers の背景と、Cascade Layers の提案に至るまでの経緯から考察するメンタルモデル

🎄Open UI Advent Calendar: Day 20 / Customizable Select Element Ep.18

Customizable Select Elementの関連仕様: `` - 「同期タイミング」でクローンを作成の方針で決定。`cloneNode()`の制限が浮き彫りになる

🎨 CSS Advent Calendar: Day 19 / Cascade Layers in real world use

Cascade Layers に付随して議論されたトピックと、Cascade Layers の具体的なユースケース

🎄Open UI Advent Calendar: Day 14 / Customizable Select Element Ep.12

Customizable Select Elementの関連仕様: `` - `part`属性をCSEのUA実装で使用することの問題から、`part`属性を`behavior`属性にリネームへ。``のvalueのみならず、内部コンテンツ自体を``に反映する仕様策定の示唆

🎨 CSS Advent Calendar: Day 2 / CSS “to save HTML”

CSS 以前のドキュメントスタイル手法の提案 - Prevent the Web from becoming a giant fax machine!!

🎨 CSS Advent Calendar: Day 20 / CSS Scope with backgrounds

CSS Scope の背景と、CSS Scope の提案に至るまでの経緯から考察するメンタルモデル

🎨 CSS Advent Calendar: Day 21 / A Quick History of Web Design

Responsive Web Design までの歴史から見る、Web の制約と特性とデザインの理想

🎨 CSS Advent Calendar: Day 22 / Intrinsic Web Design - Beyond Responsive and Embrace the nature of the Web

Web というメディアが本来持つ性質/値を最大限に活かす「Intrinsic Web Design」という考え方

🎨 CSS Advent Calendar: Day 23 / Declarative Web Design

Intrinsic Web Design/Every Layout/Utopia と Declarative Design. そして、Container Size Queries の実現

🎨 CSS Advent Calendar: Day 24 / The Future of Web UI is Declarative. - How Design System can bridge Imperative Design?

Design と Web Design の思想を橋渡しする Design System。Semantic Design と Declarative Design System の関係性

🎨 CSS Advent Calendar: Day 25 / Epilogue

CSS Advent Calendar エピローグ

🎨 CSS Advent Calendar: Day 3 / CSS is Optional. Protect the Content!

ヒントとしての CSS、あるいはコンテンツを守るための Web の設計思想

🎨 CSS Advent Calendar: Day 4 / The Initial Cascade

Cascade Layers 以前の Cascade

🎨 CSS Advent Calendar: Day 5 / Cascade for Cascading Style Sheets - Behind the Scenes of Importance

Cascade の登場と Importance の裏側

🎨 CSS Advent Calendar: Day 6 / Cascade for Cascading Style Sheets - UA Origin in Cascade

Cascade Sorting Order と UA Origin の解剖

🎨 CSS Advent Calendar: Day 7 / The Cascade for Cascading Style Sheets - The Whole Cascade Universe v1

Origin の続きと、Cascade Sorting Order の全体像

🎨 CSS Advent Calendar: Day 8 / Basics of Style Resolution

何重ものフィルタリングと計算処理を経て、適用されるスタイルが決定するまでの仕組み

🎨 CSS Advent Calendar: Day 9 / Standards and Ecosystem

CSS 標準から、CSS 標準外の変化への転換

🎄Open UI Advent Calendar: Day 16 / Customizable Select Element Ep.14

Customizable Select Elementの関連仕様: `` - 「選択された``を``にスロットしてカスタマイズできるようにする」唯一の手段、`slot`属性と`behavior`属性が使用廃止へ

Customizable Select ElementにおけるParser RelaxationのアップデートとShipの背景

長年の議論を経て、ようやく仕様が固まった、CustomizableなSelect要素の現状について、Parser Relaxationのを軸に解説します

Google Developer Experts にジョインしました

Joined Google Developer Experts (GDE) program as a Web Technologies expert focusing on CSS & UI.

🎄Open UI Advent Calendar: Day 3 / Customizable Select Element Ep.1

Form Controlの歴史と、ブラウザやOSに依存するForm Controlのスタイルについて

🎄Open UI Advent Calendar: Day21 / Customizable Select Element Ep.19

Customizable Select Elementの関連仕様: `` - 子Node変更検知タイミングの仕様決定(現時点で)

Unlocking Parent Style Inheritance✨/ Nested で Dynamic で Adoptive なスタイルを実現する `inherit()`

「親要素の任意プロパティ」にアクセスする手段として、`inherit()` の仕様が CSS Values and Units Module Level 5 で策定されています。これにより、Custom Properties を経由せず、親要素のプロパティを子要素から直接自己参照でき、長年望まれてきた非常に多くのユースケースが一挙に解決されることが期待されています。

🎄Open UI Advent Calendar: Day 10 / Customizable Select Element Ep.8

Customizable Select Elementの関連仕様: `appearance: base-select;` - 選択された``のデフォルトチェックマークのスタイルはどうやって決まったのか

Standardizing User Intent with Interest Invokers ! (... and it's complicated)

本エントリでは、Interest Invokers の仕様策定において重要な「Show Interest」という概念と、 HIDs (Human Interface Devices) の「Show Interest」に係る議論の現状を解説します。

CSS Masonry のあゆみと現状

CSS Masonry(Grid-Lanes)の仕様策定の経緯と現状のまとめ

TPAC 2025 @Kobe Diary

TPAC 2025 参加記(Unpolished ver.)

Safari 18.2 「view-transition-name: auto;」への警鐘

Safari 18.2でShipされた`view-transition-name: auto;`は、未だに議論の余地が残るため、仕様をよく理解した上での利用が必要な理由を解説します

📝note: What is web accessibility?

Practical Accessibility のメモ

🎄Open UI Advent Calendar: Day 22 / Customizable Select Element Ep.20

Customizable Select Elementのまとめ

2025 In Review

2025年の振り返り

From 7 Hours Behind

DISCLAIMER: Non-Tech. Pure life stuff here. Don't read if you expect tech.

Cardのマークアップでもう悩まない!NestedでClickableなUIを実現する、Link Area Delegationとは

本エントリでは、インタラクティブな要素がネストされたUIを、標準的な方法で実現しようという「Link Area Delegation」Proposalについて紹介します。

🎄Open UI Advent Calendar: Day 9 / Customizable Select Element Ep.7

``のその後:``から``に至るまで

2024 In Review

2024年の振り返り

内定者アルバイトを終えて

チーム開発何もわからんだった私が、チームワークを大切にする会社の内定者アルバイトに参加して思ったことをつらつら書きます。まとまりはないです。

The Outline Algorithm Utopia

本エントリでは、Document Outline Algorithm というユートピアと、その中で繰り広げられた HTML の歴史を振り返ります。また、Outline Algorithm の後継として実現が検討されている Heading Level Concept についての現状を記します。

[Thoughts Are Appreciated!] Baseline という指標の活用可能性に関する考察

Baseline という指標の活用可能性に関する考察

Case [email protected] - How Cybozu eliminated browser compatibility overhead with Baseline

Baseline の企業レベル導入事例