Deux numéros styliser l'élément de détails et comment les résoudre

Auparavant, la création de blocs de contenu extensibles simples nécessitait JavaScript ou des solutions de contournement CSS complexes. La modification du HTML pourrait également devenir lourde. Maintenant, le<details></details> et<summary></summary> Les éléments (formant un "widget de divulgation") simplifient cela significativement. Nous les utilisons largement au travail pour les FAQ, par exemple.

Relever les défis de style courants

Alors que<details></details> et<summary></summary> Fournit intrinsèquement les fonctionnalités d'étendue / effondrement, vous pourriez toujours avoir besoin de CSS pour une présentation optimale. Sans style, deux problèmes clés surviennent:

Numéro 1:<summary></summary> Curseur

Le<summary></summary> élément, bien qu'interactif, par défaut un curseur de sélection de texte au lieu du pointeur attendu.

Numéro 2: Éléments de blocs imbriqués dans<summary></summary>

Nidification des éléments au niveau du bloc (comme les titres)<summary></summary> Les fait apparaître sous la flèche, pas en ligne.

La solution CSS

Pour les résoudre, ajoutez ces styles à votre réinitialisation CSS:

 Résumé des détails {
  curseur: pointeur;
}

Résumé des détails> * {
  Affichage: en ligne;
}

Examinons chaque problème et sa solution en détail.

Personnalisation du<summary></summary> Curseur

Un curseur doit refléter visuellement son interaction prévue. Le curseur de texte par défaut sur<summary></summary> Les éléments, bien que techniquement corrects (le texte est sélectionnable), est moins intuitif qu'un pointeur.

La solution est simple:

 Résumé des détails {
  curseur: pointeur;
}

De nombreux sites Web de premier plan, y compris les documents Web MDN et GitHub, utilisent déjà ce style pour leurs widgets de divulgation. Le cursor: text reflète probablement la sélection du texte sommaire, mais un pointeur est généralement préférable pour les éléments interactifs. Notez que la modification du curseur affecte uniquement l'apparence visuelle; La sélection reste inchangée.

Affichage de imbriqué<summary></summary> Contenu en ligne

Pour les FAQ, j'enroule souvent des questions dans les titres (par exemple,<h3></h3> ) dans<summary></summary> :

<details><summary><h3 id="Le-plan-de-mon-enfant-sera-t-il-mis-en-œuvre"> Le plan 504 de mon enfant sera-t-il mis en œuvre?</h3></summary><p> Oui. Semblable au printemps, les gestionnaires de cas contacteront les étudiants.</p></details>

Cela offre plusieurs avantages:

• Style cohérent: maintient la cohérence visuelle avec les autres titres.
• IE / Edgehtml Compatibilité: fournit le secours aux navigateurs plus âgés qui ne prennent pas en charge<details></details> .
• Accessibilité: la navigation sur la technologie d'assistance AID (bien que l'interprétation des lecteurs d'écran puisse varier, comme discuté ci-dessous).

En-têtes par rapport aux boutons

Le<summary></summary> L'élément se comporte comme un bouton (il a implicitement role=button ), mais contrairement aux boutons, il permet des en-têtes imbriqués. Cela crée un conflit:

• Les titres aident la navigation.
• Les boutons dépouillent généralement la sémantique à partir d'éléments imbriqués.

La compatibilité du lecteur d'écran est incohérente ici. NVDA et la voix off reconnaissent les titres à l'intérieur<summary></summary> , mais les mâchoires ne le font pas. Par conséquent, tout en stylisant des titres à l'intérieur<summary></summary> est possible, leur interprétation sémantique n'est pas garantie.

Style en ligne

Pour empêcher la flèche d'apparaître au-dessus de la rubrique, utilisez le style en ligne pour les éléments imbriqués directement à l'intérieur<summary></summary> :

 Résumé des détails> * {
  Affichage: en ligne;
}

Utilisez inline , pas inline-block , pour éviter les problèmes d'emballage. Tout en tentant d'utiliser display: flex sur<summary></summary> , cela cache la flèche.

Bonus: exclusion des styles d'explorateur Internet

Puisque les versions IE et plus anciennes ne prennent pas en charge<details></details> , évitez d'appliquer des styles personnalisés à l'aide d'une requête de fonctionnalité:

 @Supports Not (-ms-ime-Align: Auto) {
  Résumé des détails {
    curseur: pointeur;
  }
  Résumé des détails> * {
    Affichage: en ligne;
  }
  /* Autre<details> / /<summary> Styles * /
}</summary></details>

IE ignore complètement ce bloc. EdgeHTML l'ignore également en raison de la vérification -ms-ime-align . Notez que les très vieilles versions Chrome et Safari (avec part de marché négligeables) manquent également de support de requête. Un bloc @supports (details) serait idéal mais a encore moins de support de navigateur.

Conclusion

Avec la bonne structure HTML et ces styles CSS, vous pouvez facilement personnaliser vos widgets de divulgation. N'oubliez pas que pendant le style<summary></summary> Les éléments sont simples, la compatibilité des lecteurs d'écran pour les en-têtes imbriqués nécessite une considération.

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!