HTML5 e CSS3 su Internet Explorer 6,7 e 8

Sempre stufi di Explorer e del suo NON supporto degli stardard?

Si è tanto discusso, e ancora si continua a discutere, del fatto che Microsoft Internet Explorer sia ancora uno dei browser più usato dagli utenti, nonostante sia il browser che meno di tutti supporta gli standard di programmazione…

HTML5 e CSS3 su Internet Explorer 6,7 e 8 , links  , iehtml51

Si sa già che nel futuro prossimo venturo Internet Explorer 9 supporterà pienamente il linguaggio HTML5 e lo standard H.264, ma purtroppo chi crea siti internet ha ovviamente a che fare anche con gli utente che non hanno voglia di aggiornare il browser e continuano ad usare vecchie versioni di IE.

Per dare anche alle versioni precedenti di Internet Explorer il supporto ad HTML5 basta una semplice riga di codice inserita all’inizio della pagina html:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Questa libreria JS è ospitata da Google Code, quindi possiamo dare completo affidamento a questo ‘hack’ e persino risparmiare banda usando direttamente il file residente sui server di Google.

link: html5shim , documentazione alternativa

HTML5 e CSS3 su Internet Explorer 6,7 e 8 , links  , piecn

PIE (Progressive Internet Explorer) è un file HTC (Internet Explorer attached behaviour; “comportamento allegato”) che permette a Internet Explorer 6, 7 e 8 di riconoscere ed eseguire correttamente determinate proprietà CSS3.

Nel momento in cui programmiamo il nostro CSS l’uso di questa libreria non costringe ad usare nessuna differenza, come ad esempio l’uso di border-radius piuttosto che -moz-border-radius).

Per far funzonare questo ‘hack’ basta inserire una riga allo stile CSS:

behavior: url(PIE.htc);

Ad esempio, il codice seguente crea un box con angoli arrotondati, che si vedrà correttamente in tutti gli ultimi browser eccetto ovviamente Internet Explorer 6, 7 o 8:

#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

Aggiungendo solo un altra riga il risultato sarà ottenibile anche in IE:

#myElement {
...
behavior: url(PIE.htc);
}

Se per caso non funzionasse, la prima cosa da provare – come spiegato qui – è cambiare l’estensione da HTC a PHP.
Se nemmeno questa funziona, la terza ed ultima possibilità è l’integrazione tramite javascript come spiegato qua.

Attualmente le funzioni supportate – totalmente o parzialmente – da PIE sono:

  • border-radius (angoli arrotondati)
  • box-shadow (ombra del box)
  • border-image (bordi fatti con immagini)
  • sfondi con sfumature
  • valori RGBA (cioè con trasparenza)
  • multiple background images (immagini di sfondo multiple, tramite -pie-background)
  • linear-gradient (sfumature)

…ed altre funzioni proprietarie come

  • -pie-watch-ancestors
  • -pie-png-fix (per IE6)
  • -pie-lazy-init
  • -pie-poll

link: PIE

HTML5 e CSS3 su Internet Explorer 6,7 e 8 , links  , logo selectivizr

Anche Selectivizr è una libreria Javascript che simula le pseudo-classi e i selettori degli attributi di CSS3 in Internet Explorer 6, 7 e 8.
Per usarla, basta semplicemente includere la libreria nella pagina html, e lei farà il resto; il codice è questo:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

Selectivizr aggiunge il supporto per 19 pseudo-classi Css3, 2 pseudo-elementi e tutti i selettori degli attributi; in più corregge alcuni bachi nell’implementazione dei selettori propri di Explorer.

[attr]
[attr=]
[attr~=]
[attr|=]
[attr^=]
[attr$=]
[attr*=]
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:only-of-type
:empty
:enabled
:disabled
:checked
:hover
:focus
:target %u2020
:not
:root
::first-line
::first-letter

link: Selectivizr

Se di solito non usate Internet Explorer ma volete comunue sapere come si comporteranno le vecchie versioni di IE – che non supportano Css3 – quando incontreranno del nuovo codice Css, potete usare un bookmarklet che, una volta attivato, farà in modo che i moderni browser simulino Internet Explorer dalla versione 6 alla 8.
deCSS3 funziona solo con Safari e Chrome ma non ancora su Opera e Firefox.

link: deCSS3

Altri sono arrivati qui cercando:
ie8 text-shadow, html5 js, hack per internet explorer, border radius ie8, html5 internet explorer, border-radius ie8, if lt ie 9, html5 internet explorer 8, border on text on ie explorer, explorer 8 css, sito compatilbile exporer 6.

