Interactivity - Propriété CSS

Schéma de la syntaxe de interactivity.

Description de la propriété interactivity.

⚠

La prise en charge de la propriété interactivity est encore insuffisante, en particulier sur les navigateurs Firefox   et Safari  .

interactivity définit si un élément est inerte ou non. Un élément inerte comporte les caractéristiques suivantes :

• La forme du curseur de souris doit être none quelque soit la valeur donnée à la propriété cursor.
• La sélection de texte se comporte comme si la propriété user-select avait la valeur none quelque soit la valeur prévue.
• Si l'élément est éditable (ou son noeud texte), il doit se comporter comme s'il était non éditable.
• Le texte de l'élément n'est pas pris en compte dans les recherches.
• Si l'élément peut être redimensionné, il se comporte comme si sa propriété resize était placée sur none. Cependant le symbole de redimensionnement reste visible.

Il est recommandé de visuellement indiquer qu'un élément ou une partie de l'arborescence est inerte, par exemple en la grisant, car cela n'est pas automatique.

Lorsque il y a conflit entre CSS et HTML (attribut inert), l'attribut du HTML rend l'élément inerte, il est prioritaire, sans qu'il soit possible d'altérer ceci par CSS. En effet, la propriété interactivity n'accepte pas de valeurs comme none, seulement la valeur auto.

Remarque. Lorsqu'une boîte de dialogue est ouverte, le reste de la page en arrière-plan est déclaré automatiquement inerte. Ceci ne sera pas modifiable par CSS.

Reportez-vous également à la propriété user-select dont le rôle est équivalent à interactivity pour ce qui est des événements souris.

Valeurs pour interactivity.

• interactivity: auto;

  Le navigateur détermine lui-même si l'élément doit être inerte ou pas. En général, l'élément est déclaré non inerte.

  
  Zone de texte éditable.
  interactivity:auto;
• interactivity: inert;

  L'élément et ses descendants est déclaré inerte. Sur notre exemple, les descendants sont une zone de saisie du type input et un bloc div déclaré editable;

  Dans le premier exemple, rien a été fait pour signaler à l'utilisateur que cette partie de la page est inerte. Dans le deuxième on a simplement grisé les couleurs. C'est mieux non ?

  
  Zone de texte éditable.

  interactivity:inert;

  
  Zone de texte éditable.

  interactivity:inert;
color:gray;

  ⚠ Étant donné que la propriété interactivity n'est pas reconnue par Firefox  , ni par Safari  , nous avons dû utiliser une directive @supports pour griser les éléments du deuxième exemple uniquement sur les navigateurs qui traitent la propriété interactivity. Sans cela la zone paraîtrait inerte sans l'être.

• interactivity: initial; (auto) interactivity: inherit; interactivity: revert; interactivity: revertLayer; interactivity: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de interactivity.

La propriété interactivity peut être animée de façon discrète. C'est ce qui a été fait sur l'exemple ci-dessous. Ce dernier comporte une zone déclarée éditable (attribut editable dans le code HTML). Sur les navigateurs qui reconnaissent la propriété interactivity, nous animons également la couleur du fond, d'où la présence d'une directive @supports.

On remarque également les étapes 50% et 51% pour simuler un passage brutal du blanc au gris ou vice-versa.

Exemple interactif avec la propriété interactivity.

Le simulator présente quelques zones de saisie et permet de voir l'effet de interactivity sur ces enfants, en occurrence une balise textarea, des balises input du type radio, et un lien. On constate que l'élément est figé dans sa situation préalable. C'est à dire que les valeurs des zones de saisies sont maintenues, si certaines options sont cochées, elles restent cochées, la dimension du textarea est figée, etc.

Compatibilité des navigateurs avec interactivity.

La prise en charge de la propriété interactivity est encore insuffisante. En particulier Firefox   et Safari   ne la traitent pas encore (2026).

1

Propriété
interactivity

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Opéra Mobile

Samsung Internet

Edge

Safari

Chrome pour Androïd

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Opéra

Androïd Brower

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

Caniuse

Histoire de la propriété interactivity.

• Module CSS - Interface utilisateur de base - Niveau 4

  Ce niveau 4 de la spécification reprend les définitions déjà établies au niveau 3. Il apporte également quelques ajouts : la gestion du marqueur de texte est plus fine, plusieurs propriétés concernent le pointeur de souris, etc.

  Concernant interactivity. Introduction de la nouvelle propriété interactivity.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de l'interface utilisateur.

Propriétés :