% CSS: &#s border Knockout-Verhalten für jedes Element!

Der Legende nach wird eines Tages der wunderschöne Knockout-Effekt für den Fieldset-Rand mit jedem HTML-Element möglich sein.

Und ich habe tolle Neuigkeiten: In Chrome ist dieser Tag heute!

Fieldset? Legende?

Wenn Sie nicht vertraut sind, sehen Sie hier den Rand-Knockout-Effekt bei einem Feldsatz mit einer Legende:

_{Beispiele für Feldsatzlegenden in einem leicht modifizierten Screenshot von VanillaHTML}

Die Breite der Legende (Titel) schneidet automatisch ein Loch im Rand des Feldsatzes.

Obwohl es technisch möglich ist, einfach

und Überall wird die Verwendung eines

im Allgemeinen nicht empfohlen. außerhalb eines

und ohne Elemente darin, da der Hauptzweck eines Feldsatzes darin besteht, zusammengehörige Formulareingaben semantisch zu gruppieren. Die Verwendung in nicht verwandten Kontexten verstößt gegen die beabsichtigte Bedeutung und kann sich negativ auf die Zugänglichkeit für Screenreader auswirken.

Fieldset-Randlegenden-Knockout-Verhalten überall

Dies ist nicht trivial zu bewerkstelligen, daher habe ich so viel Komplexität wie möglich ausgeblendet, um die Replikation so einfach wie möglich zu gestalten:

1. @Importieren Sie das Fieldset-Legend-Dienstprogramm in Ihr CSS.
2. Fügen Sie die Fieldset-Legend-Klasse zum Wrapper hinzu
3. Setzen Sie die Eigenschaft --fl-left auf einen beliebigen Wert (auf Wunsch auch negative Werte)

Und die Bibliothek positioniert das :first-child so, dass es vertikal mit der Oberseite des Elements zentriert ist, und eliminiert den Inhalt dahinter!

Um eine Lücke um den Titel herum zu schaffen, fügen Sie dem :first-child nach Wunsch Auffüllungen hinzu.

Das größte Problem hierbei ist, dass Sie keine Nur-Text-Knoten direkt in den Fieldset-Legend-Wrapper einfügen können, der Text muss in seinen eigenen Elementen verschachtelt sein.

Außerdem technisch gesehen sinkt die Rahmenaussparung von Fieldset nicht sinkt bis zum unteren Rand des Legendenelements und schneidet auch den Hintergrund ab, wie es oben der Fall ist.

Wenn Sie möchten, dass die Aussparung nur durch den Rand sinkt, können Sie eine zusätzliche Eigenschaft --fl-sink und setzen Sie sie gleich Ihrer Rahmenbreite:

Macht es sonst noch etwas?

Das tut es!

--fl-left Alternativen

Anstelle von --fl-left können Sie auch --fl-center verwenden.
Wenn Sie --fl-center auf 0px setzen, wird der Titel horizontal am oberen Rand zentriert.
Wenn Sie es auf -10 Pixel einstellen, wird es um 10 Pixel nach links von der Mitte versetzt.
Stellen Sie es auf 15 Pixel ein und es wird um 15 Pixel nach rechts von der Mitte verschoben.

Anstelle von --fl-left oder --fl-center können Sie auch --fl-right mit dem erwarteten Verhalten verwenden.

Alle drei davon sind und kann positiv, 0px oder negativ sein.

Titel als:Erstkind-Alternativen

Es kann für Sie wichtig sein, andere Elemente, wie z. B. Seitensprünge nur für Screenreader, vor dem Titel im Fieldset-Legend-Container zu platzieren.

Platzieren Sie einen Fieldset-Legend-Titel der Klasse auf EINEM der direkten Nachkommen Ihres Fieldset-Legend-Elements und die Bibliothek hebt dieses Element an die gleiche gewünschte Position oben und lässt :first-child allein.

