fatti trovare dai tuoi clienti
Corso SEO & CSS: #25 Box Model
Ogni browser è differente, in passato i webmaster dovevano prevedere un diverso layout per ogni browser, per mostrare sempre la stessa pagina in modo omogeneo, senza differenze, scopriamo perché...
« Corso SEO & CSS: #24 Selettori e DOM
- Cosa sono i margini, i bordi e la distanza dal bordo?
- Cosa è il Box-Model CSS?
- Quali sono le differenze tra i vari Browser?
Cross Browser
Le differenze che ci sono tra i vari browser
In passato i browser si contendevano il web e non c'era una regolamentazione chiara di come si dovessero comportare i programmatori del web (i webmaster) affinché le pagine web venissero mostrate al pubblico tutte allo stesso modo, indipendentemente dal browser utilizzato!
Se desideri essere in prima pagina su Google, è fondamentale essere presente su internet in modo professionale, dunque omogeneo, ma soprattutto senza errori di visualizzazione tra un browser e un altro!
Era solito in passato inserire codice HTML, Javascript o CSS che tenesse conto di tutte le differenze tra un browser e gli altri; talvolta si leggeva proprio un avviso del tipo «Sito web ottimizzato per Internet Explorer!» o simili!
Queste sono dette in gergo problematiche di Cross-Browser. Cioè passando da un browser all'altro il tuo sito Web può apparire diverso da come te o aspetti e talvolta smette addirittura di funzionare!
Esistono servizi e strumenti per testare le pagine web con molteplici browser e dispositivi in un colpo solo, si veda ad esempio www.crossbrowsertesting.com.
Oggi i dispositivi in circolazione sono talmente tanti e talmente diversi tra loro che il webmaster non può permettersi di perdere più tempo nel cross-browser testing!
Siccome la maggior parte dei problemi sorgeva dal fatto che alcuni browser misuravano le dimensioni dei blocchi HTML (width e height) comprendendo solo il contenuto mentre altri browser includevano anche i margini e in bordi, è sorta l'esigenza di creare uno standard, così è nato il Box Model!
Box Model CSS
Margini, bordo, spaziatura e contenuto
In CSS si parla di Box Model quando ci si riferisce all'impaginazione dei contenuti, il cosiddetto "Layout".
Il Box-Model è essenzialmente un contenitore a forma di rettangolo che si riferisce alla rappresentazione grafica di un generico elemento HTML del DOM che abbiamo visto la volta scorsa.
Il Box-Model consiste nella definizione delle seguenti componenti:
- margin: margine esterno, che è un'area libera la cui misura può essere espressa in pixel o in percentuale;
- border: linea di perimetro dell'elemento che può essere decorata in vari modi e il cui spessore tipicamente è espresso in pixel;
- padding: margine interno, che è un'altra area libera la cui misura può essere espressa in pixel o in percentuale;
- content: l'effettivo contenuto dell'elemento. Seguendo le regole del DOM, il contenuto può essere nuovamente un altro elemento HTML annidato al suo interno, che avrà anch'esso margine esterno, bordo, margine interno e contenuto.
Sia margin che padding sono aree trasparenti
Tieni sempre presente che quando si impostano le dimensioni di un elemento HTML usando il CSS, attraverso le proprietà width (larghezza) e height (altezza), si stanno impostando le dimensioni del content (del contenuto).
Esempio di CSS
Impostare le dimensioni del Box Model
L'aspetto grafico di un generico elemento HTML può essere configurato in questo modo:
In questo modo si è espresso che tutti gli elementi DIV con class="esempio" saranno larghi 100 pixel, avranno un primo margine interno (tra il contenuto e il bordo) spesso 10 pixel, poi il tutto sarà contornato da un bordino blu spesso un pixel e tutto appiccicato agli altri elementi della pagina web poichè margin è impostato a zero.
In totale la larghezza sarà 100px+20px+2px=122 pixel complessivi. Questo metodo di gestire il box-model può essere complicato, perciò è nata un'altra proprietà CSS molto comoda: il Box Sizing.
Box Sizing
Definire la dimensione complessiva di un elemento
Per garantire che il box-model rientri in una misura certa (width x height), ti suggerisco di inserire sempre il seguente codice all'inizio del file CSS:
Impostando a tutti gli elementi box-sizing: border-box; si costringe il browser — secondo i nuovi standard CSS3 — ad adattare il contenuto (content) a rientrare nelle misure width e height impostate che però stavolta si riferiscono alla dimensione totale dell'elemento, comprensivo di padding, border e margin!
Il border presente nel commento è molto comodo per fare Debug, quando non capisci bene dove finisca un elemento e dove incominci l'altro, sarà sufficiente rimuovere il commento per vedere una linea tratteggiata intorno a tutti gli elementi della pagina!
Conclusioni
Hai capito che è molto importante tener presente come sia fatto il Box Model per evitare brutte sorprese e perdere visitatori, e dunque perdere posizioni su Google!
Nel corso dei prossimi articoli di questo Blog sulla SEO approfondiremo altri importanti aspetti del CSS con particolare attenzione a quelli che potenziano la visibilità del tuo sito web e lo portano più facilmente in prima pagina sui motori di ricerca.
Ti do appuntamento alla prossima settimana, nel frattempo metti un like 👍🏻 se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati!
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.