Colore di sfondo del body: mai dimenticarlo

Non tutti lo sanno, ma ogni browser consente di impostare un colore predefinito per lo sfondo ed il testo delle pagine web. Queste impostazioni vengono utilizzate quando il sito visitato non ha un colore già stabilito: di solito sono rispettivamente bianco e nero, ma un utente potrebbe preferire altre combinazioni.

Questo comporta possibili problemi quando in un sito il body non ha un colore di sfondo. Poniamo ad esempio che un utente abbia il rosso come background predefinito; questo è quello che vedrà andando sul sito bloggers.com:

Un altro esempio si trova stavolta su Modern Life is Rubbish che recentemente è stato anche ridisegnato.

Il problema si aggira facilmente ricordandosi sempre di dare al body un colore di sfondo:

body { background: #fff }

I due siti che ho fornito come esempio sono stati i primi che ho scoperto, ma se fate una ricerca non sarà troppo difficile trovare qualche altro caso clamoroso. Ricordatevi di questo particolare quando realizzate un sito, vi eviterà le lamentele dei clienti (e dei visitatori) che hanno dei colori preimpostati sul loro browser.

Vuoi far crescere il tuo progetto online?

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.

10 commenti su “Colore di sfondo del body: mai dimenticarlo”

  1. Ciao Tommaso, in effetti l’impostazione del colore di sfondo viene spesso tralasciata quando esso deve essere bianco. Fai bene a ricordarci di impostarlo sempre :) anche se non so quanti imposterebbero un rosso come colore predefinito :P Tu hai avuto qualche problema in merito?
    Ciao

  2. Il rosso era volutamente una forzatura, ma non è un caso raro: mi è capitato il caso di una persona con sfondo del browser marrone che si lamentava per come appariva un sito :)

  3. Devo dire che da ModernLife… non me lo aspettavo.

    Invece ho notato che molti usano le immagini di sfondo senza mettere anche un colore. Questo è fastidioso quando si vedono i colori chiari su sfondo bianco in attesa che l’immagine scura venga caricata.

  4. @neon: esatto, quello è un altro problema, e non si presenta solo al caricamento della pagina.

    Pensa a tutti coloro che navigano con le immagini disabilitate, molti siti in quel caso diventano illeggibili.

  5. Post cosi semplice quanto geniale, hai fatto benissimo a ricordarci di settare sempre il colore di sfondo, sfugge qualche volta!

  6. Occorrerebbe selezionare il colore di sfondo del body tra i primissimi settaggi CSS, anche perché spesso capita di dover impostare uno sfondo specifico per un singolo div o un singolo span, che quindi, in forza della sua specificità, deroga all’impostazione generale.