
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Sostituire testo con immagini grazie ai CSS. Analisi delle principali tecniche e confronto tra pro e contro nella loro implementazione
In questo articolo presenterò alcune tecniche di Image Replacement, indicandone i principali pro e contro. Anzitutto, cerchiamo di capire di cosa parleremo. Una tecnica di Image Replacement è un modo per sostituire mediante i fogli di stile un’ informazione testuale con un’ informazione visuale. Questa informazione testuale generalmente è un header, cioè il logo o il titolo di una sezione di una pagina web, ma in via teorica sarebbe possibile rimpiazzare con un background il contenuto di un’ intera pagina web. Ho parlato di un’ informazione visuale, ma in realtà più propriamente avrei dovuto parlare di immagine di sfondo. Vedremo in seguito il perchè.
Un informazione visuale, espressa attraverso il tag <img> ha un contenuto visuale effettivo. E’ buona norma l’uso degli attributi alt e title. Ricordo che l’ alt è un attributo per le immagini che ha molteplici funzioni:
L’ attributo alt è necessario per la validazione di una pagina html. Mentre l’ attributo title è opzionale e serve per indicare un titolo o una breve descrizione di un immagine e, anche se non è un attributo obbligatorio, è decisamente consigliato.
La maggior parte dei siti professionali come header di ogni pagina html usa un’ immagine con un logo, un brand o una scritta con un font particolare per far sì che il sito abbia un aspetto grafico accattivante e che l’ immagine della ditta sia facilmente riconducibile a tale logo. Ecco un buon codice html per riportare un’ immagine al posto del classico <h1> testuale. Supponiamo che la ditta si chiami “Pippo Pippo” e che faccia ombrelli:
<div id=”header”>
<h1>
<img src=”logo.jpg” alt=”Logo della ditta Pippo Pippo” title=”Pippo Pippo, ombrelli e affini dal 1956″>
</h1>
</div>
L’ uso di immagini con contenuti testuali attraverso il tag img ha, oltre i vantaggi derivanti dell’ uso dell’ alt text, il vantaggio che, a differenza di un’ immagine di background, viene stampata di default dai browsers. Ha uno svantaggio non indifferente però, che è quello di non consentire personalizzazioni del contenuto. Non è possibile, se non sovrascrivendo l’ immagine o modificando l’ html, cambiare la presentazione della ditta con un nuovo logo o un classico header testuale.
Veniamo ora alle tecniche di Image Replacement. Tutte le tecniche di image replacement hanno lo scopo di “nascondere” visivamente una porzione di testo e di mostrare al suo posto un’ immagine che viene indicata attraverso la proprietà background dei css.
Credo che la prima tecnica di image replacement usata nel web sia in assoluto la Fahrner Image Replacement sul sito Css Zen Garden. Css Zen Garden, per i pochi che non lo conoscono, è una dimostrazione di cosa si può realizzare per mezzo del design basato sui CSS come viene definita sul sito stesso. L’ autore di Css Zen Garden ha provveduto un template base con html e css, consentendo ai partecipanti la quasi totale modifica della presentazione attraverso i soli fogli di stile. Per far ciò, si è avvalso della FIR e ne ha consigliato l’ uso ai partecipanti. Vediamo di che si tratta, ecco l’ html usato proprio nella versione base di CSS Zen Garden:
<div id=”pageHeader”>
<h1><span>CSS Zen Garden</span></h1>
</div>
Ed ecco il css:
#pageHeader h1 {
background: transparent url(/001/h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
#pageHeader h1 span {
display: none
}
In sostanza si tratta di attribuire un background all’ h1 e di nascondere il testo contenuto all’ interno dello span modificando la proprietà display e dichiarando che lo span dell’ header non deve essere reso visivamente.
Probabilmente la sezione 508, una legge americana che impone
una sorta di bollino blu per l’ accessibilità dei siti web ha sensibilizzato molto i webdesigner
verso l’ accessibilità, non solo in America, spingendoli al testing di pagine web con screen reader,
browser testuali e dispositivi alternativi di visualizzazione delle pagine web per persone con disabilità.
Un articolo comparso il 20 Ottobre 2003 su
A List Apart ha presentato l’ enorme svantaggio della FIR dal punto di
vista dell’ accessibilità. Gli screen reader sono programmi che leggono siti web usati da persone affette
da ipovisione. La maggiorparte degli screen reader visualizza una pagina html mediante il motore di rendering di
Internet Explorer della Microsoft e la legge ad alta voce. Non è consentito nella maggiorparte dei casi disabilitare il foglio
di stile dell’ autore attraverso uno screen reader. Quello che è risultato da questo articolo è che un testo che non
viene mostrato, impostandolo a display:none non verrà neanche pronunciato dalla maggiorparte degli screen
reader.
Curiosando in rete, ho trovato l’ idea per rendere la FIR accessibile. Ecco la regola css da applicare allo span innestato (la regola relativa all’ h1 rimane invariata rispetto alla versione originale):
h1 span{
display: block;
width: 0;
height: 0;
line-height: 0; /* attribuisce dimensioni nulle */
overflow: hidden;
clip: rect(0,0,0,0); /* nasconde il testo */
}
L’ idea dietro una regola css simile può anche essere prestata ai principi dell’ accessibilità per realizzare sezioni di testo visibili agli screen readers e ai text browsers ma non visualizzate dai browsers moderni. Un esempio su tutti potrebbe essere la lista delle accesskey di un sito.
Molti appassionati ed esperti di fogli di stile si sono prodigati per fornire alternative accessibili alla FIR. Le tecniche di Image Replacement si possono suddividere in due gruppi principali:
Mentre la FIR rientra nel primo gruppo, molti autori si sono orientati verso l’ ideazione di tecniche senza markup aggiuntivo, permettendo così di usare le tecniche in entrambe le fasi di scrittura di una pagina web: il design-time e il restyle-time. Il desing-time è la fase di stesura del codice html e del foglio di stile associato, mentre il restyle-time riguarda unicamente la modifica del foglio di stile. E’ facile capire che una tecnica di image replacement con markup minimale consente pieno controllo della presentazione attraverso immagini senza prevederne l’ uso in fase di scrittura dell’ html o senza modifiche successive all’ html stesso. Vedremo brevemente alcune delle nuove tecniche di image replacement e ne spiegheremo vantaggi e svantaggi.
In questa sezione presenteremo velocemente le tecniche con markup minimale. Sostanzialmente le tecniche sono due, ed entrambe purtroppo per le diversità di interpretazione dei vari browser usano degli hack ossia dei “trucchi” per nascondere alcune proprietà a determinati browsers.
Seamus Leahy e Stuart Langrigde sono arrivati indipendentemente e quasi contemporaneamente a questa tecnica senza markup aggiuntivo che sfrutta i principi del Box Model, impostando ad altezza nulla l’ <h1> (e di conseguenza nascondendo il testo mediante la proprietà overflow) ed usando un padding-bottom per mostrare il background. Ecco il css relativo ad un <h1>testo da rimpiazzare con un’ immagine</h1>
h1{
padding-top: 133px; /*altezza dell’ immagine*/
width: 243px;
background-image: url(ex1.gif); /*l’ immagine*/
background-repeat: no-repeat;
overflow: hidden; /*nasconde il testo*/
height: 133px; /* Hack di Tantek per WIN IE5.x */
voice-family: “”}””;
voice-family:inherit;
height: 0;
}
Mile Rundle ha pensato invece di portare fuori dall’ area visibile il testo dell’ header, usando un valore molto alto di text-indent negativo. Un text-indent negativo ha l’ effetto di traslare sulla sinistra la prima riga di testo di un elemento html. Il risultato in questo caso è che il testo è talmente traslato da non essere visibile. Purtroppo questa tecnica nella versione originale non funziona sulle versioni di Internet Explorer per Mac e necessita di un hack.
Ideata da Tom Gilder è attualmente, oltre alla FIR, l’ unica tecnica di image replacement con markup aggiuntivo. Usa uno span senza contenuto testuale viene anteposto al testo dell’ header. Vediamo l’ html:
<h1><span></span>Nome del sito</h1>
Lo span attraverso un posizionamento assoluto viene a coprire il testo. Ecco il css:
h1{
position: relative;
width: 300px;
height: 100px
}
h1 span{
position: absolute;
width: 100%;
height: 100%;
background: url(…) no-repeat
}
A differenza delle altre tecniche non usa hack per poter funzionare sul maggior numero di browsers, e personalmente
ritengo che sia la migliore tecnica di image replacement in assoluto dato che è, e soprattutto sarà, compatibile con
tutti i browsers con supporto minimo dei css. L’ unico svantaggio è che richiede uno span aggiuntivo.
Per dovere di cronaca, riporto il link verso un altro autore che ha avuto la stessa idea:
Graphical Headings di Levin Alexander.
Nessuno degli autori qui presentati si è preoccupato nel rispettivo articolo di fornire le regole css per adattare la sua tecnica di image replacement alla stampa. C’è da dire che un qualsiasi browser di default non stampa le immagini di background. L’ unica tecnica che stampa degnamente il testo dell’ header senza aggiunte di un foglio stile per la stampa è la cover-up span, dato che non naconde il testo ma lo copre soltanto. L’ unico neo è che le dimensioni dell’ header testuale in fase di stampa saranno quelle assegnate via css. Ecco il css per ovviare a questo problema:
<style type=”text/css” media=”print”>
h1, h1 span{ position: static; width: auto; height: auto}
<style>
In maniera simile è possibile riadattare le altre tecniche di image replacement per la stampa, basterà reimpostare ai valori di default le proprietà usate ed eventualmente attribuire un immagine di background inesistente che ridefinirà quella reale.
Su alistapart di recente è stato pubblicato un articolo di Christian Heilmann che presenta una tecnica che usa javascript e DOM per effettuare l’ image replacement. Se javascript è disabilitato viene mostrato il testo, mentre se è abilitato e il browser con cui si sta visualizzando la pagina è dom-compatibile, il testo viene rimosso e sostituito da un img. La tecnica è curiosa e geniale, ma ha ancora qualche problema. Se tra le impostazioni del browser c’è javascript abilitato, ma le immagini disabilitate, non verrà mostrato nè il testo nè l’ immagine.
In questo articolo abbiamo parlato en passant delle principali tecniche di image replacement.
Le tecniche presentate, a parte la FIR in versione originate, sono tutte accessibili e compatibili con browser di ultima generazione,
browsers testuali e screen reader.
Non c’è modo purtroppo di forzare la stampa delle immagini di background di una pagina web, se non
quello di consigliare all’ utente di abilitare la relativa opzione, scelta decisamente opinabile e sconsigliabile.
A questo punto l’ unico modo per stampare degnamente una pagina html che usa l’ image replacement via css è quella
di consentire la stampa del testo anzichè dell’ immagine. Se proprio non si vuole rinunciare alla stampa del logo
e degli header grafici della pagina web, gli unici due modi sono:
Inoltre c’è da dire che per la maggiorparte dei siti, a meno che soggetti a frequenti restyling o che
rientrino tra quei siti che presentano diversi stili alternativi, forse la soluzione del tag img
è ancora la più adeguata.
Vediamo ora i link e gli approfondimenti sulle cose di cui abbiamo parlato:
Articoli sulla FIR e le tecniche alternative
Link diretti alle tecniche originali qui presentate:
Se vuoi aggiornamenti su Le tecniche di Image Replacement inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Bjarne Stroustrup, creatore del linguaggio di programmazione C++, illustra le caratteristiche del suo linguaggio paragonandolo a C, il linguaggio di […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
I migliori strumenti per individuare vulnerabilità Cross Site Scripting.
Come usare le connessioni DSN-less ad Access attraverso COM
In che modo le SP possono migliorare la produttività del nostro lavoro
La prima guida che ti spiega come utilizzare LinkedIn per il tuo business con esempi pratici e una visione strategica subito applicabile per il tuo profilo.