k8o

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

Activity

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

過去14日間で493件

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 Platform Baselineのステータスを追跡します。

HEX・RGB・HSL・OKLCHなどCSSの色形式を相互に変換します。

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

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

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

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

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