あまり知られていない CSS プロパティ名について話しましょう

CSS は強力で柔軟なスタイル シート言語であり、Web デザインにおける HTML や XML などのマークアップ言語の視覚的プレゼンテーションに特に使用され、Web ページのプレゼンテーションをより美しく、きちんとし、インタラクティブなものにします。ただし、CSS プロパティ モジュールには数百の標準化されたプロパティ名がありますが、不明なプロパティ名もまだ多くあります。

そこで、この記事では、あまり知られていない CSS プロパティ名をいくつか紹介し、これらのプロパティ名の特徴と適用シナリオを 1 つずつ明らかにしていきます。

1. overscroll-behavior
   この属性は、タッチ デバイスがスクロールするときの要素のスクロール動作を定義します。この属性には、auto、contain、none、および unset の 4 つの属性値が含まれます。

まず、デフォルトの動作は自動であり、ユーザーがスクロール境界に到達すると、タッチ デバイスはデフォルトのスクロール操作を実行します。 「含む」は、スクロール領域のオーバーフローを禁止し、貫通スクロール動作を保持します。つまり、ユーザーがデバイスにタッチしてスクロール境界に達すると、ページの背景要素がスクロールできるようになります。 none 属性はページ全体のスクロール動作を無効にし、unset は要素の親要素の属性値を使用します。

2. clip-path
   clip-path 属性を使用すると、開発者はパスを定義することで要素上に不規則な形状を定義できます。これは、従来の長方形の境界の制約を打ち破るものを実現する方法です。

clip-path 属性は、クリップ パス関数を定義します。この関数は、URL (SVG ファイルを指す) として定義することも、ジオメトリを指定することもできます。特定の形状を指定する必要がある場合は、ellipse()、polygon()、inset() などの事前定義された形状から選択できます。

3. object-position
   画像を背景として使用する場合は、通常、background-position を使用して画像の位置を設定する必要があります。インライン イメージの場合、object-position 属性を使用して同じ効果を実現できます。

object-position を使用すると、要素内のマップされた画像の位置を調整できます。この属性を使用して、オブジェクトがデフォルトで表示される位置を指定します。通常、この属性は、マッピングされたイメージの位置を調整する (つまりクリップする) ために、要素の width または height 属性と組み合わせて使用​​されます。

4. mix-blend-mode
   mix-blend-mode は、2 つの要素の色の混合方法を制御するために使用できます。

たとえば、2 つの要素の間にテキスト マスクを配置する場合、mix-blend-mode を使用していくつかの色を混合し、オーバーレイ操作を通じて特定の場所でそれらをユニークに見せることができます。この属性には、さまざまな属性値 (乗算、スクリーン、オーバーレイ、暗くする、明るくするなど) が含まれます。

5. text-align-last
   text-align-last プロパティは、最終行のテキストの配置を決定します。

通常、テキストはテキスト配置を使用して要素の境界に配置されます。ただし、テキストが別の行にはみ出した場合、最後の行のテキストの配置がテキスト ブロック全体の配置と異なる場合があります。このプロパティを使用すると、開発者は最終行のテキスト配置を指定できます。

6. shape-outside
   この CSS プロパティを使用して、テキストの適応形状を設定します。このプロパティは、たとえば、従来のテキスト配置を使用するのではなく、画像または何らかの図形の周囲にテキストを配置する場合に便利です。

shape-outside は、SVG パスに似た構文を通じて適応形状を指定する 4 つの形状関数をサポートします。これらの形状には、円、楕円、多角形、およびインセットが含まれます。

7. font-variant-ligatures
   Web 上でパススルー スクリプトをレンダリングする場合、複数の文字コンポーネントを含む文字は依然として適切にレンダリングされません。

font-variant-ligatures 属性を使用すると、ブラウザーは特定のフォント形式を無視するグリフ置換を使用して、レンダリング効果を向上させることができます。この属性には、すべての半角グリフ置換、合字置換 (合字)、数字グリフ置換、句読点グリフ置換、および表音文字置換が含まれます。

概要
ここにリストされている 7 つの CSS プロパティ名は広く知られていませんが、だからといって役に立たないというわけではありません。実際、これらの属性名を知っておくと、Web ページの開発をより効率的に行うことができ、同時にページをより優れた完成度の高いものにすることができます。

将来的には、インターネット技術の発展と変化に伴い、新しい属性名が次々と登場するでしょう。したがって、私たちは時代の進歩に乗り、優秀なフロントエンドエンジニアになるために学び、挑戦し続ける必要があります。

以上があまり知られていない CSS プロパティ名について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。