Résolu avec: a (): espacement vertical dans un texte de forme longue

Gérer l'espacement vertical dans le texte long, en particulier dans les sites Web axés sur la CMS, présente un défi persistant pour les développeurs. Ceci est souvent abordé avec des CSS personnalisés, mais obtenir des résultats cohérents et prévisibles peut être étonnamment difficile. Cet article explore une solution moderne tirant parti du sélecteur :has() CSS.

Firefox nécessite actuellement le drapeau layout.css.has-selector.enabled (in about:config) pour le support :has().

La complexité de l'espacement vertical typographique

En appliquant simplement les marges supérieure et inférieure à des éléments comme <code><p></p> , <h2></h2>, et <ul></ul> ne résout pas le problème. Le comportement idéal nécessite:

• pas d'espace supplémentaire au-dessus du premier élément ou en dessous du dernier dans un bloc de texte long. Cela garantit un placement prévisible des éléments environnants.
• Espacement cohérent entre les sections (un titre et son contenu associé). Cela signifie un espacement significatif avant une rubrique, à moins que il suit immédiatement une autre rubrique.

approches traditionnelles et leurs limites

La solution commune consiste à envelopper le contenu de forme longue dans une div (par exemple, .rich-text) et à l'application de CSS pour gérer les marges. Cependant, cette approche présente des inconvénients:

• Structure HTML rigide: Bestion d'une classe de wrapper nécessite une structure HTML spécifique, potentiellement s'affronter avec le code existant ou le contenu généré par CMS. Le contrôle précis sur les marges des premiers / derniers éléments restreint encore la structure (par exemple, .rich-text > *:first-child).
• Propriétés de marge mixte: Les solutions traditionnelles se mélangent souvent margin-top et margin-bottom, conduisant à des complexités avec des marges d'effondrement. Cela peut être moins intuitif et plus difficile à maintenir.
• Effondrer les marges: Les marges d'effondrement, bien que parfois bénéfiques, ajoutent de la complexité et peuvent entraîner un comportement inattendu, en particulier lorsque la disposition change (par exemple, le passage à Flexbox).

une solution moderne avec: a ()

Cet article propose une solution utilisant :has(), visant les améliorations:

• Aucun wrapper requis: élimine le besoin d'une classe d'emballage, simplifiant la structure HTML.
• Direction cohérente de la marge: utilise une seule direction de marge (par exemple, margin-bottom), améliorant la lisibilité et la maintenabilité.
• Évite l'effondrement des marges: L'approche minimise la dépendance à l'effondrement des marges.
• CSSS plus propre: réduit le besoin de réglage puis de styles de remplacement.

Considérations et mises en garde

• Compatibilité du navigateur: :has() Le support n'est pas universel; Vérifiez la compatibilité du navigateur avant la mise en œuvre.
• Prise en charge des éléments limités: L'exemple fourni ne couvre pas tous les éléments typographiques (par exemple, <blockquote></blockquote>). Ceci est facilement extensible.
• Éléments non typographiques: La solution se concentre principalement sur les éléments de texte de base; La gestion d'autres éléments (images, tableaux) peut nécessiter des sélecteurs supplémentaires.
• Restrictions de niveau d'en-tête: L'exemple ne gère pas les titres consécutifs du même niveau ou des niveaux de cap sautés.
• Spécificité et ITCSS: L'utilisation de :where() permet une spécificité cohérente quelle que soit la structure du projet. L'approche suggère de placer ce CSS dans la couche "Elements" d'une architecture ITCSS.

Conclusion

Cette approche :has() offre une alternative plus propre et plus flexible aux méthodes traditionnelles pour gérer l'espacement vertical dans un texte long. Bien qu'il ne soit pas entièrement simple, il traite de nombreuses limites des approches précédentes, ce qui donne des résultats plus maintenables et prévisibles. Les commentaires et les améliorations sont les bienvenus.

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!