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

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

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

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

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

_{VanillaHTML からわずかに変更されたスクリーンショットのフィールドセットの凡例}

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

技術的には

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

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

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

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

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

1. @import fieldset-legend ユーティリティを CSS にインポートします。
2. fieldset-legend クラスをラッパーに追加します
3. --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 以外のブラウザでどのように表示されるかは次のとおりです。

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

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

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

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

さらなるフォールバックサポート

私の古いスペース切り替えテクニックの使用方法を知っている場合は、ライブラリには次のものも用意されています。

--fl-supported、サポートされている場合はスペース、サポートされていない場合は先頭になります

と

--fl-not-supported、その逆です。

---

連絡先を開きますか?

この問題に関してサポートが必要な場合、機能リクエストがある場合、または作成したものを共有したい場合は、ぜひご連絡ください。

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

?@JaneOri.% CSS:

s border

要素に対するノックアウト動作!

?@Jane0ri

以上が% CSS:

&#s border

要素に対するノックアウト動作!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。