Corsi on-line

User Interface in CSS3

Dopo aver introdotto brevemente le Multiple Columns, continuamo il discorso relativo alle proprietà meno conosciute di CSS3 e non supportate in modo omogeneo da tutti i browser Web, ma questa volta parleremo di proprietà User Interface, esse si dividono in 3 categorie:

  1. Resizing: stabiliscono se un elemento potrà essere o meno ridimensionato dall’utente;
  2. Box sizing: pemettono di definire le modalità attraverso le quali un elemento viene inserito in una determinata area riempiendola;
  3. Outline Offset: definiscono e disegnano il contorno per i bordi di un elemento.

Per definire un elemento come ridimensionabile è disponibile la proprietà resize utilizzabile nel modo seguente:

div
 {
 resize:both;
 overflow:auto;
 } 

Un esempio del Box sizing può essere per esempio quello di due box affiancati ognuno occupante il 50% dell’area occupata disponibile, da notare come in questo caso siano necessari degli appositi “prefix” per la compatibilità con i diversi motori di rendering dei browser.

div
 {
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
 -webkit-box-sizing:border-box; /* Safari */
 width:50%;
 float:left;
 } 

Veniamo infine all’Outline Offset, nel caso specifico è bene ricordare che a differenza dei bordi le outline non sono concepite per occupare dello spazio e possono avere una forma diversa da quella rettangolare; nell’esempio seguente viene per esempio definita una regola che imposta un bordo di colore verde e un’outline gialla distante 10px dal bordo:

div
 {
 border:1px solid green;
 outline:1px solid yellow;
 outline-offset:10px;
 } 

Ritornando al discorso della compatibilità, va segnalato che “resize” non è attualmente supportata da IE e Opera mentre il browser di Microsoft non supporta Outline Offset.

Post correlati
I più letti del mese
Tematiche