CSS でのシンプルなプログレッシブ機能強化
CSS はここ数年で大きく変わりました。今では毎月新しい機能が追加されているような気がします。新機能は充実していますが、完全にサポートされているものや安全に使用できるものに追いつくのは困難です。
プログレッシブ拡張機能 を入力します。サポートされていないブラウザーでユーザーが Web サイトにアクセスした場合に安全なフォールバックを提供するコード機能と構文です。
ここでは、安全に使用できる簡単な CSS プロパティとテクニックをいくつか紹介します。一部のユーザーにとってはエクスペリエンスが向上しますが、他のユーザーにとっては満足のいくフォールバックが提供されます。
text-wrap: きれいなテキストと text-wrap: バランスを使用したより良いテキスト
すべてのブラウザがテキストラップ値のバランスと美しさをサポートしているわけではありませんが、安全使用できます。
これらの値に慣れていない場合は、テキストを (ご想像のとおり) より美しく、よりバランスのとれたものに「修正」する方法です。
テキストの段落の最後の単語が新しい行に折り返され、最後に単独で残るという「孤立した」単語の問題が大幅に解決されます。 pretty は、最後の単語に別の単語が付加されることを保証します。これは 見出し に最適です (注: 最適な結果を計算するために低速のアルゴリズムが使用されるため、本文テキストの大部分には使用しないでください)。
text-wrap に関する MDN ドキュメント: かなり
バランスは、各行の文字数のバランスが取れるようにテキストが折り返されるように段落を調整し、レイアウトの品質と読みやすさを向上させます。これは、特定の長さの段落に便利です。バナー内の先頭テキストまたはマーケティングコピー。 (注: 本文内のすべての
タグでこれを使用しないでください。文字数に基づいて完璧なバランスを計算すると計算コストがかかるため、ブラウザではテキスト行に基づいてこの機能に制限が設けられています。 Chromium の場合は 6 以下、Firefox の場合は 10 以下)
テキストラップ: バランスに関する MDN ドキュメント
デモ
フォールバック
ブラウザがこれらの機能をサポートしていない場合に起こる唯一のことは、テキストが孤立したり、希望どおりにバランスがとれなかったりすることです。それで大丈夫です。私たちは 30 年間 Web ブラウジングをこれとともに生きてきたので、サポートされていないブラウザーを使用するユーザーのエクスペリエンスが損なわれることはありません。