Due proprietà: display e visibility. Analizziamo similitudini e differenze.
Chi si sarà già avvicinato al fantastico mondo dei CSS, spero anche grazie a questo sito, avrà sicuramente sperimentato queste due proprietà: display e visibility. Avrete sicuramente notato che sono simili come proprietà, ma hanno delle differenze sostanziali: andiamo ad analizzare queste proprietà più da vicino.
Per quanto riguarda la proprietà display, questa specifica il modo di visualizzazione di un elemento: il valore può essere none, block, inline e list-item. Ce ne sarebbero anche altri, ma vista la scarsa implementazione non se ne consiglia troppo l’uso. Il valore none indica che l’elemento non è visibile, il valore block indica che l’elemento sarà visibile come blocco distaccato, quale può essere ad esempio un elemento DIV; il valore inline indica che l’elemento deve assumere un comportamento da blocco in linea quale può essere quello dell’elemento SPAN; list-item indica che l’elemento si comporta come un punto di un elenco.
Per quanto riguarda invece la proprità visibility, essa, come display, imposta la visibilità di un elemento e supporta i valori: hidden(nascosto) e visible(visibile), tuttavia il comportamento è assai diverso da quello di DISPLAY. Un elemento impostato come non visibile attraverso display:none infatti non solo non è visibile, ma lo spazio che avrebbe occupato nella pagina viene rimpiazzato dagli altri elementi, se invece impostiamo visibility:hidden lo spazio cheoccuperebbe l’elemento risulta vuoto, ma viene preservato. Notiamo quindi che entrambe le proprietà possono impostare la visibilità di un elemento, ma la differenza è molto evidente.
Prossimamente analizzeremo la proprietà POSITION e alcune sue caratteristiche. Buona lettura e venite a trovarmi spesso!
















