sovrascrivere una regola css o realizzare un file personalizzato. In questo articolo voglio parlare della sovrascrittura dei CSS, come va fatta e perchè viene fatta. Mai come oggi, sopratutto con l'uso di framework come bootstrap, fundation, zimit, ink, HTML KickStart, Kikstrap e molti altri, nasce l'esigenza di personalizzare l'aspetto secondo i nostri parametri rimanendo dentro i "dettami" del framework. Stessa cosa vale quando si utilizza un cms e vogliamo personalizzare l'aspetto di una estensione per renderla coerente con la grafica del template.
Modificare una regola in fondo è semplice, se ad esempio volessimo cambiare il colore di un titolo H2 basterà intervenire sul codice esadecimale sostituendolo con quello relativo del colore scelto!
Qualcuno si è mai domandato che fine facesse la nostra personalizzazione se ad esempio aggiornassimo l'estensione oppure il framework? Ve lo dico io se non lo sapete: verrebbe cancellata definitivamente. Il file modificato con tanta cura verrebbe aggiornato dal nuovo che non contiene le nostre modifiche.
Questa situazione si verifica più spesso di quanto pensiate, costringendoci a riscrivire quelle modifiche che ne avevano reso unico l'aspetto del nostro sito.
Negli ultimi mesi ho corretto molte di queste situazioni in siti sviluppati da "personaggetti" (direbbe il governatore della campania) che si definiscono webmaster, grafici e maghi del computer! Possibile, mi chiedo, che si facciano modifiche senza pensare al futuro delle proprie realizzazioni?
Vediamo allora come muoverci cercando di capire come avviene la lettura del documento css da parte di una pagina web, sia generata da un Cms come Joomla, Drupal o Wordpress, che da una semplice pagina realizzata in HTML.
Cercherò di essere il più chiaro possibile ipotizando degli esempi di volta in volta.
Intanto vediamo di capire come vengono letti i css da una pagina HTML. Il documento css è semplicemente un file con delle istruzioni, queste istruzioni vengolo lette proprio come un essere umano leggerebbe un articolo, ovvero iniziando la lettura del documento (una pagina, un libro un testo) in alto a sinistra e scorrendo riga per riga dall'alto verso il basso.
Sappiamo che una pagina web potrebbe avere più documenti css collegati, quindi il browser leggerà il primo documento css e poi il secondo esattamente come una persona leggerà la prima pagina e poi passerà alla seconda.
L'ordine con cui vengono letti questi documenti non è casuale e dipende dalla sequenza con cui le istruzioni per leggere i css sono scritte. Vediamo un esempio:
In qualsiasi pagina html, generata o meno da un CSM abbiamo la nostra sezione HEAD che contiene le istruzioni per leggere uno o più file css;
<head> <link href="/template.css" rel="stylesheet" type="text/css">
<link href="/stile.css" rel="stylesheet" type="text/css">
</head>
nell'esempio abbiamo 2 file che vengono richiamati, il primo, template.css ed il secondo stile.css. In questo caso se la stessa regola fosse scritta in tutte e due i file, solo quella scritta nel file stile.css verrebbe presa in considerazione perchè letta per ultimo.
Aggiungo anche che non tutti i template usano 2 file css, alcuni ne usano uno solo e altri addirittura 3 o anche 4.
Cerchiamo però di capire meglio; se nel file template.css c'è l'istruzione che dice che i link del sito devono essere di colore nero, e nel file stile.css la stessa istruzione dice che il colore dovrà essere blu, il browser che leggerà il codice dei "documenti" leggerà prima l'istruzione del file template.css prendendo "atto" che dovrà fare i link di colore nero, però subito dopo, leggendo il file stile.css, andrà a sostituire il colore nero con quello blu, esattamente come è indicato.
Naturalmente la lettura è talmente veloce che noi mai, ci accorgeremmo del cambiamento da nero a blu nel nostro monitor.
Qualcuno potrebbe chiedersi il perchè di 2 file separati e qui non c'è una vera risposta, dipende dallo sviluppatore, dalla sua creatività e da come ha pensato il template o l'estensione!
Vediamo ancora un esempio:
Abbiamo questa situazione: sito realizzato con un CMS che avrà il suo template, poi abbiamo installato alcuni moduli che ne implementano qualche funzione, ad esempio abbiamo uno slideshow dove vengono visualizzati un titolo ed una descrizione per ogni immagine che scorre.
Sia il template del sito che il modulo slideshow hanno i loro file css, e nel css dello slideshow ci sono le regole di quanto grande dovranno essere i caratteri del titolo e della descrizione dell'immagine che nel nostro caso ci sembrano un pò troppo grandi andando a stonare con il resto dei contenuti.
Naturalmente andando a cambiare dimensione direttamente sull css dello slider otteremmo già una soluzione, ma se per caso andassimo ad aggiornare lo slideshow con una versione più recente certamente ne perderemmo le modifiche!
Come procedere allora?
Realiziamo un file dove inserire tutte le nostre regole che andranno a sovrascrivere quelle dettate da qualsiasi altro file, quindi inserendolo fra i tag HEAD del nostro template, sara sufficiente creare un file, ad esempio personalizzato.css richiamandolo poi con una stringa simile a quelle viste nel precedente esempio;
<head> <link href="/template.css" rel="stylesheet" type="text/css">
<link href="/stile.css" rel="stylesheet" type="text/css">
<link href="/personalizzato.css" rel="stylesheet" type="text/css">
</head>
Inserendo il richiamo al file personalizzato.css successivamente agli altri file css ci garantiremo che le istruzioni contenute in esso verranno lette per ultimo sovrascrivendo quindi quelle precedentemente lette.
L'istruzione !important
C'è ancora una cosa da sapere, potrebbe capitare che in qualche CMS il file css di qualche estensione venga letto sempre per ultimo, vanificando quindi quanto detto fin ora.
In questi casi è possibile dichiarare che la proprietà della regola inserita nel nostro file personalizzato.css sia l'unica valida inserendo nella dichiarazione l'istruzione !important (con il punto esclamativo prima di important), vediamo alcune regole css che contengono l'istruzione.
.contenitore {
color: #cccccc !important;
font-size: 16px !important
padding: 10px !important;
}
Con questo articolo spero di aver fatto un pò di chiarezza e di avervi fatto "crescere" professionalmente un poco in questa materia.
Se ritenete di potermi ringraziare offrendomi un caffè cliccate pure nel pulsante sottostante o su di un banner