Interfaz de usuario
En este capítulo aprenderás acerca de las siguientes propiedades de la interfaz de usuario:
resizeoutline-offset
Compatibilidad con el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | Chrome | Edge | Mozilla | Safari | Opera |
resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Cambios de tamaño
La propiedad resize especifica si (y cómo) el usuario debe cambiar el tamaño de un elemento.
El siguiente ejemplo le permite al usuario cambiar el tamaño solo del ancho de un elemento <div>:
Ejemplo:
div {
resize: horizontal;
overflow: auto;
}
El siguiente ejemplo le permite al usuario cambiar el tamaño solo de la altura de un elemento <div>:
Ejemplo:
div {
resize: vertical;
overflow: auto;
}
El siguiente ejemplo le permite al usuario cambiar el tamaño tanto del alto como del ancho de un elemento <div>:
Ejemplo:
div {
resize: both;
overflow: auto;
}
En muchos navegadores, el elemento <textarea> se puede cambiar de tamaño de forma predeterminada. Aquí, hemos utilizado la propiedad de cambio de tamaño para desactivar la capacidad de cambio de tamaño:
Ejemplo:
textarea {
resize: none;
}
Desplazamiento de contorno
La propiedad outline-offset agrega espacio entre un contorno y el borde o borde de un elemento.
Nota: El contorno difiere de las fronteras. A diferencia del borde, el contorno se dibuja fuera del borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por el ancho del contorno.
El siguiente ejemplo usa la propiedad outline-offset para agregar espacio entre el borde y el contorno:
Ejemplo:
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
Propiedades de la interfaz de usuario
La siguiente tabla enumera todas las propiedades de la interfaz de usuario:
| Propiedad | Descripción |
outline-offset | Agrega espacio entre un contorno y el borde o borde de un elemento. |
resize | Especifica si el usuario puede cambiar el tamaño de un elemento o no. |
Traducido con 💚 desde W3Schools.com