% CSS : comportement knock-out de la bordure de pour n'importe quel élément !

La légende raconte qu'un jour viendra où le magnifique effet de suppression de bordure de champs sera possible avec n'importe quel élément HTML.

Et j'ai une excellente nouvelle : dans Chrome, ce jour est aujourd'hui !

Ensemble de champs ? Légende?

Si vous n'êtes pas familier, voici l'effet de suppression de bordure sur un ensemble de champs avec une légende :

_{exemples de légendes d'ensembles de champs dans une capture d'écran légèrement modifiée de VanillaHTML}

La largeur de la légende (titre) coupe automatiquement un trou dans la bordure de l'ensemble de champs.

Bien que techniquement possible, il suffit d'utiliser

et n'importe où, il n'est généralement pas recommandé d'utiliser un

en dehors d'un et sans aucune éléments à l'intérieur, car l'objectif principal d'un ensemble de champs est de regrouper sémantiquement les entrées de formulaire liées. Son utilisation dans des contextes sans rapport va à l’encontre de son sens prévu et peut avoir un impact négatif sur l’accessibilité pour les lecteurs d’écran.

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

pour nimporte quel élément !

?@Jane0ri

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!