2025年にデザイナーのための新しいフロントエンド機能
(smashingmagazine.com)- 現代のWeb技術の発展により、以前はJavaScriptで実装する必要があった多くの作業が、今ではHTMLとCSSで簡単に実現可能
- コンポーネント中心のスタイリング、親要素のスタイリング、相対色の定義などの新技術が、複数のブラウザーで幅広く利用可能
- デザイナーと開発者がUIコンポーネントをより簡単かつ効果的に制作できる方法を提供
CSSコンテナクエリとスタイルクエリ
- コンポーネント中心のスタイリングが可能
- コンテナの幅やスタイル情報をクエリしてCSSスタイルを適用
- 複数のバリエーションを持つ再利用可能なコンポーネントのスタイリングに有用
- 参考: CSSスタイルクエリの紹介
テキストのバランス調整 (text-wrap: balance)
- タイポグラフィのバランスを維持
- 見出しやカードタイトルなどで、テキストが均等に配分されるよう自動計算
- 参考: Ahmad Shadeedのガイド
フォーム入力フィールドの自動サイズ調整
- 入力サイズを自動化
- テキスト入力や選択メニューのサイズがコンテンツに合わせて自動調整
- シンプルなCSS1行で実装可能
- 参考: Adam Argyleの解説
非表示コンテンツを検索可能に (hidden=until-found)
- UIアクセシビリティを向上
- 折りたたまれたアコーディオンセクションなどの非表示コンテンツを、ページ内検索や検索エンジンで検索可能
- 参考: Joey Arharのガイド
高解像度カラー対応 (OKLCH, OKLAB)
- 50%多くの色をサポート
- 人間の色覚を基に設計された新しいカラースペック
- デザインシステムやグラデーションに適している
- 参考: Vitaly Friedmanの解説
CSS相対色
- 既存の色をベースに色を計算
fromキーワードを使って、色の明るさ調整や補色の計算などが可能- 参考: Adam Argyleのコードスニペット
View Transitions API
- 滑らかな画面遷移
- 既存の画面から新しい画面へ移動する際に、CSSアニメーションを活用した滑らかな遷移を実装
- 単一ドキュメントまたは2つのドキュメント間の遷移をサポート
- 参考: Bramus Van Dammeのガイド
CSSスクロールスナップ
- 正確なスクロール体験を提供
- ユーザーが特定のコンテンツ項目にスナップするよう、スクロールコンテナを設定可能
- 参考: Ahmad Shadeedのガイド
親スタイリング (:has)
- 子要素の状態に基づいて親要素をスタイリング
- 親子関係を超えて、他の要素の状態に応じたスタイル調整も可能
- 参考: Josh W. Comeauのガイド
その他の注目機能
- 入力状態のスタイリング改善:
:user-valid,:user-invalidで、ユーザーが入力を変更した後にフィードバックを提供 - モバイルキーボードの最適化:
inputmodeとenterkeyhintで仮想キーボードを改善 <dialog>HTML要素: アクセシブルなモーダルやポップオーバーを実装
結論
- 新しく実用的なフロントエンド技術は、UIとUXデザインに革新的な影響をもたらす
- 今後実装される機能: masonryレイアウト、
<selectmenu>のカスタマイズ、テキストボックスの整列など - Webプラットフォームの発展に尽力するすべての開発者に感謝するとともに、この記事がプロジェクトやアプリケーションの改善に役立つことを願う。よい作業を!
4件のコメント
他の方も指摘されているように、筆者はブラウザ間の互換性や動作の一貫性をまったく考慮していませんね。これ以外にもブラウザ間で実装や挙動が異なる場合があるので、無条件に新機能を選ぶことはできません。いくら Chrome の利用率が高いとはいえ、iOS がある以上、少なくとも Safari で問題なく動作するかどうか程度は考慮すべきです
同意します……。製品にそのまま使うのは難しそうですね
Safari、Firefoxは未実装
hidden=until-found)Firefoxは未実装
フロントエンドの新機能は、事実上Chrome単独の新機能と見なしたほうが気楽です。
極端な例では、OffscreenCanvasのように5年もかかる場合があります。（Chrome 2018、Safari 2023）
コンテナクエリと
:hasがものすごく便利です