2009
Oct
20

IE PNG fix

Oggi parliamo di un importante accorgimento da tenere presente nello sviluppo della grafica web. Ci occuperemo di ottenere un perfetto supporto alla trasparenza delle PNG anche usando Internet Explorer 6.

Come molti sapranno in ambito web è indispensabile facilitare la navigazione dell’utente, che può utilizzare qualsiasi tipo di browser. Purtroppo non tutti i browser funzionano allo stesso modo. Questo crea grossi problemi (più che problemi le chiamerei lungagini) ai web designer che devono sviluppare un solo sito per essere compatibile con tutti (o la maggior parte) i browser usati.

Un browser è come se fosse un’auto. C’è il browser più bello, il più veloce, il più funzionale, ed ognuno “sotto il cofano” ha un diverso motore di rendering. Si tratta un software che si occupa della formattazione dei contenuti web e della disposizione dell’output fronte utente. Ad esempio il motore di rendering di Firefox è Gecko, quello di Explorer è Trident, Opera invece utilizza Presto. Un motore rendering non è necessariamente legato ad un browser, il motore di rendering è il programma a cui i browser si appoggiano per funzionare. Come prestazioni i migliori sono Presto e Gecko, come rispetto degli standard XHTML il migliore è KHTML (usato da Konqueror e Safari).

Benché gli output dei browser siano tutti simili (sappiamo che non è cosi, ma è previsto che lo siano) non sono mai uguali, dovrebbero, ma per ragioni diverse risulta difficile che lo siano. Una delle pecche più importanti nella compatibilità dei browser è rappresentata dal mancato supporto alla trasparenza delle PNG in Internet Explorer 6. Questo crea non pochi problemi. Rendiamoci conto che le PNG sono utilizzate in ambito web soprattutto per via della possibilità di rispettare le trasparenze in un’immagine. Gli stessi bordi di questo blog sono “ombreggiati” tramite l’uso delle trasparenze delle PNG.

Di seguito riporto la home page del blog vista da IE6 senza supporto trasparenza per le PNG:
ie6_render.png
È chiaro a tutti che non è l’effetto desiderato.

Per sistemare il pasticcio che mi crea IE6 sono costretto a ricorrere ad un escamotage che non è considerato standard, ma pare essere il modo meno doloroso modo per risolvere il problema. In poche parole IE6 non rispetta gli standard, e visto che è usato ancora da troppa gente costringe anche me a violare gli standard, perché il navigatore distratto non cada in preda al panico dalla PNG non trasparente.

Esiste un piccolo programmino da implementare tramite CSS, si chiama IE PNG Fix, sviluppato dalla Twin Helix. Il PNG Fix si occupa di “restaurare” la pagina web con le PNG trasparenti visualizzata da IE5.5 ed IE6 in una più gradevole e più rispondente agli standard attuali.

Le istruzioni perché renderizzi il nostro sito sono brevi ed elementari. È necessario l’accesso al server per l’upload dei file.

  • download e scompattamento del fix dal sito
  • upload dei file “iepngfix.htc” e “blank.gif” sul server web
  • modificare la sezione “HEAD” di tutte le nostre pagine con il codice seguente:
    (preferite la funzione include(”header.tpl”); piuttosto che modificare tutti gli header)

    <!--[if IE 6]>
    <style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
    </style> 
    <![endif]-->

    Ricordiamoci che il percorso di “iepngfix.htc” è relativo al file HTML, non al CSS.

  • se hai messo “blank.gif” in una sottodirectory lo devi specificare nel file “iepngfix.htc” alla voce
    IEPNGFix.blankImg = '/images/blank.gif';

    ancora una volta è riferito al percorso della pagina HTML. Se sbagli vedrai la classica “X” rossa di “immagine non trovata”.

Nel sito di IE PNG Fix sono anche dettagliatamente descritti alcuni dei problemi più comuni. Potete trovarne una lista (in inglese) nel loro sito alla voce “How to fix common problems“.

Admin