Interfaccia utente CSS

Interfaccia utente CSS

In questa sezione, imparerai i seguenti attributi di interfaccia utente CSS:

  • resize
  • outline-offset

Supporto del browser

I numeri nella tabella indicano la versione del browser di primo rilascio che supporta completamente l'attributo.

Proprietà Chrome IE Firefox Safari Opera
resize 4.0 Non supportato 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Ridimensionamento

resize L'attributo specifica se e come l'elemento deve essere ridimensionato dall'utente.

Questo elemento div è ridimensionabile dall'utente!

Modifica delle dimensioni: fare clic e trascinare l'angolo inferiore destro di questo elemento div.

Attenzione:Internet Explorer non supporta l'attributo resize.

L'esempio seguente consente agli utenti di modificare solo la larghezza dell'elemento <div>:

Esempio

div {
  resize: horizontal;
  overflow: auto;
}

Prova a fare tu stesso

L'esempio seguente consente agli utenti di modificare solo l'altezza dell'elemento <div>:

Esempio

div {
  resize: vertical;
  overflow: auto;
}

Prova a fare tu stesso

L'esempio seguente consente agli utenti di modificare sia l'altezza che la larghezza dell'elemento <div>:

Esempio

div {
  resize: both;
  overflow: auto;
}

Prova a fare tu stesso

In molti browser, <textarea> è predefinitamente ridimensionabile. Qui, abbiamo utilizzato l'attributo resize per disabilitare questa ridimensionabilità:

Esempio

textarea {
  resize: none;
}

Prova a fare tu stesso

Spostamento del contorno CSS

outline-offset L'attributo aggiunge spazio tra il contorno e il bordo dell'elemento.

Questo div ha un contorno di 15px al di fuori dell'angolo estremo destro.

Attenzione:Il contorno è diverso dal bordo! A differenza del bordo, la linea di contorno è disegnata al di fuori del bordo dell'elemento e potrebbe sovrapporsi ad altri contenuti. Inoltre, il contorno non fa parte delle dimensioni dell'elemento: la larghezza e l'altezza totale dell'elemento non sono influenzate dalla larghezza della linea di contorno.

L'esempio seguente utilizza l'attributo outline-offset per aggiungere spazio tra il bordo e la contorno:

Esempio

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;
}

Prova a fare tu stesso

Proprietà dell'interfaccia utente CSS

La tabella seguente elenca tutte le proprietà dell'interfaccia utente:

Proprietà Descrizione
outline-offset Aggiungi spazio tra il contorno e l'angolo della cornice dell'elemento.
resize Determina se un elemento può essere ridimensionato dall'utente.