k8o

Webフロントエンドを軸足に、最近は新しくブラウザで使えるようになった機能の深掘りをブログに残しています。デザインとの境界にも興味があり、デザインシステム@k8ordo/uiを育てています。

Activity

最近の発信の記録。

EXT_texture_norm16で16bitのデータの細かさを保ったままWebGLで描く

EXT_texture_norm16は、WebGL 2に16bitの正規化形式のテクスチャを足す拡張で、Firefox 159の対応でBaseline 2026に加わりました。標高データのような16bitの値を、細かさを落とさずにシェーダーで読めます。WebGLの前提から順に、8bitや浮動小数点数の形式との違いと注意点を整理します。

JavaScriptBaseline 2026WebGLEXT_texture_norm16

2026年11月8日

Scoped custom element registriesで同じ名前のカスタム要素を共存させる

Scoped custom element registriesは、グローバルなcustomElementsとは別にカスタム要素のレジストリを作り、シャドウルートに結びつける仕組みです。Safari 26とChrome 146に続いてFirefox 159が対応し、Baseline 2026に加わりました。レジストリの結びつけ方、要素のレジストリが決まるタイミング、宣言的Shadow DOMでの使い方を整理します。

JavaScriptBaseline 2026Scoped custom element registries

2026年11月7日

Scroll-driven animationsでスクロールに合わせてCSSのアニメーションを進める

Scroll-driven animationsは、時間ではなくスクロールの位置や要素の見え方でCSSのアニメーションを進める機能です。Chrome 115とSafari 26に続いてFirefox 159が対応し、Baseline 2026に加わりました。scroll()とview()の2つのタイムラインと、animation-rangeで進む区間を決める書き方を整理します。

CSSscrollBaseline 2026Scroll-driven Animations

2026年11月7日

Explore

読んだり眺めたりする、書きもの・集めもの。

Blog

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

Talks

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

Playgrounds

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

Artifacts

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

Readings

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

Tools

日々の作業や遊びに使う、ちょっとした道具。

Browser Support

Webプラットフォーム機能のブラウザ対応状況を追跡します。

カラーコード職人

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

コントラストチェッカー

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

カラーHexクイズ

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

かどまるラボ

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

いろばしご

OKLCHの明度スケールで11段階のカラーパレットを生成し、コントラストを検証します。

もじカウント

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

HTMLいれ子マップ

HTMLタグを選ぶと、親に置ける要素と中に入れられる子要素が浮かび上がります。

fluida

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