パーソナライズ！

アクセシビリティの強化とパーソナライズされたカスタマイズから始めて、ウェブサイトのユーザーエクスペリエンスを改善します。 アクセシビリティの改善により、視聴者を拡大し、すべてのユーザー（障害のある人だけでなく）のエクスペリエンスを向上させるだけでなく、SEOの利点ももたらします。

同様に、優先クエリのカスタマイズは、パーソナライズされたエクスペリエンスを提供する優れた方法でもあり、ユーザーがより快適で便利に感じるようにします。

prefers-reduced-motionの好みのクエリは良い例です。 この好みは、ユーザーが派手で高速なアニメーションなしでWebエクスペリエンスを好むことを意味します。この好みをサポートするスタイルを作成し、より「活気のある」インタラクティブな体験を提供するためにこの好みを設定しないユーザーのメディアクエリを書くことができます。

考慮すべきもう1つの好みは、ユーザーの配色の好みです。ほとんどのWebサイトは現在、デフォルトで明るい色のテーマを使用していますが、特に夜間にWebページを閲覧するときは、暗いテーマの需要が高くなっています。ユーザー設定に合わせたカスタムテーマを提供することは、ユーザーエクスペリエンスを向上させるもう1つの方法です。

CSSを使用してカスタムプロパティを使用し、 prefers-color-schemeメディア機能を使用してこれらのカスタムプロパティ値を調整することにより、これを効率的に行うことができます。背景、テキスト、ハイライトなどの一般的な値を使用する場合、すべての値を1つの場所で更新できます。

また、 color-scheme属性を使用して、ブラウザのテーマ変換を自動的に取得することも忘れないでください。このプロパティの設定は、ページでサポートされている色のテーマ（明るい、暗い、またはその両方）をブラウザに指示します。次に、ブラウザはフォームコントロールとブラウザUI（スクロールバーなど）を正しいテーマに自動的に変換します。

このデモでは、色のテーマにテキストカラーを設定しなくても、 color-scheme: light dark :root 、サイトが明るいテーマとダークテーマをサポートしていることをブラウザに伝え、フォントの色を黒から白に自動的に切り替えます。

システム設定を変更せずに、Chrome Devtoolsのレンダリングパネルで暗いテーマをテストできます。この画像は、Houdiniの暗いモードを示しています。

暗いテーマを作成するもう1つの利点は、ユーザーのバッテリー電源を節約することです。ピクセル6ラボの調査では、暗いテーマがOLEDスクリーンの消費電力の11％を節約することがわかりました。

そのため、ユーザーのアクセシビリティのニーズ、好み、バッテリー寿命を尊重します。これは、ウェブサイトをよりユーザーフレンドリーにするための素晴らしい方法です。

以上がパーソナライズ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。