due chiacchiere

Un reset CSS piccolo ed efficace

Come avrai forse notato, la frequenza dei post che parlano delle mie attività dietro le quinte del blog si è notevolmente ridotta negli ultimi mesi. Il motivo è semplicemente il raggiungimento di una tregua a quanto pare duratura tra me e l’omino talebano seduto sulla mia spalla: entrambi siamo abbastanza soddisfatti dello stato attuale del tema del blog, e quindi lui non mi punzecchia più come l’anno scorso per aggiustare questo o quel dettaglio. L’unica questione rimasta in sospeso è quella di decidere se sia meglio servire i fogli di stile all’interno del codice sorgente HTML (configurazione attuale), oppure come riferimento esterno separato. Il mese prossimo cambierò la configurazione del tema, e poi spulceremo tra le statistiche d’accesso per vedere quale soluzione ha consumato meno banda (io ho scommesso su quella in linea, vedremo). Nel frattempo, ho trovato il modo di far fare una cura dimagrante al foglio di stile, sostituendo il codice per il reset che usavo da anni con uno più snello e moderno.

Ma partiamo dall’inizio. Per i non addetti ai lavori, i fogli di stile (detti anche CSS) sono delle istruzioni contenute in un file di testo per dire al browser come vestire i contenuti di una pagina: definiscono i colori del testo e dello sfondo, i bordi intorno ad un contenitore, e millemila altri dettagli sull’aspetto finale del contenuto che ti sta di fronte. Come sai, sul mercato esistono tanti browser diversi e, un po’ come capita con le tante religioni cristiane, ognuno di essi interpreta la bibbia dei fogli di stile (lo standard emanato da un consorzio internazionale) in maniera leggermente diversa. Per ovviare a quest’inconveniente, alcuni sviluppatori hanno creato nel tempo insiemi di definizioni per tentare di far comportare tutte queste piattaforme in modo simile ed uniforme. Questi tentativi di creare una base di partenza comune si chiamano appunto CSS reset.

Io per anni ho usato una variante di quello di Eric Meyer, che ho sempre apprezzato per la sua semplicità e compattezza. Nel frattempo però i browser si sono evoluti, ed hanno capito che era bene aderire in maniera più fedele agli standard internazionali, per non perdere fette di mercato. Quindi parte di quelle regole di reset sono ora inutili ed antiquate. Ed è per questo che ho deciso di mettermi alla ricerca di un sostituto più al passo con i tempi, che ho infine trovato nella soluzione di Josh Comeau:

/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
  margin: 0;
}
/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

E così l’ho aggiunto al mio tema, per la gioia di grandi e piccini. Finora non ho notato nessun problema, ma se dovessi vedere qualcosa fuori posto, ti pregherei di farmelo sapere.

Commenti

  1. Trap
    ha scritto:

    Qui nessun problema 😀

    Risposte al commento di Trap

    1. ha scritto:

      Grazie! Con quali browser hai controllato, se posso chiedere?

      Risposte al commento di camu

      1. Trap
        ha scritto:

        Sia Firefox che Chrome, per desktop

        Risposte al commento di Trap
        1. ha scritto:

          Perfetto, stando alle mie statistiche, quei due motori coprono circa l’80% dei miei visitatori umani.

  2. ha scritto:

    interessante … sono un ignorante ma gli spunti sono ottimi
    grazie

    PS = anche qui nessun problema con Safari / Firefox

    Risposte al commento di kOoLiNuS

    1. ha scritto:

      Ognuno s’ingegna come può, ci mancherebbe. Il bello della rete è che tutti possiamo imparare ed insegnare nel nostro piccolo. Grazie per aver controllato con il Mac.

Rispondi a camu

Torna in cima alla pagina