CSS: Interfaz de usuario

En esta lección se comentan las propiedades CSS definidas en la recomendación CSS Basic User Interface Module Level 3 (CSS3 UI), publicada en junio de 2018.

Estas propiedades están relacionadas con la interfaz de usuario.

Cambio del modelo de caja: box-sizing

Esta propiedad se comenta en la lección Modelo de caja.

La propiedad cursor

La propiedad cursor permite especificar el icono que se muestra al situar el cursor sobre un elemento.

En la recomendación CSS 2.1, los posibles valores eran auto, crosshair, default, help, move, pointer, progress, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, text y wait.

En la recomendación CSS 3, se han añadido los valores none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, grab, grabbing, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in y zoom-out.

Los ejemplos siguientes muestran todos los valores posibles:

Hueco
p {
  cursor: auto;
}
Enlace externo
Hueco
p {
  cursor: crosshair;
}
Enlace externo
Hueco
p {
  cursor: default;
}
Enlace externo
Hueco
p {
  cursor: help;
}
Enlace externo
Hueco
p {
  cursor: move;
}
Enlace externo
Hueco
p {
  cursor: pointer;
}
Enlace externo
Hueco
p {
  cursor: progress;
}
Enlace externo
Hueco
p {
  cursor: n-resize;
}
Enlace externo
Hueco
p {
  cursor: ne-resize;
}
Enlace externo
Hueco
p {
  cursor: e-resize;
}
Enlace externo
Hueco
p {
  cursor: se-resize;
}
Enlace externo
Hueco
p {
  cursor: s-resize;
}
Enlace externo
Hueco
p {
  cursor: sw-resize;
}
Enlace externo
Hueco
p {
  cursor: w-resize;
}
Enlace externo
Hueco
p {
  cursor: nw-resize;
}
Enlace externo
Hueco
p {
  cursor: text;
}
Enlace externo
Hueco
p {
  cursor: wait;
}
Enlace externo
Hueco
p {
  cursor: none;
}
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox
p {
  cursor: context-menu;
}
Enlace externo Diferencias entre navegadores
Hueco
p {
  cursor: cell;
}
Enlace externo
Hueco
p {
  cursor: vertical-text;
}
Enlace externo
Hueco
p {
  cursor: alias;
}
Enlace externo
Hueco
p {
  cursor: copy;
}
Enlace externo
Hueco
p {
  cursor: no-drop;
}
Enlace externo
Hueco
p {
  cursor: not-allowed;
}
Enlace externo
Hueco
p {
  cursor: grab;
}
Enlace externo
Hueco
p {
  cursor: grabbing;
}
Enlace externo
Hueco
p {
  cursor: ew-resize;
}
Enlace externo
Hueco
p {
  cursor: ns-resize;
}
Enlace externo
Hueco
p {
  cursor: nesw-resize;
}
Enlace externo
Hueco
p {
  cursor: nwse-resize;
}
Enlace externo
Hueco
p {
  cursor: col-resize;
}
Enlace externo
Hueco
p {
  cursor: row-resize;
}
Enlace externo
Hueco
p {
  cursor: all-scroll;
}
Enlace externo
Hueco
p {
  cursor: zoom-in;
}
Enlace externo
Hueco
p {
  cursor: zoom-out;
}
Enlace externo

También pueden utilizarse cursores personalizados, indicando la dirección de la imagen que se quiera emplear. Se puede escribir una lista de cursores separados por comas para que el navegador utilice el primero disponible

p {
  cursor: url("exclamacion.png"), wait;
}
Enlace externo
p {
  cursor: url("exclamacion.cur"), wait;
}
Enlace externo
p {
  cursor: url("exclamacion.ico"), wait;
}
Enlace externo

Contornos

Un contorno es como un segundo borde, pero que no se tiene en cuenta al calcular el tamaño del elemento y que no tiene por qué ser rectangular.

La propiedad compuesta outline

La propiedad compuesta outline permite establecer un contorno a un elemento, indicando como en caso del borde, el color, el grosor y el estilo del contorno.

p {
  outline: red 3px solid;
}
Enlace externo

Un elemento puede tener simultáneamente borde y contorno, como muestra el ejemplo siguiente:

p {
  outline: red 3px solid;
  border: black 3px solid;
}
Enlace externo

El contorno se diferencia del borde en que el contorno no se tiene en cuenta al calcular el tamaño del elemento, mientras que el borde sí, como muestran los ejemplos siguientes:

p.con-border {
  border: black 10px solid;
}
Enlace externo
p.con-outline {
  outline: black 10px solid;
}
Enlace externo

Esta diferencia es más evidente si el contorno se genera cuando el ratón pasa por encima del elemento. En el caso del borde, al añadirse el borde, los elementos siguientes se desplazan, pero en el caso del contorno, al generarse el contorno, los elementos siguientes no se desplazan.

p.con-border:hover {
  border: black 10px solid;
}
Enlace externo
p.con-outline:hover {
  outline: black 10px solid;
}
Enlace externo

El contorno se diferencia también del borde en que el borde es siempre rectangular, mientras que el contorno no tiene por qué serlo.

Hueco
span.con-border {
  border: black 3px solid;
}
Enlace externo
Por determinar en Chrome Por determinar en Firefox
span.con-outline {
  outline: black 3px solid;
}
Enlace externo Diferencias entre navegadores

Nota: Firefox y Chrome no muestran el contorno de un elemento en-línea de la misma manera, como se comenta en la página de diferencias entre navegadores.


La propiedad outline admite como color el valor invert. Con este valor, el contorno toma el color opuesto al color de fondo del elemento.

Ni Chrome ni Firefox muestran el valor invert (Firefox dejó de hacerlo en la versión la versión FF 3.0). En la página de bugs de Firefox se explica qué motivos dan los desarrolladores de Firefox para no hacerlo.

Incorrecto en Chrome Incorrecto en Firefox
body {
  background-color: white;
}

p {
  outline: invert 3px solid;
}
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox
body {
  background-color: black;
  color: white;
}

p {
  outline: invert 3px solid;
}
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox
body {
  background-color: red;
  color: white;
}

p {
  outline: invert 3px solid;
}
Enlace externo

Las propiedades outline-color, outline-width y outline-style

Las propiedades outline-color, outline-width y outline-style permiten establecer, respectivamente, el color, el grosor y el estilo del contorno de un elemento. A diferencia de las propiedades border-color, border-width y border-style, las propiedades del contorno sólo admiten un valor, es decir, los cuatro lados del contorno son siempre iguales.

p {
  outline-color: black;
  outline-style: solid;
  outline-width: 3px;
}
Enlace externo

La propiedad outline-color admite el valor invert. Con este valor, el contorno toma el color opuesto al color de fondo del elemento.

body {
  background-color: black;
  color: white;
}

p {
  outline-color: invert;
  outline-style: solid;
  outline-width: 3px;
}
Enlace externo

Curiosamente, en este caso Firefox y Chrome sí que muestran el contorno, lo que no hacen con la propiedad compuesta outline.

La propiedad outline-offset

La propiedad outline-offset permite modificar el tamaño del contorno de un elemento, ampliándolo o reduciéndolo con respecto a su tamaño inicial. El valor debe ser una distancia. Si el valor es positivo, el contorno aumentará. Si el valor es negativo, el contorno se reducirá.

p {
  margin: 20px;
}

p.con-outline {
  outline: black 1px solid;
}

p.con-outline-offset-positivo {
  outline: black 1px solid;
  outline-offset: 10px;
}

p.con-outline-offset-negativo {
  outline: black 1px solid;
  outline-offset: -5px;
}
Enlace externo