::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)
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 le contenu d'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.

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

Utilisation de ::details-content.

Cliquez sur le triangle pour demander l'affichage du détail. Pour voir l'effet de ::details-content, utilisez un autre navigateur que Firefox   car ce dernier nécessite d'activer la fonctionnalité.

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.

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

Le pseudo-élément ::details-content est désactivé par défaut sur Firefox  . Il peut être activé en positionnant le flag mdn-css_selectors_details-content à true. Voir comment accéder aux flags sur Firefox.

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) Désactivé par défaut sur Firefox. Peut être activé avec le flag layout.css.details-content.enabled.

1
Pseudo-élément
::details-content
Estimation de la prise en charge globale.
79%

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

Opéra

Safari

Safari sur IOS

Chrome

Firefox

1

Samsung Internet

Edge

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.

Voir aussi...

Quelques pseudo-classes et pseudo-éléments ciblent le texte recherché. 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é.
    ::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
    Pseudo-classe désignant les éléments affichés en modal : qui bloquent les interactions avec les autres éléments.
    ⚠
    :open
    Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
    ⚠
    :picture-in-picture
    Pseudo classe désignant un élément (le plus souvent une vidéo) affiché dans une fenêtre ne défilant pas avec le reste de la page.