Catégories
Astuces et Design

Deux problèmes de style de l'élément Détails et comment les résoudre

Dans un passé pas trop lointain, même les interactions basiques de type accordéon nécessitaient des écouteurs d'événements JavaScript ou des trucs CSS…. Et, selon la solution utilisée, la modification du code HTML sous-jacent peut devenir compliquée.

Maintenant le

et

les éléments (qui se combinent pour former ce qu'on appelle un «widget de divulgation») ont rendu la création et la maintenance de ces composants relativement simples.

À mon travail, nous les utilisons pour des choses comme les questions fréquemment posées.

Format de question / réponse assez standard

Il y a quelques problèmes à considérer

Parce que l'interactivité de développement et de réduction est déjà intégrée au

et

Balises HTML, vous pouvez désormais créer des widgets de divulgation sans tout JavaScript ou CSS. Mais vous pourriez toujours en vouloir. Laissé sans style,

les widgets de divulgation nous présentent deux problèmes.

Problème 1: Le

le curseur

Bien que le

invite à l’interaction, le curseur par défaut de l’élément est une icône de sélection de texte plutôt que le doigt pointé auquel vous vous attendez:

Nous obtenons le curseur de texte mais préférons peut-être le pointeur pour indiquer une interaction à la place.

Problème 2: éléments de bloc imbriqués dans

Imbrication d'un élément de niveau bloc (par exemple, un titre) à l'intérieur d'un

L'élément pousse ce contenu vers le bas sous le marqueur de flèche, plutôt que de le garder en ligne:

Les éléments de niveau bloc ne partageront pas d'espace avec le marqueur de résumé.

Le correctif de réinitialisation CSS

Pour remédier à ces problèmes, nous pouvons ajouter les deux styles suivants à la section de réinitialisation de nos feuilles de style:

details summary { 
  cursor: pointer;
}

details summary > * {
  display: inline;
}

Lisez la suite pour en savoir plus sur chaque problème et sa solution respective.

Changer le

valeur du curseur

Lorsque les utilisateurs survolent un élément d'une page, nous voulons toujours qu'ils voient un curseur «qui reflète l'interaction utilisateur attendue sur cet élément».

Nous avons brièvement évoqué le fait que, bien que

les éléments sont interactifs (comme un lien ou un bouton de formulaire), son curseur par défaut n'est pas le doigt pointé que nous voyons généralement pour de tels éléments. Au lieu de cela, nous obtenons le text curseur, ce à quoi nous nous attendons généralement lors de la saisie ou de la sélection de texte sur une page.

Pour résoudre ce problème, définissez la valeur du curseur sur pointer:

details summary { 
  cursor: pointer;
}

Certains sites notables incluent déjà cette propriété lorsqu'ils stylisent

éléments. La page MDN Web Docs sur l'élément lui-même fait exactement cela. GitHub utilise également des widgets de divulgation pour certains éléments, comme les actions pour regarder, démarrer et créer un dépôt.

GitHub utilise cursor: pointer sur le

élément de ses menus de widget de divulgation.

Je devine la valeur par défaut cursor: text a été choisie pour indiquer que le texte de résumé peut (avec le reste du contenu d'un widget de divulgation) être sélectionné par l'utilisateur. Mais, dans la plupart des cas, j'estime qu'il est plus important d'indiquer que le

l'élément est interactif.

Texte résumé est toujours sélectionnable, même après avoir changé la valeur du curseur de text à pointer. Notez que la modification du curseur affecte uniquement l'apparence et non sa fonctionnalité.

Affichage imbriqué

contenu en ligne

À l'intérieur de chacun

section des entrées de la FAQ que j'ai partagées plus tôt, je place généralement la question dans une balise d'en-tête appropriée (en fonction du plan de la page):

Will my child's 504 Plan be implemented?

Yes. Similar to the Spring, case managers will reach out to students.

Imbrication d'un titre à l'intérieur

peut être utile pour plusieurs raisons:

  • Style visuel cohérent. J'aime que mes questions de FAQ ressemblent aux autres en-têtes de mes pages.
  • L'utilisation d'en-têtes maintient la structure de page valide pour les utilisateurs d'Internet Explorer et des versions antérieures à Chromium d'Edge, qui ne prennent pas en charge
    éléments. (Dans ces navigateurs, ce contenu est toujours visible, plutôt qu'interactif.)
  • Des en-têtes appropriés peuvent aider les utilisateurs de technologies d'assistance à naviguer dans les pages. (Cela dit, les titres dans
    éléments posent un cas unique, comme expliqué en détail ci-dessous. Certains lecteurs d'écran interprètent ces en-têtes comme ce qu'ils sont, mais d'autres non.)

En-têtes et boutons

Gardez à l'esprit que le

élément est un peu un canard étrange. Il fonctionne comme un bouton à bien des égards. En fait, il a même implicite role=button Cartographie ARIA. Mais, contrairement aux boutons, les en-têtes peuvent être imbriqués directement à l'intérieur

éléments.

Cela nous met – ainsi que les développeurs de navigateurs et de technologies d'assistance – avec une contradiction:

  • Les titres sont autorisés dans
    éléments pour fournir une aide à la navigation dans la page.
  • Les boutons suppriment la sémantique de tout (comme les en-têtes) qui y sont imbriqués.

Malheureusement, les technologies d'assistance ne sont pas cohérentes dans la façon dont elles ont géré cette situation. Certaines technologies de lecture d'écran, comme NVDA et VoiceOver d'Apple, reconnaissent les titres à l'intérieur

éléments. JAWS, en revanche, ne le fait pas.

Ce que cela signifie pour nous, c'est que, lorsque nous plaçons un titre à l'intérieur d'un

, nous pouvez stylisez l'apparence du titre. Mais nous ne pouvons pas garantir que notre titre sera réellement interprété comme un titre!

En d’autres termes, cela ne fait probablement pas de mal d’y mettre un titre. Cela peut ne pas toujours aider.

En ligne toutes les choses

Lorsque vous utilisez une balise de titre (ou un autre élément de bloc) directement dans notre

, nous voudrons probablement changer sa display style à inline. Sinon, nous obtiendrons un habillage indésirable, comme l'icône de flèche de développement / réduction affichée au-dessus de l'en-tête, plutôt qu'à côté.

Nous pouvons utiliser le CSS suivant pour appliquer un display valeur de inline à chaque titre – et à tout autre élément imbriqué directement dans le

:

details summary > * { 
  display: inline;
}

Quelques notes sur cette technique. Tout d'abord, je recommande d'utiliser inline, et pas inline-block, car le problème de retour à la ligne se produit toujours avec inline-block lorsque le texte du titre dépasse une ligne.

Deuxièmement, plutôt que de changer le display valeur des éléments imbriqués, vous pourriez être tenté de remplacer

par défaut de l'élément display: list-item valeur avec display: flex. Au moins je l'étais! Cependant, si nous faisons cela, le marqueur de flèche disparaîtra. Oups!

Astuce bonus: exclure Internet Explorer de vos styles

J'ai mentionné précédemment qu'Internet Explorer et les versions antérieures à Chromium (alias EdgeHTML) d'Edge ne prennent pas en charge

éléments. Ainsi, à moins que nous n'utilisions des polyfills pour ces navigateurs, nous souhaitons peut-être nous assurer que nos styles de widget de divulgation personnalisés ne leur sont pas appliqués. Sinon, nous nous retrouvons dans une situation où tout notre style en ligne brouille l'élément.

En ligne

les en-têtes peuvent avoir des effets étranges ou indésirables dans Internet Explorer et EdgeHTML.

De plus, le

l'élément n'est plus interactif lorsque cela se produit, ce qui signifie que la valeur par défaut du curseur text le style est plus approprié que pointer.

Si nous décidons que nous voulons que nos styles de réinitialisation ciblent uniquement les navigateurs appropriés, nous pouvons ajouter une requête de fonctionnalité qui empêche IE et EdgeHTML d'avoir nos styles appliqués. Voici comment nous y parvenons en utilisant @supports pour détecter une fonctionnalité que seuls ces navigateurs prennent en charge:

@supports not (-ms-ime-align: auto) {

  details summary { 
    cursor: pointer;
  }

  details summary > * { 
    display: inline;
  }

  /* Plus any other 
/ styles you want IE to ignore. }

En fait, IE ne prend pas du tout en charge les requêtes de fonctionnalités, il ignorera donc tout ce qui se trouve dans le bloc ci-dessus, ce qui est bien! EdgeHTML Est-ce que prend en charge les requêtes de fonctionnalités, mais il n'appliquera pas non plus quoi que ce soit dans le bloc, car c'est le seul moteur de navigateur qui prend en charge -ms-ime-align.

La principale mise en garde ici est qu'il existe également quelques anciennes versions de Chrome (à savoir 12-27) et Safari (macOS et iOS versions 6-8) qui prennent en charge

mais ne prend pas en charge les requêtes de fonctionnalités. L'utilisation d'une requête de fonctionnalité signifie que ces navigateurs, qui représentent environ 0,06% de l'utilisation mondiale (en janvier 2021), n'appliqueront pas non plus nos styles de widgets de divulgation personnalisés.

Utilisant un @supports selector(details) bloquer, au lieu de @supports not (-ms-ime-align: auto), serait une solution idéale. Mais les requêtes de sélecteur ont encore moins de prise en charge du navigateur que les requêtes de fonctionnalités basées sur les propriétés.

Dernières pensées

Une fois que nous avons défini notre structure HTML et nos deux styles de réinitialisation CSS ajoutés, nous pouvons embellir tous nos widgets de divulgation comme nous le souhaitons. Même certains styles de couleur de bordure et d'arrière-plan simples peuvent grandement contribuer à l'esthétique et à la convivialité. Sachez simplement que la personnalisation du

les marqueurs peuvent devenir un peu compliqués!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *