px, pt, em, %: multimedia experience.
Quando i CMS, o i loro moduli, producono html con css inline può diventare complicato modificare la forma di quel contenuto. Questa è un soluzione semplice ed efficace al problema: usare il selettore degli attributi con valore “style”.
codice html:
<span style="font-size: 15px; color: #DDDDDD">Hello, world"</span>
codice css:
span[style]{
color: inherit !important;
font-size: inherit !important;
}
Articolo originale: Override Inline Styles with CSS
Dopo alcuni anni ho riattivato il mio blog su blogger. Come prima cosa ho pensato di cambiare il tema facendo in modo che l’mmagine dell’header cambiasse ad ogni caricamento della pagina. Credevo che bastasse installare un widget fornito da blogger, ma ho scoperto, purtroppo, che non è così. Quindi ho cominciato a girare per la rete alla ricerca di una soluzione e alla fine ho trovato il modo che vi descrivo di seguito.
Per fare in modo che le immagini dell’header cambino ad ogni apertura della pagina si deve:
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<!-- Start Modification. -->
<script type='text/javascript'>
var banner= new Array()
banner[0]="http://url_della_tua_immagine"
banner[1]="http://url_della_tua_immagine"
banner[2]="http://url_della_tua_immagine"
banner[3]="http://url_della_tua_immagine"
/*banner[4]="http://url_della_tua_immagine"*/
var random=Math.round((banner.length-1)*Math.random());
document.write("<img src='"+banner[random]+"' style='display: block'/>");
</script>
<noscript>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</noscript>
<!-- End Modification. -->
</a>
</div>banner[0]="http://url_della_tua_immagine" popolando così l’array delle immagini.P.S.
Le dimensioni delle immagini devono essere, in larghezza, grandi come la larghezza del blog. Per sapere qual è la larghezza potete guardare il valore di width dello stile #content-wrapper (almeno per alcuni temi).
Per tutti i web designer, segnalo questo sito molto interessante: FontTester. Il sito permette di testare vari font mettendoli a confronto direttamente nel browser, modificando gli stili del CSS.
Si tratta di un’applicazaione molto semplice, ma al tempo stesso molto efficace. Io l’ho provato su Linux e mi ha dato dei problemi (legati all’assenza dei font presenti sulle macchine windows); prometto di testarlo anche su altri sistemi, prossimamente.
Secondo me, ma anche secondo altri miei colleghi, questa è sicuramente una delle più belle estensioni che siano state create per Firefox, almeno per gli sviluppaotori*.
Le sue capacità sono enormi. Con Firebug si riesce a analizzare ogni singolo aspetto della pagina HTML caricata: l’albero DOM, il codice HTML, i CSS, le prestazioni in fase di download della pagina e dei suoi elementi, gli script. Ma la cosa ancor più sorprendente è la possibilità di modificare il codice on the fly e vedere subito i risultati. In questo modo la definizione dei CSS, per esempio, diventa un processo diretto, fatto di prove e di errori, praticati direttamente nel browser. Ovviamente sono esclusi tutti i possibili risvolti legati all’(in)compatibilità con altri browser. Oltre a tutto questo ci sono altre funzionalità, come la possibilità di creare un log per il debugging in javascript, una console per i messaggi, ecc.
Come se non bastasse, molti altri sviluppatori hanno cominciato a implementare add-on per Firebug, estendendo ancora di più le sue già notevoli capacità (vedi post precedente su YSlow).
Vi segnalo il sito dell’add-on e il sito di chi lo ha sviluppato.
* Quando parlo di sviluppatori intendo tutti coloro che hanno a che fare con lo sviluppo o l’analisi delle pagine HTML, includendo chi si occupa di: SEO, accessibilità, web design, programmazione di web application, ecc.
Con questo post voglio iniziare un ciclo di brevi articoli nei quali parlare delle estensioni per Firefox.
Le estensioni (o add-on) sono uno degli elementi più interessanti di questo browser perché permettono di aggiungere qualsiasi tipo di funzionalità. Ad oggi il numero di add-ons è veramente impressionante ed ancora più impressionante è la qualità di questi mini prodotti (in alcuni casi per niente mini).
Il primo add-on del quale voglio scrivere è YSlow, sviluppato da Yahoo!.
Si tratta di un’estensione per un’altra estensione, Firebug (della quale parlerò prossimamente), che ha lo scopo di misurare il peso di una pagina web, dando informazioni su come ottimizzarla. Le regole che vengono utilizzate per la valutazione sono state studiate da Yahoo! e sono consultabili alla pagina di documentazione di YSlow. Il prodotto è veramente interessante e permette, come del resto Firebug, di esplorare tutta la pagina in maniera estremamente approfondita.
Categoria: sviluppo web
Mi chiamo Alberto Mori - nickname flatiron - e sono un consulente informatico con esperienza in Online Multimedia. Da oltre 10 anni mi occupo di sviluppo di siti web, web application, opere multimediali e grafica. Nel corso degli anni ho potuto esaminare ogni aspetto del World Wide Web specializzandomi in: linguaggi di markup, PHP, MySql, Javascript e Flash. Per approfondire le mie competenze/esperienze vi rimando al mio curriculum vitae.
Guarda anche:
2 | Unique Visitors |
