Chargement...

Interface utilisateur CSS

Optional Advanced vient de poser un pochoir sur une photo. Cette séance est une autre boîte à outils : interface utilisateur. Vous changez le pointeur, le caret et le chrome natif du widget. Vous ne percez pas le hero et vous ne découpez pas l’article en colonnes de journal.

Réponse directe

Les propriétés d’interface CSS donnent des indices d’interaction. cursor choisit la forme de la souris (pointer, wait, help, not-allowed…). resize permet de tirer un coin — souvent sur un textarea. outline avec outline-offset dessine un anneau de focus qui n’occupe pas d’espace de layout (vous connaissez outline via le modèle de boîte ; ici c’est l’habitude clavier). user-select limite la sélection accidentelle. caret-color teinte la barre d’insertion. appearance (et -webkit-appearance) peut retirer la peau native pour restyler le contrôle. Gardez le focus visible. Ne transformez pas toute la page en affiche non sélectionnable.

Pourquoi ce n’est ni un masque ni des colonnes

Un masque décide quels pixels d’une boîte restent visibles. Les colonnes multiples fragmentent un flux de texte. Les propriétés UI ne font ni l’un ni l’autre. Largeur et hauteur restent, sauf si resize intervient. Filtres et mask-image restent de l’art. Ici la question est : « Cela a-t-il l’air cliquable ? Puis-je taper ? Puis-je agrandir la boîte ? L’utilisateur clavier voit-il où il est ? »

Cursor — dire la vérité

cursor est une promesse. pointer signifie « c’est cliquable ». Sur de vrais boutons et liens. Pas de main sur un titre qui ne fait rien.

Cursor map for honest controls

css 
a.nav-link,
button.save {
cursor: pointer;
}

button[disabled] {
cursor: not-allowed;
}

.help-hint {
cursor: help;
}

.busy-panel {
cursor: wait;
}

default est la flèche. text est le I sur du texte sélectionnable. grab / grabbing vont aux poignées de glisser. Des curseurs url(...) existent ; gardez-les petits et listez toujours un mot-clé de repli. Un curseur menteur est pire que rien : on clique un slogan et rien ne se passe.

Resize — agrandir une boîte, pas la mise en page

resize agit sur les boîtes avec overflow. Usage courant : un champ de notes :

Resize a textarea

css 
textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}

Valeurs : none, both, horizontal, vertical. Couplez avec un overflow autre que visible sinon la poignée peut manquer. Ne semez pas resize: both sur chaque carte. min-height / max-width empêchent le champ de s’écraser ou d’exploser.

Outline comme anneau de focus

Dans le modèle de boîte, outline est à l’extérieur de la bordure et n’occupe pas d’espace. Dans la boîte UI, vous gardez cet anneau pour le focus clavier — souvent avec :focus-visible pour que la souris n’encadre pas chaque clic :

Focus outline with offset

css 
button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

button.save:focus:not(:focus-visible) {
outline: none;
}

Pas de *:focus { outline: none; } global sans remplaçant aussi visible. outline-offset écarte l’anneau sans déplacer les voisins. Ce n’est pas border (ça change la taille) ni un fondu de masque sur le libellé du bouton.

user-select — moins de surbrillance accidentelle

La sélection est une fonction. Réduisez-la seulement là où un double-clic ne doit pas peindre du bleu — libellé de barre, puce à glisser — pas l’article.

Limit selection on chrome, not prose

css 
.toolbar-label {
user-select: none;
}

article.body {
user-select: text;
}

none bloque le surlignage. text est le défaut lisible. all sélectionne tout l’élément d’un clic. Des préfixes (-webkit-user-select) restent en vieux WebKit. N’empêchez pas de copier le texte juridique, les prix ou les erreurs.

caret-color — teinter la barre d’insertion

Le caret est la barre clignotante dans le champ. Accordez-le à la marque sans le cacher :

Caret color in a field

css 
input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}

caret-color: auto suit la couleur du texte. caret-color: transparent « pour un look propre » est un piège. Ce n’est pas color sur toute la page ni mask-image sur le glyphe.

appearance — rhabiller le widget natif

Les navigateurs peignent cases et champs de recherche avec un chrome natif. appearance: none (plus -webkit-appearance: none si besoin) retire cette peau :

Reset appearance then restyle

css 
input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}

input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}

Après none, vous devez une bordure, un état coché et un anneau de focus. Une case invisible n’est pas une case personnalisée. Le support varie ; testez le vrai widget. appearance ne répare pas un masque et ne remplace pas les colonnes.

UI face au masque, aux colonnes et à l’outline boîte

📊 UI vs mask vs columns vs outline

Tool Job Poor fit
cursor / resize / caret-color / appearance Interaction chrome on controls Stenciling a photo; newspaper columns
user-select Limit highlight on chrome, not articles Hiding copy people must paste
outline + :focus-visible Keyboard focus ring (no layout space) Replacing border math; fading labels with a mask
mask-image Soft holes on one element’s pixels Pointer shape; growing a textarea
Multi-column (column-*) Fragment flowing text Cursors, carets, native widget skin

Optional Advanced a utilisé les colonnes pour la prose et les masques pour les images. L’interface est la couche contrôle. column-count sur un formulaire de réglages ou mask-image sur le bouton envoyer ne rend pas le formulaire « plus UI ».

Ce qu’il ne faut pas effacer

Ne retirez pas tous les indices natifs. Barres de défilement, carets et anneaux de focus existent pour une raison. Si le contrôle est désactivé, cursor: not-allowed plus l’attribut réel disabled est plus calme qu’un masque qui cache le libellé.

UI polish is not a mask or columns

css 
.ok-ui {
cursor: pointer;
outline-offset: 2px;
}

.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}

.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}

Bord de photo → retour au masque. Article long → colonnes ou flux de blocs. « Ça ne semble pas cliquable » → cursor et un vrai contrôle, pas un filtre déco.

À essayer

  1. cursor: pointer sur un vrai <button>, not-allowed sur [disabled].
  2. Sur un textarea : resize: vertical, min-height, overflow: auto.
  3. Outline :focus-visible + outline-offset — tabulez jusqu’à lui.
  4. user-select: none seulement sur une puce de barre ; l’article reste sélectionnable.
  5. Teintez caret-color dans un champ. Ne masquez pas le champ, pas de column-count.

Erreurs fréquentes

  • cursor: pointer sur un texte qui n’est ni lien ni bouton
  • resize: both sur des cartes de layout et des barres de nav
  • outline: none global sans remplacement :focus-visible
  • user-select: none sur des pages entières, des prix ou des erreurs
  • caret-color: transparent « pour le look »
  • appearance: none sans bordure, état coché ni anneau de focus
  • Prendre un masque ou des colonnes pour du polish d’interface

Résumé

  • Le CSS interface indique l’interaction : pointeur, resize, caret, chrome natif
  • cursor doit dire vrai ; resize est pour les champs, pas pour la coque de page
  • Gardez un anneau de focus visible ; user-select et caret-color avec légèreté
  • appearance: none seulement si vous restylez tout le widget
  • Ni pochoir de masque ni colonnes de journal
  • Optional Advanced ensuite : transforms 3D (transforms-3d)

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 75 de 76
Css Tutoriel