Propriétés CSS liées à l'interface utilisateur

Articles

Cet article explique les propriétés CSS liées à l'interface utilisateur.

Vous pouvez en apprendre davantage sur les propriétés content, cursor, pointer-events et resize, y compris leurs cas d'utilisation et comment les écrire.

YouTube Video

HTML pour l'aperçu

css-ui.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</html>

Lié à l'interface utilisateur

Propriété `content`

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

La propriété content est utilisée pour ajouter du contenu aux pseudo-éléments, principalement ::before ou ::after. Cette propriété est utilisée pour définir du texte, des images, des compteurs, etc., qui ne sont pas affichés directement à l'intérieur de l'élément. Son rôle principal est de permettre le contrôle du contenu décoratif ou des informations supplémentaires qui ne sont pas écrites directement en HTML via des feuilles de style.

Dans cet exemple, "Note: " est ajouté avant l'élément et "(End)" est ajouté après. Cela utilise les pseudo-éléments ::before et ::after respectivement.

Valeurs de la propriété `content`

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

La propriété content peut prendre les valeurs suivantes :.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}

Texte
- Vous pouvez ajouter du texte en entourant une chaîne directement avec des guillemets doubles ("").

1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}

Image
- Vous pouvez insérer une image en utilisant la fonction url().

 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}

Compteur
- Utilisez la fonction counter() pour afficher un compteur.

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

Attribut
- La fonction attr() peut être utilisée pour afficher la valeur d’attribut d’un élément HTML. Par exemple, vous pouvez afficher l'attribut title.

1/* None */
2.content-none::before {
3    content: none;
4}

aucun
- Indique qu’aucun contenu ne doit être affiché. C'est l'état par défaut.

Notes d'utilisation

Lorsque vous utilisez la propriété content, gardez à l’esprit les points suivants :.

La propriété content s'applique uniquement aux pseudo-éléments, et non aux éléments normaux.
Étant donné qu'elle n'est pas ajoutée au DOM, elle ne peut pas être manipulée directement avec JavaScript.
Elle peut affecter la mise en page, elle est donc couramment utilisée pour afficher des informations décoratives ou supplémentaires.

Propriété `cursor`

La propriété cursor est utilisée pour spécifier le type de curseur à afficher lorsque le pointeur de la souris est placé sur un élément. Vous pouvez spécifier différents styles de curseur et elle est souvent appliquée aux éléments interactifs pour améliorer l'expérience utilisateur.

Principaux types de curseur

Les valeurs suivantes peuvent être spécifiées en tant que types de curseur :.

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }

`default`

default est le curseur flèche normal (le curseur par défaut du navigateur).

`pointer`

pointer est un curseur en forme de main affiché lorsqu'il est placé sur un lien.

`text`

text est un curseur en forme de I affiché dans les zones où le texte peut être sélectionné.

`move`

- `move` est un curseur en forme de croix utilisé lorsqu'un élément peut être déplacé.

`crosshair`

crosshair est un curseur en forme de réticule pour une sélection précise.

`not-allowed`

not-allowed est un curseur pour indiquer les régions ou les actions non autorisées.

`help`

help est un curseur avec un point d'interrogation affiché lorsqu'il est placé sur des éléments pouvant fournir des informations d'aide.

`wait`

wait est un curseur en forme de sablier ou circulaire représentant un état de traitement.

`progress`

progress est un curseur représentant une opération en cours. Cependant, il indique que l'utilisateur peut effectuer d'autres opérations.

`grab`

grab est un curseur pour saisir des éléments déplaçables.

`grabbing`

grabbing est un curseur indiquant qu'un élément est en train d'être déplacé.

`resize`

resize est un curseur utilisé lorsqu'une fenêtre ou un élément peut être redimensionné. Il existe différents types selon la direction.

n-resize : Un curseur de redimensionnement pointant vers le haut.
s-resize : Un curseur de redimensionnement pointant vers le bas.
e-resize : Un curseur de redimensionnement pointant vers la droite.
w-resize : Un curseur de redimensionnement pointant vers la gauche.
ne-resize : Un curseur de redimensionnement pointant vers le coin supérieur droit.
nw-resize : Un curseur de redimensionnement pointant vers le coin supérieur gauche.
se-resize : Un curseur de redimensionnement pointant vers le coin inférieur droit.
sw-resize : Un curseur de redimensionnement pointant vers le coin inférieur gauche.

Curseur personnalisé

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

Il est également possible de spécifier un curseur personnalisé à l'aide de url().

Dans cet exemple, custom-cursor.png est le fichier image pour le curseur. Si cette image n'est pas disponible, le curseur par défaut du navigateur est affiché avec auto.

