Interface utilisateur simple CSS

Une simple interface utilisateur en action

Pour dcouvrir comment les proprits simples de l'interface utilisateur peuvent modifier l'apparence des lments de l'interface, interagissez avec les lments de cet exemple. Notez que certaines fonctionnalits de cet exemple amliorent l'utilisabilit tandis que d'autres la dgradent.

<div><span contenteditable>Modifier ce texte </span></div>
<fieldset>
  <legend>Testez ces faux contrles de formulaire</legend>
  <input type="checkbox" id="check" />
  <input type="radio" name="a" />
  <input type="radio" name="a" />
  <input type="range" />
  <progress></progress>
</fieldset>
<fieldset>
  <legend>
    Faites attention  ne pas nuire  l'utilisabilit&nbsp;: essayez de
    redimensionner ces lments.
  </legend>
  <textarea>
  cursor: wait;
  </textarea>
  <textarea>
  resize: none;
  </textarea>
  <textarea>
  pointer-events: none;
  </textarea>
</fieldset>

body {
  font-family: sans-serif;
  font-size: 1.25rem;
}
[contenteditable] {
  cursor: copy;
  caret-color: magenta;
  border: 1px solid #cccccc;
}
:focus {
  outline: dashed magenta 3px;
  outline-offset: 10px;
}
* {
  accent-color: magenta;
}
div,
fieldset {
  margin: 20px;
}
textarea:nth-of-type(1) {
  cursor: wait;
}
textarea:nth-of-type(2) {
  resize: none;
}
textarea:nth-of-type(3) {
  pointer-events: none;
}

Les proprits CSS outline et outline-offset ont t utilises pour indiquer l'utilisateur quel lment a la slection. Une accent-color fournit une couleur de thme tous les contrles de formulaire. Le curseur d'insertion qui apparat lors de l'dition du texte utilise la mme couleur grce la proprit caret-color. Ce sont autant d'amliorations de l'interface utilisateur.

Certaines fonctionnalits nuisent l'utilisabilit. La proprit cursor a t utilise pour modifier le curseur par dfaut du navigateur, ce qui peut drouter. La proprit resize empche le deuxime <textarea> d'tre redimensionnable, tandis que la proprit pointer-events empche le troisime <textarea> de recevoir des clics. Il reste toutefois slectionnable au clavier.

Appuyez sur  Excuter  dans l'exemple cidessus pour voir ou diter le code de l'animation dans le MDN Playground.

Rfrence

Proprits

• accent-color
• appearance
• caret-animation
• caret-color
• caret-shape
• cursor
• interest-delay, raccourci pour :
  • interest-delay-start
  • interest-delay-end
• outline, raccourci pour :
  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Le module CSS d'interface utilisateur dfinit galement les proprits caret, nav-down, nav-left, nav-right et nav-up. Actuellement, aucun navigateur ne prend en charge ces fonctionnalits.

Guides

Apprendre les formulaires : mise en forme avance des formulaires

Explique comment appearance peut tre utilis pour mettre en forme les contrles de formulaire.

Concepts associs

• La proprit CSS cursor
• L'attribut SVG cursor
• Les pseudo-classes CSS :focus, :focus-within et :focus-visible
• L'interface API CaretPosition

Spcifications

Voir aussi

• Astuces pour concevoir des indicateurs de focus utiles et utilisables (angl.) (2016)