Fieldset-Legend verwendet das ::before-Pseudo

Sie können stattdessen das Pseudonym ::after verwenden. Ändern Sie dazu einfach den Klassennamen von „fieldset-legend“ in „fieldset-legend-after“

Fieldset-Legende kein Pseudo?

Dies ist eine fortgeschrittene Verwendung, aber...

Sie können Folgendes einfügen: 0px; ein Element innerhalb des Wrappers, passen Sie es nach Ihren Wünschen an und verwenden Sie Fieldset-Legend-Custom anstelle von Fieldset-Legend oder Fieldset-Legend-After.

Dadurch werden alle Ausschnitte der Bibliothek entfernt und Sie erhalten eine benutzerdefinierte Maske, die Sie überall im Fieldset-Legend-Custom-Element verwenden können.

Wenn Sie dies beispielsweise mit Ihrer bevorzugten Science-Fiction-Shaping-Bibliothek augmented-ui verwenden möchten:

Fallback-Verhalten

Die einschränkende Funktionsunterstützung, die für die Verwendung dieses Dienstprogramms erforderlich ist, ist der Timeline-Scope.

Abfragen im Containerstil sind ebenfalls erforderlich.

So sieht die erste Demo in diesem Artikel in Nicht-Chrome-Browsern aus:

Es wendet das gleiche mechanische Design an, um Unterschiede zu minimieren, wie z. B. eine nicht statische Position und Isolierung: isolieren; Vor allem aber verschiebt es den Titel zurück in die Zeile und führt zwei !wichtige Dinge aus:

1. Die Titelfarbe wird zur aktuellen Farbe – der Inhalt hinter dem Titel wechselt vom Körper in das Innere Ihres Fieldset-Legend-Containers, der möglicherweise einen ganz anderen Hintergrund hat. Durch die Verwendung von currentColor wird sichergestellt, dass der Inhalt lesbar ist, da der Rest des Inhalts in Ihrem Nicht-Feldsatz wahrscheinlich bereits entsprechend eingestellt ist.
2. Ebenso kann ich nicht wissen, ob Ihr Titelelement bereits einen eigenen Hintergrund hatte (obwohl Sie in diesem Fall dieses Dienstprogramm nicht benötigen, um es über dem Rand zu positionieren), sodass der Hintergrund transparent sein muss. Sicherstellung der aktuellen Farbe auf dem Hintergrund der Fieldset-Legende, der in den meisten Fällen bereits lesbar ist.

Um ein bestimmtes Fallback-Verhalten festzulegen, können Sie festlegen
--fl-fallback-title-color und --fl-fallback-title-background, die anstelle von currentColor oder transparent verwendet werden, falls es irgendwo ohne Unterstützung gerendert wird.

Und so sieht die benutzerdefinierte Demo oben in Browsern aus, die Fieldset-Legend nicht unterstützen:

Weitere Fallback-Unterstützung

Wenn Sie wissen, wie man meine alte Space Toggle-Technik verwendet, bietet die Bibliothek auch Folgendes:

--fl-supported, ein Leerzeichen, wenn es unterstützt wird, und ein Initial, wenn es nicht unterstützt wird

und

--fl-not-supported, was das Gegenteil ist.

---

Kontakt öffnen?

Bitte kontaktieren Sie uns, wenn Sie dabei Hilfe benötigen, Funktionswünsche haben oder teilen möchten, was Sie erstellt haben!

% CSS: s border Knockout-Verhalten für jedes Element!	% CSS: s border Knockout-Verhalten für jedes Element!	DEV Blog	% CSS: s border Knockout-Verhalten für jedes Element!	% CSS: s border Knockout-Verhalten für jedes Element!

?@JaneOri.% CSS:

s border

Knockout-Verhalten für jedes Element!

?@Jane0ri

Das obige ist der detaillierte Inhalt von% CSS: &#s border Knockout-Verhalten für jedes Element!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!