CSS3 Interfaz de usuario
Interfaz de usuario CSS3
En CSS3, se han añadido algunas nuevas características de interfaz de usuario para ajustar el tamaño de los elementos, el tamaño de la caja y el contorno.
En este capítulo, aprenderá sobre las siguientes propiedades de interfaz de usuario:
- resize
- box-sizing
- outline-offset
Soporte del navegador
Los números en la tabla indican el número de la primera versión del navegador que soporta la propiedad.
El número antes de -webkit-, -ms- o -moz- es el número de la primera versión del navegador que soporta la propiedad con ese prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
| outline-offset | 4.0 | 15.0 | 5.0 4.0 -moz- |
4.0 | 9.5 |
CSS3 Redimensionamiento (Resizing)
En CSS3, la propiedad resize especifica si un elemento debe ser redimensionado por el usuario.
El código CSS es el siguiente:
Ejemplo
Permitir al usuario especificar el tamaño de un elemento div:
Pruébalo »
CSS3 Tamaño de caja (Box Sizing)
La propiedad box-sizing le permite definir de manera precisa cómo el contenido se ajusta a un área determinada.
Ejemplo
Especificar dos cajas con borde una al lado de la otra:
Pruébalo »
CSS3 Modificación del contorno (outline-offset)
La propiedad outline-offset desplaza el contorno y lo dibuja en una posición más allá del borde.
El contorno y el borde tienen dos diferencias:
- El contorno no ocupa espacio
- El contorno puede no ser rectangular
El código CSS es el siguiente:
Ejemplo
Especificar un contorno a 15 píxeles fuera del borde:
Pruébalo »
Nuevas características de interfaz de usuario
| Propiedad | Descripción | CSS |
|---|---|---|
| appearance | Le permite hacer que un elemento se vea como un elemento de interfaz de usuario estándar. | 3 |
| box-sizing | Le permite definir ciertos elementos de cierta manera para que se ajusten al área. | 3 |
| icon | Brinda a los autores la capacidad de establecer un elemento como equivalente a un icono. | 3 |
| nav-down | Especifica dónde navegar al usar la tecla de flecha hacia abajo. | 3 |
| nav-index | Especifica el orden de tabulación de un elemento. | 3 |
| nav-left | Especifica dónde navegar al usar la tecla de flecha izquierda. | 3 |
| nav-right | Especifica dónde navegar al usar la tecla de flecha derecha. | 3 |
| nav-up | Especifica dónde navegar al usar la tecla de flecha hacia arriba. | 3 |
| outline-offset | Decora el contorno y lo dibuja más allá del borde. | 3 |
| resize | Especifica si un elemento es redimensionado por el usuario. | 3 |