Pillole di Joomla: inserire CSS incorporato

Immagine da Joomla

L'uso dei CSS in linea è deprecato, soprattutto per la ragione che NON distingue tra contenuti e stile.

Nella mia innata pigrizia, confesso che spesso ne ho fatto uso in queste pagine; il fatto che questo sito abbia scopi amatoriali non è una scusante, visto che l'ho messo in piedi per migliorare le mie conoscenze e creare pagine sintatticamente corrette in Joomla.

I contenuti pubblicati da oggi non avranno più CSS in linea, promesso.

Quando voglio applicare uno stile destinato ad apparire solo in una pagina, mi limiterò a CSS incorporati.

Gli stili CSS incorporati si dichiarano all'interno della sezione head.

Joomla costruisce dinamicamente la pagina HTML da inviare al browser e si occupa di generare il codice relativo, compresa la sezione head.

Questo significa che, quando si scrive un articolo, non si ha nessun controllo diretto di quanto viene inserito in tale sezione, escludendo alcuni metadata.

Niente vieta di inserire CSS incorporati all'interno di un articolo: lo stile viene applicato correttamente.

Però, al di là della scarsa eleganza del codice generato, questo impedisce una corretta validazione HTML.

Fortunatamente Joomla è abbastanza flessibile e permette di manipolare i contenuti generati tramite le API native (con un aiutino di plugin/moduli esterni ...).

L'uso delle API e di codice PHP ci permette di aggiungere codice CSS incorporato in modo corretto e con semplicità.

Uno dei plugin che installo in ogni sito Joomla è DirectPHP, che permette di inserire codice PHP in un articolo in modo immediato.

Tutto quello che occorre per inserire CSS incorporato è questo "metacodice" PHP:

<?php
  $doc =& JFactory::getDocument();
  $stile1="... ";
  $stile2="... ";
  ...
  $stilen="... ";
  $doc->addStyleDeclaration($stile1);
  $doc->addStyleDeclaration($stile2);
  ...
  $doc->addStyleDeclaration($stilen);
?>

Il codice è davvero semplice: una volta inizializzato l'oggetto globale documento (variabile $doc), si definiscono le variabili stringa che contengono le varie regole di stile (variabili $stile1... $stilen).

Al termine si usa il metodo addStyleDeclaration, che inserisce il CSS incorporato all'interno della sezione head.

Vediamo un esempio, applicato in questa pagina:

<?php
  $doc =& JFactory::getDocument();
  $stile1=".blocco1 { width: 360px; padding: 0 10px 10px 10px; margin: 10px 0 10px 0; background-color: #cccccc; border: 2px solid #000000;}";
  $stile2=".blocco2 { font-weight: bold; font-size: 18px; color: #0000ff; }";
  $doc->addStyleDeclaration($stile1);
  $doc->addStyleDeclaration($stile2);
?>

Definisco due stili che vengono applicati ai blocchi con classe blocco1 e blocco2, usati nel codice HTML in questo modo:

<div class="blocco1">
  <p>Sono all'interno di "blocco1"</p>
  <div class="blocco2">Sono all'interno di "blocco1" e "blocco2"</div>
</div>

Questo è il risultato:

La pagina è sintatticamente corretta, come provato dalla validazione HTML5.

Se si analizza il codice generato, si troverà all'interno della sezione head il codice CSS che abbiamo incorporato:

<style type="text/css">
.blocco1 { width: 360px; padding: 0 10px 10px 10px; margin: 10px 0 10px 0; background-color: #cccccc; border: 2px solid #000000;}
.blocco2 { font-weight: bold; font-size: 18px; color: #0000ff; }
....

Concludo ricordando che questo modo di procedere è applicabile, anzi va applicato, a tutte le sezioni che dovrebbero essere inserite all'interno di head. Codice Javascript, ad esempio: in questo caso esiste il metodo addScriptDeclaration.

Per maggiori dettagli si può consultare la documentazione delle API di Joomla.