% CSS: &#s border 要素に対するノックアウト動作!-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

% CSS: &#s border 要素に対するノックアウト動作!

Susan Sarandon

Jan 08, 2025 pm 04:09 PM

伝説によれば、美しいフィールドセットの境界線をノックアウトする効果が任意の HTML 要素で可能になる日が来るでしょう。

そして素晴らしいニュースがあります。Chrome では今日がその日です!

フィールドセット?伝説？

よく知らない方のために、凡例を含むフィールドセットの境界ノックアウト効果を次に示します。

a picture of two simple fieldset elements with their legend (titles) leaving a gap the width of their text in the fieldset's border _{VanillaHTML からわずかに変更されたスクリーンショットのフィールドセットの凡例}

凡例 (タイトル) の幅により、フィールドセットの境界の穴が自動的に切り取られます。

技術的には

を使用することも可能ですが、そしてどこでも、

を使用することは一般的に推奨されません。

の外側なしでフィールドセットの主な目的は、関連するフォーム入力を意味的にグループ化することであるため、その中の要素。無関係なコンテキストでこれを使用すると、その意図された意味に反し、スクリーンリーダーのアクセシビリティに悪影響を与える可能性があります。

どこでもフィールドセットの境界凡例ノックアウト動作

これを達成するのは簡単ではないので、複製するのが簡単に近づくようにできる限り複雑な部分はすべて隠しました。

@import fieldset-legend ユーティリティを CSS にインポートします。
fieldset-legend クラスをラッパーに追加します
--fl-left プロパティを任意のに設定します。値 (必要に応じて負の値でも)

そして、ライブラリは :first-child を要素の上部で垂直方向の中央に配置し、その後ろにあるものを排除します!

タイトルの周囲にギャップを作成するには、必要に応じて :first-child にパディングを追加します。

ここでの最大の問題は、プレーンテキストノードを fieldset-legend ラッパーに直接配置できないことです。テキストは独自の要素内にネストする必要があります。

また、技術的には、フィールドセットの境界ノックアウトは、上記のように凡例要素の下部に沈み、背景もクリップしません。

ノックアウトが境界線を沈み込むだけを希望する場合は、追加のを指定できます。プロパティ、--fl-sink を境界線の幅と等しく設定します:

他に何か効果はありますか?

そうです!

--fl-left の代替案

--fl-left の代わりに --fl-center を使用できます。
--fl-center を 0px に設定すると、タイトルは上端に沿って水平方向の中央に配置されます。
-10px に設定すると、中心より左に 10px オフセットされます。
15px に設定すると、中心から右に 15px シフトします。

--fl-left または --fl-center の代わりに、--fl-right を使用して期待どおりの動作を行うこともできます。

これら 3 つはすべてです。正、0px、または負の値を指定できます。

タイトル:第一子の代替案

fieldset-legend コンテナ内のタイトルの前に、スクリーンリーダー専用のページジャンプなどの他の要素を配置することが重要な場合があります。

fieldset-legend 要素の直接の子孫のいずれか 1 つにクラス fieldset-legend-title を配置すると、ライブラリはその要素を上部の同じ希望位置に移動し、:first-child だけを残します。

fieldset-legend は ::before 擬似を使用します

クラス名を fieldset-legend から fieldset-legend-after に変更するだけで、代わりに ::after 擬似を使用することができます

fieldset-legend は擬似的なものではありませんか?

これは高度な使用法ですが...

次の値をインセットできます: 0px;ラッパー内の要素を必要に応じてカスタマイズし、fieldset-legend または fieldset-legend-after の代わりに fieldset-legend-custom を使用します。

これにより、ライブラリのクリッピングがすべて削除され、fieldset-legend-custom 要素内のどこでも使用できるカスタムマスクが提供されます。

たとえば、お気に入りの SF 整形ライブラリ、augmented-ui でこれを使用したい場合は、次のようにします。

フォールバック動作

このユーティリティを使用するために必要な制限機能サポートは timeline-scope です。

コンテナスタイルのクエリも必要です。

この記事の最初のデモが Chrome 以外のブラウザでどのように表示されるかは次のとおりです。

picture of the fallback behavior as described below

同じ機械的スタイルを適用して、非静的な位置や分離などの違いを最小限に抑えます。しかし最も注目すべき点は、タイトルをインラインに戻し、次の 2 つの !重要なことを実行することです:

タイトルの色が currentColor になります。タイトルの背後にあるコンテンツが本文から fieldset-legend コンテナの内部に切り替わります。背景は大きく異なる場合があります。 currentColor を使用すると、非フィールドセット内の残りのコンテンツが既に適切に設定されている可能性が高いため、コンテンツが確実に読み取れるようになります。
同様に、タイトル要素に既に独自の背景があるかどうかはわかりません (ただし、持っている場合、境界線の上に配置するためにこのユーティリティは必要ありません)。そのため、背景は強制的に透明になります。 fieldset-legend の背景に currentColor を確保します。これはほとんどの場合、すでに読み取れるようになっています。

特定のフォールバック動作を決定するには、次のように設定できます
--fl-fallback-title-color と --fl-fallback-title-background は、currentColor の代わりに使用されるか、サポートされていない場所でレンダリングされる場合に透明になります。

上記のカスタムデモは、fieldset-legend をサポートしていないブラウザでは次のようになります。

picture of the fallback behaviors as described above