23 pensieri su “HTML5 e CSS3 su Internet Explorer 6,7 e 8”

  1. Finalmente un sito avanti, visto che tutti pubblicano codici solo del vecchio IE6-7-8! Almeno qui si possono rendere compatibili le pagine dei browsers open a IE.

    Thanks!

  2. Posso approfittare della tua cortesia e conoscenza per un problema con un css che non riesco a mettere a posto?

    Due colonne; nella prima (dx) del testo linkato che deve aprire piccole immagini (200px) al passaggio del mouse sopra al testo stesso e come sposto il mouse devono chiudersi; nella seconda (dx o centrale) semplice testo fisso.

    Ho provato con jscript e semplici tabelle (visto che non riuscivo più con css appunto a causa dei parametri cambiati nel tempo) però è veramente uno sconquasso, perché con FF o Chrome funziona, ma con le varie versioni di IE… salta tutto.

    Ti ringrazio in anticipo e in ogni caso ;)

    laudens

  3. Purtroppo ancora non c’è un link possibile in quanto nulla è stato pubblicato.

    Servirebbe un layout completo (html e css) compatibile con IE9 dato che in FF e altri browsers open funziona, ma non va con prodotti Microsoft…(e sai bene perché). Avevo fatto qualcosa in java, ma inserendolo in semplici 2 tabelle mi sballa tutto quando apro con IE…

    Ho pensato al css, ma se anche fosse in javascript non sarebbe male (visto che magari è più compatibile che il css).

    Pensi si riesca?
    Avevo visto qualcosa in giro, ma stupidamente non ho salvato il link…mea culpa!

      1. Si grosso modo così con colonne centrate e stessa misura (dato che poi ci sono testi simili da inserire; pensavo a 250px per colonna) che non portano via più di tanto. (Avevo già visto il sito e provato a fare qualcosa con quegli esempi, ma alla fine è accaduto come già detto…)

        L’esempio della prima è quello che fa al caso mio, appunto da come detto sopra. Però…

  4. Inserire codice non compatibile con IE9 mi ha sballato ogni cosa. Su FF (sia Linux che Windows) apriva bene le immagini al passaggio del mouse (praticamente un popug) sia come altezza che come offset sinistro, ma in IE9 era una cosa davvero assurda: immagini sdoppiate che si aprivano sotto la prima colonna (quella dei testi linkati) a volte facendo anche apparire la barra laterale perché eccedeva nella lunghezza pagina, anche se le immagini erano state tutte proporzionate (200X200px).

    Da quel punto sono andato in palla, perché ho ricominciato da zero e la confusione è stata enorme…

    Poi ho provato con java entro ad una semplice tabella html, ma accadeva la cosa simile…

    ora sono alla ricerca di qualcosa che mi permetta la visione su entrambi i browsers e nello stesso modo, praticamente:

    var offsetX= 200

    var offsetY= 05

    in modo da avere la posizione di ogni immagine aperta vicina al proprio testo-link.

  5. Dimenticavo una cosa: uso un semplice text editor o al massimo Kompozer per avere più velocità, però in seguito controllo il codice a mano…

  6. Ho provato ieri sera a risposnderti, ma ero su Linux e sembra il sito non lo digerisca affatto. Continuava a dirmi di abilitare immagini e cookies (già abilitati). Penso sia colpa di qualche banner o di qualche collegamento pubblicitario.

    Sto ancora sudando e sono su windows… ho messo a punto qualcosa, ma ancora le immagini che si aprono fanno quello scherzo…

  7. Purtroppo non ho quella possibilità. Il sito che avevo con Tiscali non è più attivo in quanto avendo cambiato gestore Tiscali non me lo ha più fatto aggiornare e mettere a posto, per cui…

    Comunque ho trovato una via d’uscita con “l’antico” codice html… a tabelle! Sono riuscito a dargli tutti i parametri di cui necessitava e lo vedo sia in FF (windows e Linux) che su IE varie versioni. Appena torno sul pc Linux, salvo copia del codice e te lo posto qui, caso che qualcun altro possa averne bisogno…

    L’importante è arrivare… poi se a piedi o in auto, non ha importanza…

    ;)

  8. Ho postato qui il file (mettendo …) ma non lo visualizza e neppure il testo normale…

    Se mi mandi un tuo indirizzo e-mail. te lo invio così poi lo puoi inserire a tuo piacimento (anche perché sicuramente hai gli striumenti adatti, dovendo mantenere il sito).

    La mia email dovresti averla…(se non ti compare dimmelo)

  9. Ciao. Pensavo di aver terminato ogni cosa, e invece… quell’anormale IE9 è in grado di scompigliare ogni pagina…

    Avevo inserito uno sfondo a piena pagina con codice java, che anche IE deve vedere, e invece quando arrivato dal mio amico, ho scoperto che la definizione da lui usata (laptop con monitor wide per i films) essendo superiore di 1024×768, sballava tutto, rendendo tale codice inutile… Ma è possibile che microzozz sia arrivata a tali punti di inutilità? Poi non capisco perché usi gli ActiveX e IE9 ad un certo punto metta in guardia dall’usarli, facendo apparire una barra gialla in basso al pc, per cui chiede permesso all’utente di attivare sia css che ActiveX. Per me hanno una mente contorta, perché sono loro che devono capire se il codice sia dannoso o no, e non dare la cosa in pasto agli utenti, visto che il buon 80 sono ignari…

    Più vado avanti e più apprezzo il mondo open source che pur essendo distante da MS, rilascia sempre codice aperto a tutti.

    Ora sono in ballo con la pagina a pieno sfondo resizable. Hai qualche idea in proposito?

    TX ;)

  10. Ciao. Ho provato il codice che mi hai suggerito, ma penso richieda un’immagine specifica in dimensioni. A me la mostra troppo “schiacciata”… possibile?
    Al momento sto facendo prove con un js che funziona bene, però necessita anche qui di javascript..

    <head><script type="text/javascript" src="images/fixedbackground.js">
    <body onload="fixedBackground('images/bkgimg.jpg');"></body>

    (se ti può servire ti mando anche il js già pronto). Come sai però il js va inserito in cartella ove c’è l’immagine di sfondo (anche questo è forse un bug di programmazione ancora non risolto?)

  11. Sì, l’avevo già visto però mi sembra un po’ pesante anche data la grandezza iniziale dell’immagine che richiede i 300 dpi.

    In caso provo ad agire proprio sull’immagine per vedere se è possibile ottenere qualcosa.

Lascia un Commento

L'indirizzo email non verrà pubblicato.

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.