% CSS : comportement knock-out de la bordure de

pour n'importe quel élément !

Comportement de suppression de la légende de la bordure du jeu de champs n'importe où

Ce n'est pas trivial à réaliser, j'ai donc caché toute la complexité que je pouvais pour que ce soit aussi trivial à reproduire :

1. @importez l'utilitaire Fieldset-Legend dans votre CSS.
2. Ajouter la classe Fieldset-Legend au wrapper
3. Définissez la propriété --fl-left sur n'importe quel valeur (même des valeurs négatives si vous le souhaitez)

Et la bibliothèque positionnera le :first-child de sorte qu'il soit centré verticalement avec le haut de l'élément et éliminera les éléments derrière lui !

Pour créer un espace autour du titre, ajoutez un remplissage au :first-child comme vous le souhaitez.

Le plus gros problème ici est que vous ne pouvez pas placer les nœuds de texte brut directement dans le wrapper Fieldset-Legend, le texte doit être imbriqué à l'intérieur de leurs propres éléments.

De plus, techniquement la bordure de l'ensemble de champs ne s'enfonce au bas de l'élément de légende et ne coupe pas également l'arrière-plan, comme c'est le cas ci-dessus.

Si vous préférez que le knock-out ne coule qu'à travers la bordure, vous pouvez fournir une propriété, --fl-sink et définissez-la égale à la largeur de votre bordure :

Est-ce que ça fait autre chose ?

C'est le cas !

--fl-left alternatives

Au lieu de --fl-left, vous pouvez utiliser --fl-center.
Si vous définissez --fl-center sur 0px, le titre sera centré horizontalement le long du bord supérieur.
Si vous le définissez sur -10px, il sera décalé de 10px à gauche du centre.
Réglez-le sur 15 px et il se décalera de 15 px à droite du centre.

Au lieu de --fl-left ou --fl-center, vous pouvez également utiliser --fl-right avec le comportement attendu.

Tous les trois sont et peut être positif, 0px ou négatif.

Titre comme : alternatives au premier enfant

Il peut être important que vous placiez d'autres éléments, tels que les sauts de page réservés aux lecteurs d'écran, avant le titre dans le conteneur Fieldset-Legend.

Placez une classe Fieldset-legend-title sur l'un des descendants directs de votre élément Fieldset-Legend et la bibliothèque élèvera cet élément à la même position souhaitée en haut, laissant :first-child seul.

fieldset-legend utilise le pseudo ::before

Vous pouvez lui faire utiliser le pseudo ::after à la place, changez simplement le nom de la classe de Fieldset-legend en Fieldset-legend-after

fieldset-legend pas de pseudo ?

Il s'agit d'un usage avancé mais...

Vous pouvez insérer : 0px ; un élément à l'intérieur du wrapper, personnalisez-le comme vous le souhaitez et utilisez Fieldset-legend-custom au lieu de Fieldset-legend ou Fieldset-legend-after.

Cela supprime tous les découpages de la bibliothèque et vous donne un masque personnalisé à utiliser n'importe où à l'intérieur de l'élément fieldset-legend-custom.

Par exemple, si vous souhaitez l'utiliser avec votre bibliothèque de mise en forme de science-fiction préférée, augmentéd-ui :

Comportement de repli

La prise en charge des fonctionnalités limitantes requises pour utiliser cet utilitaire est la portée de la chronologie.

Des requêtes de style conteneur sont également requises.

Voici à quoi ressemble la première démo de cet article dans les navigateurs autres que Chrome :

Il applique le même style mécanique pour minimiser les différences, telles qu'une position non statique et une isolation : isoler ; mais plus particulièrement, il remet le titre en ligne et fait deux choses !importantes :

1. La couleur du titre devient currentColor - le contenu derrière le titre passe du corps à l'intérieur de votre conteneur Fieldset-Legend, qui peut avoir un arrière-plan très différent. L'utilisation de currentColor garantit que le contenu est lisible, car le reste du contenu de votre ensemble de champs non-a-fields est probablement déjà défini de manière appropriée.
2. Dans le même ordre d'idées, je ne peux pas savoir si votre élément de titre avait déjà son propre arrière-plan (bien que si c'était le cas, vous n'avez pas besoin de cet utilitaire pour le positionner au-dessus de la bordure), donc l'arrière-plan est forcé d'être transparent, assurer currentColor sur l'arrière-plan de la légende du jeu de champs, qui dans la plupart des cas sera déjà lisible.

Pour déterminer un comportement de secours spécifique, vous pouvez définir
--fl-fallback-title-color et --fl-fallback-title-background qui seront utilisés à la place de currentColor ou transparent dans le cas où il serait rendu quelque part sans support.

Et voici à quoi ressemble la démo personnalisée ci-dessus dans les navigateurs qui ne prennent pas en charge Fieldset-legend :

Prise en charge supplémentaire

Si vous savez utiliser mon ancienne technique Space Toggle, la bibliothèque propose également :

--fl-supported, qui sera un espace lorsqu'il est pris en charge et une initiale lorsqu'il n'est pas pris en charge

et

--fl-not-supported, ce qui est le contraire.

Ouvrir contact ?

Veuillez nous contacter si vous avez besoin d'aide pour tout cela, si vous avez des demandes de fonctionnalités ou si vous souhaitez partager ce que vous avez créé !

% CSS : comportement knock-out de la bordure de pour nimporte quel élément !	% CSS : comportement knock-out de la bordure de pour nimporte quel élément !	DEV Blog	% CSS : comportement knock-out de la bordure de pour nimporte quel élément !	% CSS : comportement knock-out de la bordure de pour nimporte quel élément !

?@JaneOri.% CSS : comportement knock-out de la bordure de