CSS でのシンプルなプログレッシブ機能強化

CSS はここ数年で大きく変わりました。今では毎月新しい機能が追加されているような気がします。新機能は充実していますが、完全にサポートされているものや安全に使用できるものに追いつくのは困難です。

プログレッシブ拡張機能 を入力します。サポートされていないブラウザーでユーザーが Web サイトにアクセスした場合に安全なフォールバックを提供するコード機能と構文です。

ここでは、安全に使用できる簡単な CSS プロパティとテクニックをいくつか紹介します。一部のユーザーにとってはエクスペリエンスが向上しますが、他のユーザーにとっては満足のいくフォールバックが提供されます。

text-wrap: きれいなテキストと text-wrap: バランスを使用したより良いテキスト

すべてのブラウザがテキストラップ値のバランスと美しさをサポートしているわけではありませんが、安全使用できます。

これらの値に慣れていない場合は、テキストを (ご想像のとおり) より美しく、よりバランスのとれたものに「修正」する方法です。

テキストの段落の最後の単語が新しい行に折り返され、最後に単独で残るという「孤立した」単語の問題が大幅に解決されます。 pretty は、最後の単語に別の単語が付加されることを保証します。これは 見出し に最適です (注: 最適な結果を計算するために低速のアルゴリズムが使用されるため、本文テキストの大部分には使用しないでください)。

text-wrap に関する MDN ドキュメント: かなり

バランスは、各行の文字数のバランスが取れるようにテキストが折り返されるように段落を調整し、レイアウトの品質と読みやすさを向上させます。これは、特定の長さの段落に便利です。バナー内の先頭テキストまたはマーケティングコピー。 (注: 本文内のすべての

タグでこれを使用しないでください。文字数に基づいて完璧なバランスを計算すると計算コストがかかるため、ブラウザではテキスト行に基づいてこの機能に制限が設けられています。 Chromium の場合は 6 以下、Firefox の場合は 10 以下)

テキストラップ: バランスに関する MDN ドキュメント

デモ

フォールバック

ブラウザがこれらの機能をサポートしていない場合に起こる唯一のことは、テキストが孤立したり、希望どおりにバランスがとれなかったりすることです。それで大丈夫です。私たちは 30 年間 Web ブラウジングをこれとともに生きてきたので、サポートされていないブラウザーを使用するユーザーのエクスペリエンスが損なわれることはありません。

---

フィールドサイズ設定による自動拡張フォームフィールド: コンテンツ

に書き込んでも自動的に拡張されないことにイライラしたことはありませんか?まあ、それは field-sizing: content で最終的に修正されつつあります。

このプロパティと値は、、 を行います。または コンテンツに基づいて自動的に成長します。 <textarea> に使用することをお勧めします。特に、MDN によって「実験的」とマークされていますが、現在でも安全に使用できます。

フィールドサイジングに関する MDN ドキュメント

デモ

フォールバック

これに対するフォールバックは単純です。ブラウザがこの機能をサポートしていない場合、フィールドは拡張されません。それもOKです!

---

疑似要素 ::marker および ::placeholder

のリスト項目のディスク インジケーターのスタイルを設定したい、

の数字の色を変更したい、または のプレースホルダーのスタイルを設定したいですか? ::marker や ::placeholder などの擬似セレクターを使用すると、それが可能です。

このセレクターで機能するプロパティは少数しかないため、::marker 要素は奇妙なものであることに注意してください:

• すべてのフォントのプロパティ
• ホワイトスペースプロパティ
• カラー
• text-combine-upright、unicode-bidi、および方向プロパティ
• コンテンツ プロパティ
• すべてのアニメーションとトランジションのプロパティ

詳細については、こちらをご覧ください:::marker の MDN ドキュメント

::placeholder の場合、色、フォントの太さ、フォントファミリーなどを変更するなど、通常のテキストでできることはほとんど何でもできますが、入力のプレースホルダーは依然として はプレースホルダーのように見えますが、入力にすでに値が入力されているようには見えません。

::placeholder の MDN ドキュメント

デモ

フォールバック

これらはすべてのブラウザまたはブラウザのバージョンで機能するわけではありませんが、使用しても何も損なわれることはなく、完全なプログレッシブ拡張機能となります。ディスクや数字などのマーカーはリスト項目のテキストと同じ色にフォールバックされ、プレースホルダーにはブラウザーの組み込みスタイルが適用されます。

---

結論は

ベースライン (webstatus.dev より) と caniuse.com では、特定のブラウザー バージョンで何かが利用可能かどうかのみが示されており、セレクターが使用された場合に UI に何が起こるかについては示されていないため、CSS で安全に使用できるものを把握するのは困難です。 、プロパティまたは値はサポートされていません。

実験的な機能やあまりサポートされていない機能によってどのようなフォールバックが生じるかを常に把握してください。

以上がCSS でのシンプルなプログレッシブ機能強化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。