Résumé

La propriété cursor spécifie quel curseur doit être affiché lorsque l'utilisateur est sur un élément.
Il existe différents styles de curseurs disponibles selon l'utilisation, et des curseurs personnalisés peuvent également être définis.
En sélectionnant des styles de curseurs adaptés aux éléments interactifs et opérations restreintes, on peut offrir une interface utilisateur plus conviviale.

Propriété `pointer-events`

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

La propriété pointer-events est utilisée pour contrôler comment un élément gère les événements provenant des dispositifs de pointage tels que la souris, l'écran tactile et le stylet. Normalement, lorsqu'un utilisateur clique ou survole un élément, celui-ci reçoit des événements de pointage, mais ce comportement peut être modifié à l'aide de cette propriété.

Dans la classe pointer-events-auto, la propriété pointer-events est définie sur auto, ce qui permet de traiter les événements de clic et de survol normalement. L'élément est cliquable, donc un message s'affiche lorsqu'il est cliqué.
Dans la classe pointer-events-auto, la propriété pointer-events est définie sur none, donc l'élément ne reçoit pas d'événements de pointage. Même si la propriété cursor est définie sur pointer, le curseur de la souris ne change pas, et les autres éléments en dessous deviennent cliquables.

Types de valeurs

La propriété pointer-events spécifie si et comment un élément reçoit des événements de pointage. Vous pouvez spécifier les valeurs suivantes.

`auto`

auto est la valeur par défaut, où l'élément reçoit normalement les événements de pointeur.

`none`

Lorsque none est spécifié, l'élément ne reçoit pas les événements de pointeur. L'élément désactive les interactions telles que cliquer et survoler, mais les autres éléments en dessous peuvent recevoir des événements de pointeur.

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

Ces valeurs sont principalement utilisées pour les éléments SVG. Chaque valeur contrôle si des parties spécifiques d'un élément (comme le remplissage, le contour, etc.) répondent aux événements de pointeur. Il n'est pas couramment utilisé avec les éléments HTML ordinaires.

Points clés pour l'utilisation

Voici quelques exemples d'utilisation de la propriété pointer-events.

Sélection des éléments que vous souhaitez désactiver
- La valeur none est utile pour désactiver temporairement des éléments comme des boutons ou des liens.
Utilisation avec des éléments superposés
- Lorsque la propriété position est définie sur absolute ou que des éléments sont superposés à l'aide de la propriété z-index, définir pointer-events sur none pour l'élément supérieur permet d'envoyer les événements de pointeur à l'élément en dessous.

Propriété `resize`

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

La propriété resize est une propriété CSS qui spécifie dans quelle direction un élément peut être redimensionné par l'utilisateur. En utilisant cette propriété, vous pouvez permettre aux éléments d'être redimensionnés verticalement ou horizontalement en les faisant glisser, ou désactiver complètement le redimensionnement.

Types de valeurs

La propriété resize spécifie les directions dans lesquelles un élément peut être redimensionné. Vous pouvez spécifier les valeurs suivantes.

`both`

Spécifier both permet à l'élément d'être redimensionné à la fois verticalement et horizontalement.

`horizontal`

Spécifier horizontal permet à l'élément d'être redimensionné uniquement dans la direction horizontale (largeur).

`vertical`

Spécifier vertical permet à l'élément d'être redimensionné uniquement dans la direction verticale (hauteur).

`none`

Spécifier none désactive le redimensionnement de l'élément. C'est la valeur par défaut.

`inherit`

Spécifier inherit fait hériter l'élément de la valeur de la propriété resize de son parent.

Notes

Pour rendre un élément redimensionnable, vous devez définir la propriété overflow ainsi que la propriété resize. Les éléments redimensionnables peuvent nécessiter des barres de défilement, et overflow: auto est généralement défini.
Le redimensionnement est généralement utilisé avec des éléments de bloc tels que div et textarea.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées à l’animation 3D Propriétés CSS liées au flottement

Propriétés CSS liées à l'interface utilisateur

YouTube Video

HTML pour l'aperçu

Lié à l'interface utilisateur

Propriété content

Valeurs de la propriété content

Notes d'utilisation

Propriété cursor

Principaux types de curseur

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

Curseur personnalisé

Résumé

Propriété pointer-events

Types de valeurs

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

Points clés pour l'utilisation

Propriété resize

Types de valeurs

both

horizontal

vertical

none

inherit

Notes

YouTube Video

Propriété `content`

Valeurs de la propriété `content`

Propriété `cursor`

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

Propriété `pointer-events`

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

Propriété `resize`

`both`

`horizontal`

`vertical`

`none`

`inherit`