18 L'interface utilisateur
Contenu
18.1 Les curseurs : la propriété 'cursor'
- 'cursor'
-
Valeur : [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit Initiale : auto S'applique à : tous les éléments Héritée : oui Pourcentage : sans objet Médias : visuel, interactif
Cette propriété spécifie le type de curseur qui sera affiché pour l'appareil de pointage. Les significations des valeurs sont :
- auto
- L'agent utilisateur détermine lequel des curseurs employer selon un contexte donné
- crosshair
- Une marque en croix (ex. deux traits formant un signe "+") ;
- default
- Le curseur par défaut dépendant de la plate-forme. Souvent rendu par une flèche ;
- pointer
- Le curseur est représenté par un doigt indiquant un lien ;
- move
- Indique un objet qu'on peut déplacer ;
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
- Indique que le bord d'un certain objet peut être déplacé. Par exemple, la valeur 'se-resize' est utilisée pour un mouvement commençant du coin sud-est de la boîte ;
- text
- Indique qu'on peut sélectionner le texte. Souvent rendu par une barre en I ;
- wait
- Indique un programme en progression, l'utilisateur devrait en attendre l'achèvement. Souvent rendu par une montre ou un sablier ;
- help
- Une aide est disponible pour l'objet survolé par le curseur. Souvent rendu par un point d'interrogation ou une bulle ;
- <uri>
- L'agent utilisateur charge le curseur à partir de la ressource désignée par l'adresse URI. Quand l'agent utilisateur, dans une liste de curseur, ne peut pas prendre en charge le premier curseur, il devrait essayer avec le deuxième, et ainsi de suite. Si celui-ci ne peut rien faire avec aucun des curseurs de la liste, il doit utiliser le curseur générique placé à la fin de celle-ci.
P { cursor : url("mything.cur"), url("second.csr"), text; }
18.2 Les préférences de couleur de l'utilisateur
En plus de la possibilité de prédéfinir les valeurs de couleur du texte, de l'arrière-plan, etc., CSS2 permet aux auteurs la spécification de couleurs de façon à les intégrer dans l'environnement graphique de l'utilisateur. Les feuilles de style qui prennent en compte les préférences de l'utilisateur offrent ainsi certains avantages :
- Des pages qui s'accordent avec les choix définis par l'utilisateur ;
- Des pages qui peuvent être plus accessibles, l'utilisateur ayant pu effectuer des réglages pour pallier une déficience donnée.
On a voulu que le jeu des valeurs définies pour les couleurs système soit exhaustif. Pour les systèmes n'ayant pas de valeur correspondante, la valeur spécifiée devrait être reliée à l'attribut système le plus proche ou à une couleur par défaut.
Voici la liste des valeurs supplémentaires des attributs CSS liés à la couleur et leurs significations. Toute propriété de couleur (ex. 'color' ou 'background-color') peut prendre l'un des noms suivants. Bien que ceux-ci ne soient pas sensibles à la casse, on recommande leur capitalisation mélangée comme ci-dessous, pour une meilleure lisibilité.
- ActiveBorder
- La bordure de la fenêtre active ;
- ActiveCaption
- La légende de la fenêtre active ;
- AppWorkspace
- La couleur d'arrière-plan de l'interface de documents multiples ;
- Background
- L'arrière-plan du plan de travail ;
- ButtonFace
- La couleur de la police des éléments d'affichage en trois dimensions ;
- ButtonHighlight
L'ombre foncéeLa couleur d'activation des éléments d'affichage en trois dimensions (pour les bords à l'opposé de la source lumineuse) ;- ButtonShadow
- La couleur de l'ombre des éléments d'affichage en trois dimensions ;
- ButtonText
- Le texte des boutons à pousser ;
- CaptionText
- Le texte des légendes, des boîtes de dimensionnement et des boîtes de flèches des barres de défilement ;
- GrayText
- Le texte en grisé (désactivé). Cette couleur prend la valeur #000 si un driver d'affichage donné ne peut rendre sûrement la couleur grise ;
- Highlight
- L'article, ou les articles, sélectionnés dans une zone de saisie ;
- HighlightText
- Le texte de l'article, ou des articles, sélectionnés dans une zone de saisie ;
- InactiveBorder
- La bordure d'une fenêtre inactive ;
- InactiveCaption
- La légende d'une fenêtre inactive ;
- InactiveCaptionText
- La couleur du texte d'une légende inactive ;
- InfoBackground
- La couleur de fond des infobulles ;
- InfoText
- La couleur du texte des infobulles ;
- Menu
- L'arrière-plan d'un menu ;
- MenuText
- Le texte d'un menu ;
- Scrollbar
- L'aire grise d'une barre de défilement ;
- ThreeDDarkShadow
- L'ombre sombre des éléments d'affichage en trois dimensions ;
- ThreeDFace
- La couleur de la police des éléments d'affichage en trois dimensions ;
- ThreeDHighlight
- La couleur d'activation des éléments d'affichage en trois dimensions ;
- ThreeDLightShadow
- L'ombre claire des éléments d'affichage en trois dimensions (pour les bords faisant face à la source lumineuse) ;
- ThreeDShadow
- L'ombre des éléments d'affichage en trois dimensions ;
- Window
- L'arrière-plan de la fenêtre ;
- WindowFrame
- Le cadre de la fenêtre ;
- WindowText
- Le texte des fenêtres.
Par exemple, pour que les couleurs d'avant-plan et d'arrière-plan d'un paragraphe soient les mêmes que celles de la fenêtre de l'utilisateur :
P { color: WindowText; background-color: Window }
18.3 Les préférences de police de l'utilisateur
Comme pour les couleurs, les auteurs peuvent spécifier des polices de manière à utiliser les ressources du système de l'utilisateur. Consulter la propriété 'font' pour des détails.
18.4 Les contours dynamiques : la propriété 'outline'
Parfois, les auteurs de feuilles de style peuvent souhaiter créer des contours autour d'objets visuels, comme les boutons, les champs actifs des formulaires, les images découpées, etc., pour les faire ressortir. Les contours CSS2 diffèrent des bordures ainsi :
- Les contours n'occupent pas d'espace ;
- Les contours peuvent avoir une forme non rectangulaire.
Les propriétés de contour régissent le style de ces contours dynamiques.
- 'outline'
-
Valeur : [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit Initiale : voir les propriétés individuelles S'applique à : tous les éléments Héritée : non Pourcentage : sans objet Médias : visuel, interactif
- 'outline-width'
-
Valeur : <bordure-épaisseur> | inherit Initiale : medium S'applique à : tous les éléments Héritée : non Pourcentage : sans objet Médias : visuel, interactif
- 'outline-style'
-
Valeur : <bordure-style> | inherit Initiale : none S'applique à : tous les éléments Héritée : non Pourcentage : sans objet Médias : visuel, interactif
- 'outline-color'
-
Valeur : <couleur> | invert | inherit Initiale : invert S'applique à : tous les éléments Héritée : non Pourcentage : sans objet Médias : visuel, interactif
Le contour produit par les propriétés de contour est dessiné "par dessus" la boîte, c.à.d. le contour est toujours au-dessus de celle-ci et n'influence pas sur son placement ou sur sa taille, et sur aucune des autres boîtes. De ce fait, l'affichage, ou la suppression, des contours ne provoque pas une nouvelle mise en forme de la page.
Le contour est dessiné juste en dehors du bord de la bordure.
Les contours peuvent avoir une forme non rectangulaire. Par exemple, quand un élément est distribué sur plusieurs lignes, le contour correspond à celui minimum qui englobe toutes les boîtes de l'élément. À l'inverse des bordures, le contour ne s'ouvre pas à la fin ou au début de la boîte de ligne, et celui-ci est toujours entièrement connecté.
La propriété 'outline-width' admet les mêmes valeurs que celles de la propriété 'border-width'.
La propriété 'outline-style' admet les mêmes valeurs que celles de la propriété'border-style', sauf la valeur 'hidden' qui n'est pas admise pour un style de contour.
La propriété 'outline-color' admet toutes les valeurs de couleur, avec en plus le mot-clé 'invert'. Celui-ci produit l'inversion des couleurs des pixels à l'écran. C'est une astuce courante pour s'assurer que la bordure active soit visible, indépendamment de la couleur du fond.
La propriété raccourcie 'outline' sert à la spécification des valeurs pour les trois propriétés individuelles 'outline-style', 'outline-width' et 'outline-color'.
Noter que le contour est le même pour tous les côtés, à l'inverse des bordures, il n'existe pas de propriétés 'outline-top' ou 'outline-left'.
Cette spécification ne définit pas, quand plusieurs contours se chevauchent, comment ceux-ci sont dessinés ni comment le faire pour les boîtes dont des parties sont cachées derrière d'autres éléments.
Remarque : Le contour d'activation [ndt. focus outline] n'affectant pas la mise en forme (c.à.d. aucun espace n'est consacré aux contours dans le modèle de la boîte), celui-ci peut très bien déborder sur d'autres éléments de la page.
Voici un exemple de dessin d'un contour épais autour d'un élément BUTTON :
BUTTON { outline-width : thick }
On peut employer un script pour le changement dynamique de l'épaisseur du contour, sans induire une remise en forme de la page.
18.4.1 Les contours et la sélection (N.D.T. focus)
Les interfaces graphiques des utilisateurs peuvent employer des contours autour des éléments pour confirmer à ceux-ci lequel des éléments de la page est sélectionné. Ces contours s'ajoutent aux éventuelles bordures de ces éléments, leur sélection ou désélection ne devant pas provoquer une nouvelle mise en forme de la page. La sélection d'un élément d'un document relève d'une action de l'utilisateur (ex. saisie d'un texte, sélection d'un bouton, etc.). Les agents utilisateurs reconnaissant le groupe de média interactif doivent conserver l'information relative à l'endroit où intervient la sélection et doivent aussi en donner une représentation. Ceci peut être réalisé à l'aide de contours dynamiques en conjonction avec la pseudo-classe :focus.
Par exemple, on peut employer les règles suivantes pour faire apparaître un trait noir épais autour d'un élément sélectionné, ce trait devenant rouge quand on l'active :
:focus { outline: thick solid black } :active { outline: thick solid red }
18.5 Le grossissement
Le groupe de travail de CSS considère que le grossissement d'un document, ou de parties de celui-ci, ne devrait pas être spécifié par des feuilles de style. Les agents utilisateurs peuvent en avoir une interprétation de différentes façons (ex. images agrandies, volumes sonores augmentés, etc.).
Lors du grossissement d'une page, les agents utilisateurs devraient conserver les relations entre les éléments
positionnés. Par exemple, une bande dessinée peut se composer d'images sur lesquelles viennent s'appliquer
des éléments de texte. Quand un agent utilisateur grossit celle-ci, le texte devrait rester dans les
bulles de la bande dessinée.
Version en cache
06/12/2024 01:46:46 Cette version de la page est en cache (à la date du 06/12/2024 01:46:46) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.Document créé le 12/08/2006, dernière modification le 26/10/2018
Source du document imprimé : https://www.gaudry.be/css-rf-ui.html
L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.
Références
Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.