ep.177『今すぐ使えるモダンCSSと、注目の次世代プロパティ』

DRANK

@potato4d が @a_t に、最近のCSS事情について話を聞きました。 ### ゲスト - 富田 (@a_t) - アクセシビリティチーム リーダー - HTML/CSSに関する社内啓蒙活動を担当 ### 主なトピック #### 1. Container Queries - メディアクエリ（Media Queries）と似ているが、特定の要素（コンテナ）単位でスタイルを変更可能 - モジュール単位でレスポンシブなスタイルを柔軟に設定できる - Safari 16.0以降、Chrome、Edge、Firefoxなど主要ブラウザで対応済み - 実践投入可能な段階に到達 #### 2. テキスト描画改善系のプロパティ - プログレッシブエンハンスメント（Progressive Enhancement）として段階的導入が推奨される ##### text-spacing-trim - 段落冒頭や末尾の全角記号の余白を自動調整 - 非対応ブラウザでも表示が崩れないため、積極的に導入可能 ##### text-autospace／word-break(auto-phrase) - 全角・半角文字の境界に自動でスペース挿入 - 日本語テキストの単語単位の改行を改善 - パフォーマンスへの影響に注意し、部分的な導入を推奨 #### 3. 将来的に注目されるCSSの新機能 ##### 余白調整系プロパティ - text-box：テキスト上下の余白を調整可能にする新プ…