18 Interfaz del usuario

Contenidos

18.1 Cursores: la propiedad 'cursor'

'cursor'
Valor:  [ [<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
Inicial:  auto
Se aplica a:  todos los elementos
Se hereda:  si
Porcentajes:  N/A
Medios:  visuales, interactivos

Esta propiedad especifica el tipo de cursor que será utilizado para el dispositivo señalador. Los valores tienen los siguientes significados:

auto
La AU determina el cursor a mostrar basado en el contexto actual.
crosshair
Una cruz simple (ej., segmentos cortos de línea semejantes a un signo "+").
default
El cursor predeterminado dependiente de la plataforma. A menudo procesado como una flecha.
pointer
El cursor es un puntero que indica un enlace.
move
Indica que algo será movido.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indica que algún borde será movido. Por ejemplo, el cursor 'se-resize' se usa cuando el movimiento comienza desde la esquina sudeste de la caja.
text
Indica texto que puede seleccionarse. A menudo procesado como una barra-I.
wait
Indica que el programa está ocupado y el usuario debe esperar. A menudo procesado como un reloj de pulsera o un reloj de arena.
help
Hay ayuda disponible sobre el objeto señalado por el cursor. A menudo procesado como un signo de interrogación o un globo.
<uri>
La aplicación del usuario recupera el cursor de un recurso señalado por el URI. Si la aplicación del usuario no puede manejar el primero de una lista de cursores, debe intentar manejar el segundo, etc. Si la aplicación del usuario no puede manejar ningún cursor definido por el usuario, debe usar el cursor genérico al final de la lista.

Ejemplo(s):

P { cursor : url("micursor.cur"), url("segundo.csr"), text; }

18.2 Preferencias de color del usuario

Además de poder asignar valores de colorpredeterminados a los textos, fondos, etc., CSS2 permite a los autores especificar colores de manera que se integren con el entorno gráfico del usuario. Las reglas de estilo que tienen en cuenta de este modo las preferencias del usuario ofrecen las siguientes ventajas:

  1. Producen páginas que coinciden con un determinado aspecto y gusto del usuario.
  2. Producen páginas que pueden ser más accesibles en tanto las preferencias del usuario pueden estar relacionadas con una discapacidad.

El conjunto de valores definidos para los colores del sistema intenta ser exhaustivo. Para los sistemas que no tienen los valores correspondientes, el valor especificado debe ser obtenido del atributo más cercano del sistema, o del color predeterminado.

El siguiente es un listado de los valores adicionales para los atributos de CSS relacionados con el color y sus significados generales. Cualquier propiedad de color (por ej., 'color' o 'background-color') puede tomar uno de los siguientes nombres. Aunque estos no distinguen entre mayúsculas y minúsculas, se recomienda que la mezcla de mayúsculas y minúsculas mostrada abajo sea utilizada para hacer más legibles los nombres.

ActiveBorder
Borde de la ventana activa.
ActiveCaption
Título de la ventana activa.
AppWorkspace
Color de fondo de una interfaz de documentos múltiples.
Background
Fondo del escritorio.
ButtonFace
Color de la cara de los elementos tridimensionales de la pantalla.
ButtonHighlight
Sombra oscura de los elementos tridimensionales de la pantalla (para los bordes más alejados de la fuente luminosa).
ButtonShadow
Color de la sombra de los elementos tridimensionales de la pantalla.
ButtonText
Texto de los botones.
CaptionText
Texto de los títulos, cajas de dimensiones y cajas de flechas de las barras de desplazamiento.
GrayText
Texto grisado (deshabilitado). Este color es fijado en #000 si el manejador de pantalla actual no soporta un color gris sólido.
Highlight
Item(s) seleccionados en un control.
HighlightText
Texto del(los) item(s) seleccionados en un control.
InactiveBorder
Borde de la ventana inactiva.
InactiveCaption
Título de la ventana inactiva.
InactiveCaptionText
Color del texto de un título inactivo.
InfoBackground
Color de fondo de los controles de sugerencias (tooltip).
InfoText
Color del texto de los controles de sugerencias (tooltip).
Menu
Fondo del menu.
MenuText
Texto de los menúes.
Scrollbar
Area gris de la barra de desplazamiento.
ThreeDDarkShadow
Sombra oscura de los elementos tridimensionales de pantalla.
ThreeDFace
Color de la cara de los elementos tridimensionales de pantalla.
ThreeDHighlight
Color resaltado de los elementos tridimensionales de pantalla.
ThreeDLightShadow
Color claro de los elementos tridimensionales de pantalla (para los bordes enfrentados a la fuente luminosa).
ThreeDShadow
Sombra oscura de los elementos tridimensionales de pantalla.
Window
Fondo de la ventana.
WindowFrame
Marco de la ventana.
WindowText
Texto de las ventanas.

Ejemplo(s):

Por ejemplo, para poner como colores de primer plano y de fondo de un párrafo los mismos colores de primer plano y de fondo que la ventana del usuario, escriba lo siguiente:

P { color: WindowText; background-color: Window }

18.3 Preferencias de fuentes del usuario

De igual modo que para los colores, los autores pueden especificar las fuentes de manera de utilizar los recursos del sistema del usuario. Por favor, consulte la propiedad 'font' para más detalles.

18.4 Contornos dinámicos: la propiedad 'outline'

A veces, los autores de hojas de estilo pueden desear crear contornos alrededor de los objetos visuales como botones, campos activos de los formularios, mapas de imágenes, etc., para enfatizarlos. Los contornos de CSS difieren de los borders en los siguientes sentidos:

  1. Los contornos no ocupan espacio.
  2. Los contornos pueden ser no rectangulares.

Las propiedades de los contorno controlan el estilo de estos contornos dinámicos.

'outline'
Valor:  [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Inicial:  ver las propiedades individuales
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales, interactivos
'outline-width'
Valor:  <border-width> | inherit
Inicial:  medium
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales, interactivos
'outline-style'
Valor:  <border-style> | inherit
Inicial:  none
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales, interactivos
'outline-color'
Valor:  <color> | invert | inherit
Inicial:  invert
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales, interactivos

El contorno creado con las propiedades de contorno es dibujado "sobre" una caja, es decir, el contorno está siempre encima, y no influye en la posición o tamaño de la caja, o de ninguna otra caja. Por lo tanto, mostrar u ocultar los contornos no provoca el redibujado.

El contorno es dibujado comenzando junto fuera del límite del borde.

Los contornos pueden ser no rectangulares. Por ejemplo, si el elemento es dividido entre varias líneas, el contorno es el contorno mínimo que encierra a todas las cajas del elemento. En contraste con los bordes, el contorno no es abierto en la línea de finalización o comienzo de la caja, pero está siempre totalmente conectado.

La propiedad 'outline-width' acepta los mismos valores que 'border-width'.

La propiedad 'outline-style' acepta los mismos valores que 'border-style', excepto que 'hidden' no es un estilo de contorno lícito.

La propiedad 'outline-color' acepta todos los colores, como así también la palabra clave 'invert'. Se espera que 'invert' produzca una inversión de color en los pixeles de la pantalla. Este es un truco común para asegurarse que el borde del foco sea visible, sin que importe el color de fondo.

La propiedad 'outline' es una propiedad resumida, y determina las tres de 'outline-style', 'outline-width' y 'outline-color'.

Observe que el contorno es el mismo en todos los lados. Contrariamente a los bordes, no hay propiedades 'outline-top' o 'outline-left'.

Esta especificación no define cómo se dibujan los múltiples contornos solapados, o cómo los contornos son dibujados para las cajas que están parcialmente ocultas detrás de otros elementos.

Nota. Como el contorno del foco no afecta al formato (es decir, no se deja ningún espacio para él en el modelo de caja), bien puede tapar otros elementos de la página.

Ejemplo(s):

Aquí hay un ejemplo del dibujo de un contorno grueso alrededor del elemento BUTTON:

BUTTON { outline-width : thick }

Los scripts pueden usarse para cambiar dinámicamente el ancho del contorno, sin provocar el redibujado.

18.4.1 Contornos y foco

Las interfaces gráficas del usuario pueden usar contornos alrededor de los elementos para indicarle al usuario qué elemento de la página tiene el foco. Estos contornos son sumados a cualquier borde, y pasar entre contornos activados y desactivados no debe provocar el redibujado del documento. El foco es el sujeto de la interacción del usuario con un documento (por ej., introduciendo texto, seleccionando un botón, etc.). Las aplicaciones del usuario que dan soporte a los grupos de medios interactivos deben mantener identificada la ubicación del foco y también debe representar el foco. Esto puede realizarse utilizando contornos dinámicos junto con la pseudo-clase :focus.

Ejemplo(s):

Por ejemplo, para dibujar una línea negra gruesa alrededor de un elemento cuando éste tiene el foco, y una línea roja gruesa cuando está activado, pueden usarse las siguientes reglas:

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 Amplificación

El grupo de trabajo de CSS considera que la amplificación de un documento o de partes de un documento de debe especificarse a través de las hojas de estilo. Las aplicaciones del usuario pueden dar soporte a tales amplificaciones de distintos modos (ej., imágenes más grandes, sonidos más fuertes, etc.).

Cuando amplía una página, las AU deben mantener las relaciones entre los elementos posicionados. Por ejemplo, una tira cómica puede estar compuesta de imágenes con elementos de texto superpuestos. Cuando amplía esta página, una aplicación del usuario debe mantener el texto dentro de los globos de la tira cómica.

Copyright  ©  1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.

Traducción: Carlos Benavidez