Come selezionare gli oggetti da personalizzare usando il DOM InspectorPer effettuare le modifiche all'interfaccia è necessario capire come funzionano i CSS e il
Document Object Model (abbreviato come
DOM), senza addentrarci troppo a fondo sull'argomento: di seguito sono elencate alcune nozioni che è utile conoscere almeno per fare delle piccole personalizzazioni.
Si pensi agli oggetti dell'interfaccia come a dei rettangoli disegnati su una lavagna, a ognuno di questi rettangoli possono essere applicate delle regole di stile (CSS) che ne definiranno le dimensioni, il colore del testo e dello sfondo, la loro posizione rispetto agli altri oggetti, la loro visibilità e così via.
Il primo passo quindi è quello di “selezionare” l'oggetto a cui si vogliono applicare tali regole. Per farlo è necessario utilizzare un'estensione, il
DOM Inspector (chiamato anche Domi). Questa estensione permette di navigare all'interno del Document Object Model e ricavare il riferimento agli oggetti dell'interfaccia o delle pagine web che si stanno visitando.
Una volta installato e riavviato il browser, è possibile aprire il DOM Inspector dal menu "Strumenti → Sviluppo Web", o usando la combinazione di tasti CTRL+SHIFT+I.
Per ispezionare una finestra di Firefox fare clic in "File → Inspect Chrome Document". Qui appariranno un elenco di pagine, selezionare quella che riporta il nome della pagina aperta in Firefox.
A questo punto verranno mostrate due sezioni:
- nella sezione di sinistra viene riportata la struttura del documento,
- nella sezione di destra appariranno informazioni riguardanti l'oggetto selezionato.
Il metodo più semplice per trovare un oggetto è quello di usare "Edit → Select Element By Click".
A questo punto portarsi sulla finestra e fare clic sull'elemento desiderato. Nell'immagine di sopra è stata selezionata la Barra di navigazione di Firefox, come si vede guardando nel pannello di destra è possibile vedere gli attributi di questo oggetto:
id = nav-bar
class = toolbar-primary chromeclass-toolbar
L'
id e la
class sono gli attributi più importanti e non è detto che siano sempre presenti, senza addentrarci troppo a fondo su questo argomento, una volta che si conosce l'
id[7i] di un elemento è possibile selezionarlo usando il simbolo #, per riferirsi alla class invece si usa un ., ad esempio si può selezionare la Barra di navigazione utilizzando:
#nav-bar{…}
.oolbar-primary chromeclass-toolbar{…}
all'interno delle parentesi graffe verranno inserite le regole di stile che si vogliono applicare alla Barra di navigazione.
C'è quindi differenza fra l'usare il suo
id per riferirci a un oggetto oppure la sua
class?
La risposta è sì.
Un
id è unico per ogni oggetto, e per questo è sempre il modo consigliato per riferirsi all'oggetto, la
class invece potrebbe essere condivisa anche con altri oggetti, il risultato è quello che usando come selettore la
class si potrebbe applicare lo stile anche ad altri oggetti e non solo alla Barra di navigazione.
E se l'oggetto di cui si vuol modificare l'aspetto non dovesse avere né
id né
class?
In questo caso è un po' più complicato, ma è sempre possibile selezionarlo, si può, ad esempio, utilizzare uno degli altri attributi dell'elemento XUL o HTML tramite la sintassi:
tipo_oggetto[attributo="valore"]{ … }
nel caso considerato della Barra di navigazione useremo:
toolbar[toolbarname="Barra di navigazione"]
Gli attributi hanno comunque un significato, possono ad esempio indicare lo stato dell'oggetto, quindi è bene fare attenzione nell'utilizzare questo tipo di selettore.
Nell'esempio della Barra di navigazione, l'attributo
fullscreentoolbar indica lo stato di visualizzazione a schermo intero, si può cioè applicare uno stile solamente quando alla Barra di navigazione quando Firefox è in modalità "schermo intero", in questo modo:
#nav-bar[fullscreentoolbar="true"] {…}
e così via.
Altri selettori verranno discussi nella discussione quando si presenteranno nei vari codici proposti.
Topic: Personalizzazione dell'interfaccia (userChrome e userContent) [da Firefox 4] (Letto 39877 volte)