Dega's blog

Lavorando al CSS di un sito internet, ho avuto la necessità di fare un override di una regola contenuta nel foglio di stile principale utilizzando i tag <style>.

Dichiarare semplicemente la nuova regola nel documento non era sufficiente, poiché era quest’ultima ad essere sovrascritta dal foglio di stile principale e non viceversa. Una soluzione potrebbe essere definire delle classi in modo appropriato (regole specifiche sovrascrivono sempre le classi), tuttavia se gran parte del sito è già stato preparato potrebbe essere scomodo andare a ridefinire le classi degli elementi se l’override è necessario su una singola pagina. Una ricerca ha però rivelato che esiste un modo molto semplice per forzare l’override: basta aggiungere la stringa !important alla regola. Ad esempio:

<style>
div#content img {
width:200px !important;
}
</style>

In questo modo ogni altra regola che imposta la larghezza delle immagini contenute nel <div> verrà sovrascritta con la nuova regola. In teoria bisognerebbe evitare di utilizzare questo metodo, poiché formalmente e stilisticamente non troppo corretto, ma… funziona 😉

Dopo aver perso ore e ore per capire come funziona e come integrare correttamente Fancybox in un sito internet, vi scrivo qui delle istruzioni (idealmente semplificate) su come farlo. Sento la necessità di scrivere questo articolo perché, nonostante io non sia un professionista nel settore (anzi!), ma penso comunque di cavarmela abbastanza bene a smanettare con i siti, ho trovato difficoltà nel seguire le istruzioni pubblicate sul sito ufficiale (visto che tralasciano dei passi importanti) e nel trovare informazioni supplementari (anche in inglese, figuriamoci in italiano).*

*Nota doverosa: essendo che i tempi di questo blog sono come quelli della giustizia italiana – molto lunghi (per questo articolo hanno raggiunto i sette mesi dall’idea alla pubblicazione), ora le informazioni che si trovano sul sito ufficiale sono state rese più chiare. Pubblico comunque l’articolo, visto che ormai è scritto, nel caso torni utile a qualcuno! 🙂

Ho scoperto Fancybox perché volevo inserirla in un sito a cui stavo lavorando, e solo in seguito ho realizzato che in passato avevo tentato invano di integrarla anche in questo blog per la visualizzazione delle immagini utilizzando un plugin; ora, quando ho un po’ di tempo, posso implementare il codice “manualmente”, senza usare un plugin esterno, malfunzionante peraltro! 🙂

Per chi non lo sapesse, Fancybox è un insieme di javascript e altri ammucchi di codice che, opportunamente integrati all’interno di un sito internet, permettono di aprire una fancy box appunto, ovvero un “contenitore” delle dimensioni prestabilite (da voi) che si sovrappone alla pagina e che può contenere qualsiasi cosa. Tipicamente viene usato per visualizzare le immagini in modo graficamente molto carino a mio avviso, anche perché è possibile aggiungere effetti grafici personalizzati molto belli; altri contenuti tipici sono video (di Youtube, ad esempio). Se volete vedere qualche esempio di come funziona Fancybox, date un’occhiata a questa pagina. Continua a leggere »

Lavorando all’ennesimo sito internet avevo la necessità di gestire in maniera dinamica l’opacità di alcune immagini. Più precisamente si trattava di bottoncini in formato PNG che, quando non attivi, dovevano diventare semitrasparenti in modo da essere visibili ma comunque in secondo piano rispetto al resto della pagina.

Dopo una breve ricerca, la buona notizia: è possibile gestire l’opacità delle immagini direttamente via CSS, senza dover necessariamente creare due immagini differenti. La cattiva notizia? Il codice CSS che gestisce l’opacità è differente a seconda che si usi Firefox (e con lui ogni altro browser ragionevole che sia stato inventato) o Internet Explorer. Nonostante questo, però, si possono inserire entrambi i codici per gestire l’opacità, e il browser riconoscerà soltanto “quello che gli compete”. Continua a leggere »