k8o

Webフロントエンドを軸足に、最近はBaselineに追加された機能の深掘りをブログに残しています。デザインとの境界にも興味があり、デザインシステムArteOdysseyを育てています。

Activity

最近の発信と、GitHubでの活動の記録。

過去14日間で456件

Container style queriesは@container style()で祖先要素のカスタムプロパティの値を条件にスタイルを切り替えるCSSの仕組みです。Baseline 2026で揃ったので、テーマやコンテキストごとのスタイル分岐を子要素側で完結できるようになりました。

:openはdialog、details、select、ピッカー付きのinputといった開閉できる要素が開いている間にマッチするCSS疑似クラスです。Baseline 2026で揃ったので、dialog[open]やdetails[open]といった要素別の属性セレクタを横断して一本化できます。

ToggleEvent.sourceはBaseline 2026で追加された、toggle / beforetoggleイベントに発火元の要素を載せて渡すプロパティです。同じポップオーバーを複数のボタンから開くケースで、どのボタンから開かれたかをリスナー側で素直に判定できます。

考えたことや作ったものを形にして公開する場。

Webフロントエンドを中心に、日々のことも書いています。

過去の登壇テーマや資料へのリンクをまとめています。

ブログ記事や興味のある技術の試作品を集めています。

dotfilesやskills、自作ツールなどの制作物をまとめています。

気になっている記事を集めて、あとから探せるようにしています。

絵の具を流して模様を描く、フルイドアートのお絵かきWebアプリです。

k8o.meのデザインシステム。コンポーネントやトークンを確認できます。

日々の作業や日常で役立つちょっとしたツール群。

Web Platform Baselineのステータスを追跡します。

テキストの文字数をリアルタイムに数えます。

2色のコントラスト比を計算し、WCAGの基準で評価します。

HEX・RGB・HSLの色表現を相互に変換します。

色からHexコードを当てたり、Hexコードから色を選ぶクイズです。

border-radiusを視覚的に操作してCSSを生成します。