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

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

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'aperç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>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</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 :.

  • Texte : Spécifiez directement en entourant la chaîne avec des "". Ajoute du texte.
  • Image : Utilisez la fonction url() pour insérer des images.
  • Compteur : Utilisez la fonction counter() pour afficher des compteurs.
  • Attribut : Utilisez la fonction attr() pour afficher les valeurs des attributs des éléments HTML. Par exemple, vous pouvez afficher l'attribut title.
  • none : Indique qu'aucun contenu ne sera affiché. C'est l'état par défaut.

Notes d'utilisation

  • 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.

Exemple 

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

Voici un exemple d'ajout d'une icône avant une balise <p>. De cette manière, vous pouvez compléter visuellement le contenu à travers des feuilles de style.

Propriété cursor 

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

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 :.

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`** : redimensionner vers le haut.
    - **`s-resize`** : redimensionner vers le bas.
    - **`e-resize`** : redimensionner vers la droite.
    - **`w-resize`** : redimensionner vers la gauche.
    - **`ne-resize`** : redimensionner vers le coin supérieur droit.
    - **`nw-resize`** : redimensionner vers le coin supérieur gauche.
    - **`se-resize`** : redimensionner vers le coin inférieur droit.
    - **`sw-resize`** : redimensionner 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.

  1. 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.

  2. 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.

Dans cet exemple, la direction dans laquelle une zone de texte peut être redimensionnée est spécifiée en utilisant la propriété resize.

  • Avec resize: both;, un élément peut être redimensionné à la fois horizontalement et verticalement.
  • Avec resize: horizontal;, un élément peut uniquement être redimensionné horizontalement.
  • Avec resize: vertical;, un élément peut uniquement être redimensionné verticalement.
  • Avec resize: none;, un élément ne peut pas être redimensionné.

Types de valeurs

  • La propriété resize reçoit une valeur qui spécifie la direction dans laquelle un élément peut être redimensionné. Vous pouvez spécifier les valeurs suivantes.
none
  • Spécifier none désactive le redimensionnement de l'élément. C'est la valeur par défaut.
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).
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 3DPropriétés CSS liées au flottement