`::details-content` - Sélecteur CSS

::details-content

Résumé des caractéristiques du sélecteur `::details-content`

Description rapide

Ce pseudo-élément cible le contenu détaillé d'une balise details.

Statut

Standard

Module W3C

Module CSS - Pseudo-éléments

Références (W3C)

CSS Pseudo-Elements Module Level 4

Statut du document: WD (document de travail)

Pseudo-élément `::details-content` - Description

Le sélecteur ::details-content est très spécifique : il cible, dans une balise details, le texte qui est normalement masqué et qui s'affiche lorsqu'on demande à le voir.

En HTML le code est celui-ci :


	details
		summaryRésumé du texte (toujours visible)./summary.
		Texte affiché à la demande.
	/details

Ce qui donne en visualisation :

Description de la balise details.

Une balise details s'affiche en montrant seulement la partie résumée, avec un petit triangle sur la gauche. En cliquant sur ce triangle on révèle le texte complet.

Remarque. Le triangle noir peut être ciblé par le pseudo-élément ::marker en cas de besoin.

Pseudo-élément `::details-content` - Exemples d'utilisation.

Utilisation de `::details-content`.

Cliquez sur le triangle pour demander l'affichage du détail. Les styles demandent l'affichage en rouge et appliquent une transition pour éviter un affichage trop brutal du texte.

Le sélecteur ::details-content.

Le sélecteur par pseudo-élément ::details-content s'applique uniquement aux balises details. Il cible le texte masqué qui s'affiche lorsque l'internaute clique sur le triangle.

Sur cet exemple, nous avons mis en place une transition sur les propriété opacity et content-visibility afin de rendre progressif l'affichage et le masquage du détails. Notez l'utilisation du critère [open] sur la balise details.

Notez l'option allow-discrete dans le code de la transition, il correspond à la propriété transition-behavior. La propriété content-visibility est en effet discrète (passage brutal d'une valeur à l'autre pendant les animations ou les transitions). En utilisant allow-discrete on permet au contenu de rester visible pendant toute la durée de la transition.

Le code complet devrait être amélioré mais voici les bases pour réaliser un menu déroulant. Pour faire en sorte qu'un seul menu soit ouvert à la fois nous avons attribué un name identique à chacun des balises details (ce n'est pas du CSS).

Menu 1

Commande 1
Commande 2
Commande 3

Menu 2

Commande 1
Commande 2
Commande 3
Commande 4

Pseudo-élément `::details-content` - Compatibilité des navigateurs.

Le pseudo-élément ::details-content est assez bien reconnu par les navigateurs récents.

Colonne 1

Prise en charge par les navigateurs du pseudo-élément ::details-content qui cible le texte masqué dans une balise details.

Remarques :

(1) Ne prend pas en charge le chaînage des pseudo-éléments après ::details-content.

Pseudo-élément
::details-content

Estimation de la prise en charge globale.

87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Safari sur IOS

Opéra

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Pseudo-élément `::details-content` - Historique.

Module CSS - Pseudo-éléments - Niveau 4

Concernant ::details-content Introduction du pseudo-élément ::details-content qui, comme son nom l'indique, cible le détail d'une balise details.

15 Janvier 2015
Document de travail.

Voir aussi...

Quelques pseudo-classes et pseudo-éléments qui ciblent des éléments en fonction de leur état, ou de l'état de la fenêtre. Nous vous invitons à regarder également les pages suivantes :

::backdrop

Pseudo-élément ciblant l'élément ajouté par les navigateurs en arrière des boites de dialogue ou des éléments affichés en plein écran.

⚠

:closed

Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.

::details-content

Ce pseudo-élément cible le contenu détaillé d'une balise details.

::part()

Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).

:fullscreen

Pseudo-classe désignant les éléments affichés en plein écran pendant le temps où ils sont affichés en plein écran.

:modal