précédent   suivant   sommaire   propriétés   index  


18 L'interface utilisateur

Table des matières

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.

Exemple(s) : 

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 :

  1. Des pages qui s'accordent avec les choix définis par l'utilisateur ;
  2. 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ée La 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.

Exemple(s) :

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 :

  1. Les contours n'occupent pas d'espace ;
  2. 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.

Exemple(s) :

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.

Exemple(s) :

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.

précédent   suivant   sommaire   propriété   index  

Version en cache

21/11/2024 09:42:11 Cette version de la page est en cache (à la date du 21/11/2024 09:42:11) 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.

Notes
  1. ↑ W3C : World Wide Web consortium

  2. ↑ Avertissement Légal : Bien que repectant de trè près le document original, cette traduction n'est pas une version française agréée par le W3C

Table des matières Haut

Références

  1. Consulter le document html Langue du document :fr Spécifications CSS : http://www.yoyodesign.org, L'interface utilisateur

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.

Table des matières Haut