Una dote essenziale di un buon sviluppatore a parer mio è la curiosità: ci spinge ad imparare e a ricercare nuove soluzioni. A chi non è capitato di visualizzare il codice HTML o CSS di un sito che sta visitando, oppure chiedersi: come sarà stato fatto? In questo appuntamento vedremo come due semplici fogli di stile possano soddisfare la nostra curiosità di sviluppatori e visitatori.
Cascata e fogli di stile utente
Come si sa, l'acronimo CSS sta per Cascading Style Sheets, ovvero fogli di stile a cascata. Il termine cascata indica come vengono trattati i CSS dai browser. Ci sono infatti tre origini per i CSS che sono:
User Agent CSS:
Author CSS:
User CSS:
Altre caratteristiche importanti in merito sono la specificità, l'ereditarietà e la risoluzione dei conflitti, che non tratteremo ma che consiglio di studiare nella «guida CSS». Ora, vediamo come sia possibile usare i CSS utente sui diversi browser.
CSS utente e browser
I CSS utente sono uno strumento molto potente anche per lo sviluppatore curioso oltre che per l'accessibilità. Vediamo brevemente come sia possibile visualizzare le pagine con i CSS utente nei diversi browser. A parte Internet Explorer, tutti i browser di ultima generazione hanno un buon supporto per i fogli di stile utente, consentendo di visualizzare le pagine visitate con i CSS autore e quelli utente assieme, oppure solo con i CSS utente, cosa molto utile.
Internet Explorer e i CSS utente
Internet Explorer offre la possibilità di visualizzare le pagine aggiungendo un foglio di stile utente. Dal menu Strumenti->Opzioni Internet->Generale-> Accesso Facilitato->Fogli di stile utente si porà specificare il CSS in locale da applicare alle pagine che visitiamo in Internet. Questa caratteristica, seppure utile, non si presta molto dato il supporto limitato dei CSS di livello 2 di Internet Explorer.
Opera 7 e i CSS utente
Opera è uno dei browser più avanti per il supporto dei CSS ed è ben predisposto per i CSS utente. Presenta già 10 fogli di stile utente predefiniti, dal menu Visualizza->Stile. Sarà possibile usarli insieme ai CSS autore, oppure solo in modalità utente. È inoltre possibile aggiungere all'elenco altri CSS utente. L'operazione è piuttosto delicata, perchè dovremo intervenire sul file di configurazione di Opera, ma è comunque molto semplice. Un tutorial molto ben fatto in merito si può trovare su questa pagina. Per aggiungere i CSS utente in Opera, dovremo aprire con un editor di testo il file OperaDef6.ini nella cartella di Opera. È importante che il programma sia chiuso al momento della modifica di questo file. Una volta aperto, troveremo delle righe simili a queste:
[Local CSS Files]
Name 1=Emulate text browser
Translated name 1=69483
File 1=C:ProgrammiOperastylesusertextonly.css
... altre righe, fino al decimo file ...
Name 10=Show structural elements
Translated name 10=69492
File 10=C:ProgrammiOperastylesusershowstructure.css
Quello che dovemo aggiungere di seguito per avere a disposizione un altro CSS utente sarà:
Name 11= nome del CSS utente
Translated name 11=69493
File 11=C:percorsodelfile.css
Ovviamente scegliendo un nome facile e specificando il percorso del CSS locale, e tenendo presente che i numeri (ne compaiono uno per riga) sono progressivi. Si dovrà poi salvare il file con le modifiche apportate.
Ora ci basterà riavviare Opera per avere la possibilità di applicare i CSS utente che abbiamo aggiunto, ed il gioco è fatto.
