Fondamenti di CSS: display e position

Ai folli che si stanno addentrando nel meraviglioso mondo di CSS come me, voglio dare un consiglio per evitare inutili mal di testa. Ogni volta che si affronta un problema di indentazione e/o impaginazione, bisogna tenere sempre ben a mente 2 fondamentali proprietà CSS: display e position.

Display – La migliore definizione che ho trovato è in assoluto questa su StackOverflow.com. I 3 valori “inline”, “block” e “inline-block” sono quelli storici e più usati, il nuovo valore “flex” è quello da studiare subito dopo. I valori “table”, “table-row” e “table-cell” li troveree spesso ma sono abusati. Una volta assorbiti i fondamenti, ricordatevi che alcuni tag HTML sono per default elementi-blocchi (lista completa) mentre i rimanenti sono elementi inline (lista completa).

Position – Causerà parecchi grattacapi. La migliore spiegazione che ho trovato è questa. Come si evince dal tutorial, “position” ha un doppio legame anche con le proprietà “float” e “clear”. Queste 3 proprietà insieme verranno molto usate.

Imparare la teoria “su carta” di queste proprietà è stupendo, fa sembrare tutto semplice, ma quando ci si trova con decine di layer innestati, ognuno con definizioni differenti, si fa molta fatica a seguire il significato logico dei vari elementi HTML. Se ogni volta che vi scontrate con codice HTML + CSS sentite una forte sensazione di frustrazione interna, sappiate che è un disagio assolutamente NORMALE!!!

CSS è fantastiglioso!

OK, OK, dovevo fare una cosa semplicissima con CSS: posizionare 2 elementi dietro l’altro in orizzontale e centrarli verticalmente. Facile direte voi … LA MINCHIA rispondo io!

vertical-align: Ironia sul web
vertical-align: Ironia sul web

Da buon neofita di CSS, come prima soluzione ho usato il comando vertical-align con valore middle, ovviamente il browser m’ha risposto picche (è s’è fatto pure ‘na risata). Come si può vedere dall’immagine allegata sulla destra, su questo argomento alcune persone particolarmente goliardiche hanno scatenato la loro ironia e ci si sono divertite alla grande 🙂 Ho iniziato a cercare, a ricercare e a ricercare ancora su Internet una possibile soluzione e dopo circa 37-38 ore di navigazione ininterrotta mi è venuto il dubbio che fosse un problema piuttosto comune. Può sembrare strano ma è esattamente così: questo è uno scoglio su cui ci si scontrano inizialmente praticamente tutti gli sviluppatori. Alla fine ho trovato questa pagina che spiega un paio di barbatrucchi semplici semplici, ma è frustrante constatare come l’HTML, dopo oltre 20 anni di onorato servizio, risulti ancora così “arretrato”.

A quanto pare i browser più recenti hanno risolto questi problemi di allineamento e orientamento usando il nuovo parametro FlexBox, che sarà la prossima funzionalità che andrò a studiare non appena mi riprendo da questo trip.